web-dev-qa-db-ja.com

AJAX jQueryを使用した応答でIDによって要素を見つける

Phpページにデータを投稿する必要があり、応答内にある特定のdivのテキストを取得したいのですが、正しく設定できないようです。私はjQueryがあまり得意ではありませんが、通常はかなり迅速に把握できます...これに1分ほど取り組み、見つけたものをすべて試しました...適切な組み合わせが欠けていると思います。

_$.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');  
_

これはconsole.log(success);の出力であり、赤いボックスは応答から欲しいものです...

！[この写真は本当に小さいように思えます...私がそれを作ったとき、それはそれほど小さくありませんでした。まだ読めることを願っています] [1]

これはそれを行います：

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

応答は...

_<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> 
_

そして、スタイル部分を削除しようとしましたが、html、head、およびbodyタグに追加して、それが役立つことを期待しています....つまり、応答が3つのdivのみで構成されている場合、同じ問題が発生します。

jqueryajaxselector
20
gloomy.penguin

すべての要素が同じ上にあることに注意してくださいレベル？ .filter()を使用して、現在の選択範囲をその選択範囲内の単一の要素に絞り込む必要があります。.find()は代わりに現在の選択範囲の子孫を調べます。

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

Ajaxから完全な「html」ページが返されましたが、divでラップされたコンテンツの一部のみが必要で、「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.
  }
});

@kevinの答えは、find（）が子孫だけを選択し、検討中の最初の要素を選択しないため、find（）が期待どおりに動作しない理由のヒントを与えました。フィルターを使用するほかに、現在の要素が探しているものである場合、$。closest（）も機能します。おそらく、この投稿は@Kevinの回答に非常によく似ています。別の代替の回答を提案し、できればより明確にするために詳細を提供しただけです。

2
ken