複数のdivをjQueryのajaxレスポンスから更新する

Question

asp.net mvcショッピングカートにページがあり、クーポンを入力して他のページのコンテンツと一緒に注文の要約を表示できます。クーポンコードを検証し、エラーを報告し、jQuery ajax経由でページ上の注文概要を更新する更新ボタンを希望します。

フォームと部分的なビューを作成し、jQueryでターゲットプロパティを使用することで、これを行うことができます。しかし、私は以下のような何かを行うことができます考えていた：

var options 
{ 
    success: function (responseHtml) // contains the entire form in the response 
    { 
    // extract sub-sections from responseHtml and update accordingly 

    // update <div id="coupon"> with coupon div from responseHtml 
    // update <div id="order-summary> with order summary div from responseHtml 
    } 
} 
$('#my-form').ajaxSubmit(options); // submits the entire form 

ここでの利点は、私は完全なページ・リフレッシュを行うか、更新が必要な領域のすべてを含む部分のビューを作成する必要がないということです。 jQuery ajaxでこれを行う適切な方法はありますか？

Answer 1

アンJames Skidmore's answerより間違いなくクリーナー溶液、考え方は同じであるが：

var $holder = $('<div/>').html(responseHtml); 
$('#coupon').html($('#coupon', $holder).html()); 
$('#order-summary').html($('#order-summary', $holder).html()); 

Answer 2

私が正しく理解している場合、サーバーの応答には、特定の要素を取得し、それに応じて現在のページの各要素を更新するHTMLページが含まれます。

これを行うにはより良い方法があるかもしれませんが、ここには何が考えられます。 ）あなたはアヤックスとレスポンス（として全体のHTMLページを取得することにより、1回のコールでこれを行うことができます

// In your success function shown in your question: 
if ($('#ajaxResponse').length > 0) 
{ 
    $('#ajaxResponse').remove(); // Remove previous AJAX response if it exists 
} 
$('body').append('<div id="ajaxResponse" style="display: none;">'+responseHtml+'</div>'); 
$('.coupon:first').html($('#ajaxResponse .coupon').html()); 
$('.order-summary:first').html($('#ajaxResponse .order-summary').html()); 

Answer 3

、（取得）またはポスト（）メソッドと彫刻：また、クラスに言及したIDを切り替えるようにしてくださいそれを成功のコールバック関数で除外するか、個別に更新したいページの各部分に対して実行したい場合は、jQuery's load() methodを使用できます。

Answer 4

jQuery taconiteプラグインがシナリオのこれらの種類のために作られました。 ajaxレスポンスをインターセプトする透過的なプラグインです。

• から "emptyMsg" 行を削除 "ありがとう" のメッセージ
• と "プロモーション" のdivを交換してください：それはなります

  <taconite> 
      <replace select="#promotion"> 
       <div>Thank you for your order!</div> 
      </replace> 
  
      <remove select="#emptyMsg, .preOrder" /> 
  
      <append select="#cartTable tbody"> 
       <tr><td>1</td><td>Dozen Red Roses</td><td>$18.99</td></tr> 
      </append> 
  
      <replaceContent select="#cartTotal"> 
       $18.99 
      </replaceContent> 
  </taconite> 
  

  ：たとえば、あなたのアプリケーションは、次のXMLをreturens場合ショッピングカートを開き、 "preOrder"クラスの要素を削除する

• 注文数量、明細および金額をショッピングカートに追加する
• "cartTotal"要素を（タコナイトのウェブサイトから取得した例）総新しいショッピングカート