Question

i have a screen with multiple little widgets (all with different divs around them). i have one form and when i post (using jquery) right now it updates the single form using ajax.

i want two other divs to refresh as well (that are outside the form). What is the best way to trigger a refresh of multiple different divs on a single jquery ajax post callback?

Answer 1

Way 1. Have your post action partial view to contain hidden data that you will use to update other divs. I think that’s much better than returning special JSON or scripts code. You can probably use .detach() instead of .clone().

<div>Main post result data</div>
<div id="additional1" style="display:none">Moredata</div>

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#additional_div").html($("#result #additional1").clone().show());
}

Way 2. On form post success do additional $.get()s to update additional divs. Works better if additional data is big; if it’s small then #1 is better.

function onFormPostSuccess(data) {
   $("#result").html(data);
   $("#addiotional_div").load("/additional_action/updated_info");
}