Update multiple div's from jQuery ajax response html

Question

I have a page in a asp.net mvc shopping cart which allows you to enter a coupon and shows an order summary along with other page content. I would like to have an Update button which will validate the coupon code, report any errors and also update the order summary on the page via jQuery ajax.

I know I could do this by making a form and partial view and use the target property in the jQuery submit. However, was thinking 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 wouldn't have to do a full page refresh or create a partial view containing all of the areas that need updating. Is there an appropriate way to do this via jQuery ajax?

Answer 1

If I understand you correctly, the server response will include an HTML page which you want to pull specific elements from and update the current page's respective elements accordingly.

There may be better ways of doing this, but here is what comes to mind. Also be sure to switch the IDs mentioned to classes:

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

You could do this in one call by getting a whole html page as a response with the ajax(), get() or post() methods and carving up parts of it to dole out in the success callback function, or if you wanted to do it for each piece of the page you wanted to update separately you could use jQuery's load() method.

Answer 3

An arguably cleaner solution than James Skidmore's answer, although the idea is the same:

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

Answer 4

The jQuery taconite plugin was made for these kinds of scenarios. It is a transparent plugin that intercepts ajax responses. For example, if your application returens the following 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>

It will:

• Replace the "promotion" div with a "Thank you" message
• Remove the "emptyMsg" row from the shopping cart and remove any elements with the class "preOrder"
• Add a row to the shopping cart with the quantity, descption and amount of the order
• Update the "cartTotal" element with the new shopping cart total

(example taken from the Taconite website)