web-dev-qa-db-fra.com

jQuery .find () sur les données de l'appel .ajax () renvoie "[objet Object]" au lieu de div

Essayez de trouver l'élément div avec id="result" dans les données renvoyées à partir de .ajax() à l'aide de .find(). Malheureusement, alert(result) ne renvoie pas div#result.

Voici mon code:

$.ajax({
    url: url, 
    cache: false,
    success: function(response) {
        result = $(response).find("#result");
        alert(response); // works as expected (returns all html)
        alert(result); // returns [object Object]
    }
});
jqueryajaxfind
42
Mensch

Pour répondre spécifiquement à votre question, cela semble fonctionner correctement. Vous avez dit qu'il renvoie [object Object], ce que jQuery renverra avec la méthode find("#result"). Il retourne un élément jQuery qui correspond à la requête find.

Essayez d’obtenir un attribut de cet objet, tel que result.attr("id") - il devrait retourner result.

En général, cette réponse varie selon que #result est ou non l'élément de premier niveau.

Si #result est l'élément de niveau supérieur,

<!-- #result as top level element -->
<div id="result">
  <span>Text</span>
</div>
<div id="other-top-level-element"></div>

find() ne fonctionnera pas. Utilisez plutôt filter():

var $result = $(response).filter('#result');

Si #result n'est pas l'élément de niveau supérieur,

<!-- #result not as top level element -->
<div>
  <div id="result">
    <span>Text</span>
  </div>
</div>

find() fonctionnera:

var $result = $(response).find('#result');
94
Stephen Watkins

Je viens de passer 3 heures pour résoudre un problème similaire. C'est ce qui a fonctionné pour moi.

L'élément que je tentais d'extraire de ma réponse $.get était un premier élément enfant de la balise body. Pour une raison quelconque, lorsque j'ai enroulé une div autour de cet élément, il est devenu récupérable via $(response).find('#nameofelement').

Aucune idée pourquoi, mais oui, l'élément récupérable ne peut pas être le premier enfant du corps ... cela pourrait être utile à quelqu'un :)

28
Shea Dawson

essaye ça:

result = $("#result", response);

btw alert est un moyen approximatif de déboguer des choses, essayez console.log

20
antpaw

voici votre réponse:

<div class="test">Hello</div>
<div class="one">World</div>

Le jQuery suivant ne fonctionnera pas:

$(data).find('div.test');

comme les div sont des éléments de niveau supérieur et que les données ne sont pas un élément mais une chaîne, pour que cela fonctionne, vous devez utiliser .filter

$(data).filter('div.test');

Une autre même question: Utilisez les sélecteurs Jquery sur $ .AJAX chargé HTML?

8
Bảo Nam

n'oubliez pas de le faire avec parse html. comme:

$.ajax({
    url: url, 
    cache: false,
    success: function(response) {
        var parsed = $.parseHTML(response);
        result = $(parsed).find("#result");
    }
});

doit travailler :)

6
funny

La fonction jQuery find () renvoie un objet jQuery qui enveloppe l'objet DOM. Vous devriez être capable de travailler avec cet objet pour faire ce que vous voulez avec la div.

3
Ryan

Cela a fonctionné pour moi, il vous suffit de mettre .html () à la fin de - $ (réponse) .find ("# résultat")

3
Steve Mather

Vous pouvez le faire de cette manière pour trouver une div et obtenir ses attributs ou tout ce que vous voulez.

$(response).filter('#elementtobefindinresponse').attr("id");

ou 

$(response).filter('img#test').attr("src");
1
Heart

Le fait est que votre ajax _ {réponse renvoie un chaîne, donc si vous utilisez directement $ (réponse)) _ il renverrait JQUERY:Erreur non capturée: erreur de syntaxe, expression non reconnue dans la console. Pour l'utiliser correctement, vous devez d'abord utiliser une fonction intégrée à JQUERY appelée $ .parseHTML (réponse) . Comme le nom de la fonction l'indique, vous devez d'abord analyser la chaîne en tant que objet html. Juste comme ça dans votre cas:

$.ajax({
    url: url, 
    cache: false,
    success: function(response) {
        var parsedResponse = $.parseHTML(response);
        var result = $(parsedResponse).find("#result");

        alert(response); // returns as string in console
        alert(parsedResponse); // returns as object HTML in console
        alert(result); // returns as object that has an id named result 
    }
});
1
sturzerblitz

essayez if ($ (réponse) .filter ('# résultat'). longueur) // faire quelque chose

0
Zhelyo Hristov

Est-ce que #result est dans la réponse HTML? Essayez ce qui suit. jQuery retournera toujours un objet vide s'il ne trouve rien.

alert(result.length);
0
Jason McCreary

Vous devez ajouter dataType: "html" à la demande. Je suis tout à fait sûr que vous ne pourrez pas chercher dans le DOM du HTML renvoyé s'il ne sait pas que c'est du HTML.

0
Fabian

vous utilisez simplement le code suivant

var response= $(result);

$(response).find("#id/.class").html(); [or] $($(result)).find("#id/.class").html();
0
karthikeyan ganesan

si votre appel ajax retourne un tableau JSON, une chaîne JSON côté serveur, , vous devez alors commencer par:

$("button#submit").click(function() {
    $.ajax({
        type: "POST",
         url: "ajax_create_category",
        data: $('form#create_cat_form').serialize(),
     success: function(data)
          {
          if(data)
          {
              var jsonObj = JSON.parse(data);
              if(jsonObj.status)
              {
                $("#message").html(jsonObj.msg);
              }
            }
         }
       });
    });

Analysez votre objet JSON dans un objet JS (variable) et vous pourrez ensuite utiliser l'index des données pour extraire les données! J'espère que cela aiderait certains d'entre vous! :)

0
Randika Vishman
$.ajax({
    url: url,
    cache: false,
    success: function(response) {
        $('.element').html(response);
    }
});

< span class = "element" >
    //response
    < div id = "result" >
        Not found 
    </div> 
</span>

var result = $("#result:contains('Not found')").text();
console.log(result); // output: Not found
0
Kuldeep Gupta

Spécifiez dataType: "html". 

Si vous ne le faites pas, jQuery devine le type de données demandé (consultez: http://api.jquery.com/jQuery.ajax/ ). À mon avis, dans votre cas, response était String plutôt que DOMObject. De toute évidence, les méthodes DOM ne fonctionneront pas sur une chaîne.

Vous pouvez tester cela avec console.log("type of response: " + typeof response) (ou alert("type of response:" + typeof response), au cas où vous n'exécuteriez pas Firebug)

0
FK82