web-dev-qa-db-fra.com

Recherche d'un élément par ID dans une réponse AJAX avec jQuery

J'ai besoin de publier des données sur une page php, puis j'aimerais obtenir le texte d'un certain div qui se trouve dans la réponse, mais je n'arrive pas à configurer les choses correctement. Je ne suis pas trop bon avec jQuery mais je peux généralement comprendre les choses assez rapidement ... Je suis là depuis une minute et j'ai essayé tout ce que j'ai trouvé ... Je pense que je manque juste la bonne combinaison de choses .

$.post("process.php", data , function (response) {  

       var w = window.open();    

       $(w.document.body).html(response); 

       console.log(typeof response); //  yeilds string 
       //create jquery object from the response html
       // var $data = $(response);   // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text


       var success =  $($.parseHTML(response)).find("#success"); 
       console.log('success'); 
       console.log(success);        // see screenshot
       console.log(success.text()); // yields nothing 
       console.log(success.val());  // yields undefined 
       // if (window.focus) {w.focus()}; 

 },'html');

c'est la sortie de console.log(success); et la case rouge est ce que je veux de la réponse ...

! [Cette image semble vraiment minuscule ... elle n'était pas si petite quand je l'ai faite. J'espère qu'il est toujours lisible] [1]

et cela fait cela:

var success =  $(response).find("#success"); 
console.log('success'); 
console.log(success);        // yeilds Uncaught Error: Syntax error, unrecognized expression: + whole html text in red

La réponse est ...

<html><head>
   <style>

      div.totals {
          font-family:calibri; font-size:.9em;  display:inline-block; 
          border-width: 2px;  border-style: solid; border-color: #FFD324; 
          background-color: #FAF5D7; color: #514721; 
          width: 500px; 
          }

      div.error_invalid {
         font-family:calibri; font-size:.9em;  display:inline-block; 
         border-width: 2px; border-style: solid; border-color: #9999CC; 
         background-color: #EEEEFF; color: #7979B8; 
     }

    </style>
    </head>
    <body>
    <div class="totals">Total new rows added: 0 out of 0<br/></div>
    <br/><br/>
    <div class="totals">Total updated rows: 0 out of 0 <br/></div>

    <div id="success">true</div>
    </body></html>

Et j'ai essayé de supprimer la partie style et j'ai ajouté les balises html, head et body dans l'espoir que cela aiderait .... ce qui signifie que j'ai les mêmes problèmes si la réponse se compose uniquement des trois divisions.

jqueryajaxselector
20
gloomy.penguin

Remarquez comment tous les éléments sont sur le même nivea? Vous devez utiliser .filter() pour réduire la sélection actuelle à un seul élément de cette sélection, .find() examinera à la place les descendants de la sélection actuelle.

var success =  $($.parseHTML(response)).filter("#success"); 
console.log(success); // div#success
32
Kevin B

J'ai obtenu une page 'html' complète retournée par ajax, mais je n'ai besoin que d'une partie de son contenu, qui est enveloppé par un div et j'ai également besoin d'exécuter le script à l'intérieur de la page 'html'.

 $.ajax ({
  type: "POST",
  url : "contact.php",
  data: $("#formContactUs").serialize(),
  success: function(msg){
    console.log($(msg)); // this would returned as an array
    console.log(msg);    // return whole html page as string '<html><body>...</body></html>'
    $('#id').html($(content).closest('.target-class'));
    $('#id').append($(content).closest('script')[0]);  // append and execute first script found, when there is more than one script.
  }
});

La réponse de @kevin a donné des indications sur les raisons pour lesquelles find () ne fonctionne pas comme prévu, car il ne sélectionne que son descendant mais pas le premier élément considéré. En plus d'utiliser le filtre, $ .closest () fonctionne également si l'élément actuel correspond à ce que vous recherchez. Eh bien, probablement ce post assez similaire à la réponse de @ Kevin, c'est juste pour suggérer une autre réponse alternative et a donné plus de détails qui, espérons-le, clarifieront les choses.

2
ken