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?

Community · Accepted Answer · 2017-05-23 12:12:06Z

8

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());

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Jun 8, 2009 at 4:54

Paolo Bergantino

490k83 gold badges524 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Philippe Leybaert · Accepted Answer · 2009-06-08 07:25:32Z

3

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)

answered Jun 8, 2009 at 7:25

Philippe Leybaert

172k33 gold badges213 silver badges224 bronze badges

2 Comments

Todd Smith Over a year ago

Doesn't this require a specially formatted XML response from the server? I was hoping to reuse the preexisting action handler for my page. And to avoid the entire page refresh I only wanted to update the areas that changed. This is similar to what the UpdatePanel in asp.net does.

Philippe Leybaert Over a year ago

Yes it does, but it is extremely powerful. Especially for complex UI updates it's a life-saver

James Skidmore · Accepted Answer · 2009-06-08 04:18:22Z

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());

answered Jun 8, 2009 at 4:18

James Skidmore

50.4k33 gold badges112 silver badges137 bronze badges

Comments

Gabriel Hurley · Accepted Answer · 2009-06-08 04:48:22Z

0

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.

answered Jun 8, 2009 at 4:48

Gabriel Hurley

40.1k14 gold badges64 silver badges89 bronze badges

Collectives™ on Stack Overflow

Update multiple div's from jQuery ajax response html

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related