Updating multiple divs from jQuery ajax response html

Question

I have a page in my asp.net mvc shopping cart that allows you to enter a coupon and display an order summary along with other page contents. I would like to have a Refresh button that will check the coupon code, report any errors, and also update the summary of orders on the page through jQuery ajax.

I know that I can do this by creating a form and a partial view and using the target property in the jQuery view. However, I thought I could do something like the following:

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

The advantage here is that I would not need to completely refresh the page or create a partial view containing all the areas that need updating. Is there a way to do this using jQuery ajax?

Answer 1

, , , :

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

Answer 2

jQuery taconite . , ajax. , XML:

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

:

• div "promotion" ""
• "emptyMsg" "preOrder"
• , .
• "cartTotal"

(, - Taconite)

Answer 3

, HTML-, .

, . , :

// 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 4

, html- ajax(), get() post() , , , , jQuery load().