Make jQuery Wait for $ .post to complete refresh page
I am calling a function to update part of the current page using jQuery.post, and then after this function completes, I need to execute another function that updates the google map on that page using the updated HTML I wrote out with $ .post
I can't nest the functions because DoGoogleMap () won't work within the RefreshSubdivisionList () function.
How do I wait for $ .post to finish writing the updated HTML to the page before it calls the DoGoogleMap () function?
function RefreshSubdivisionList() {
var formActionScript = jQuery("#RefreshSubdivisionForm").attr('action');
jQuery.post(formActionScript, jQuery("#RefreshSubdivisionForm").serialize()).done(function(data) {
jQuery(".subdivision-list").html(data).show();
}, 'text');
return true;
}
jQuery("#RefreshSubdivisionForm").submit(function(event) {
event.preventDefault();
jQuery.when( RefreshSubdivisionList() ).done(function(){
jQuery('#map_canvas').gmap('destroy');
DoGoogleMap();
});
return false;
});
source to share
jQuery.when () provides mechanisms for handling the multiple async synchronization case. Take a look:
function ajax1 {
return $.ajax("/page1/action", {});
}
function ajax2 {
return $.ajax("/page2/action", {});
}
var promise = $.when(ajax1, ajax2);
promise.done(function (resp1, resp2) {
// The parameters resp1 and resp2 are the responses
// of their respective ajax1 and ajax2 calls.
// Each parameter is an array that contains the ajax response
// with the following signature:
// [data, statusText, jqXHR]
// See: http://api.jquery.com/jquery.ajax/#jqXHR
// suppose the data response for ajax1 is: "Hello"
// suppose the data response for ajax2 is: "world"
var data = resp1[0] + " " + resp2[0];
if ((/hello\sworld/i).test(data)) {
console.info("Promises rules!");
}
});
In the previous example, we handle success responses , but we can also handle fail responses .
The jqXHR object returned by jQuery.ajax () implements the Promise interface , providing all of the properties, methods, and behavior of a Promise (see Deferred Object for more information)
Another way is to create deferred objects and resolve each deferred object with the expected result and finally concatenate the allowed responses:
var d1 = $.Deferred();
var d2 = $.Deferred();
$.when(d1, d2).done(function (resp1, resp2) {
console.log(resp1); // "Fish"
console.log(resp2); // "Pizza"
});
d1.resolve("Fish");
d2.resolve("Pizza");
source to share
To make this work, it looks like all you have to do is return the jqXHR object from the method RefreshSubdivisionList
.
jQuery provides XHR queries, such as an post
interface deffered
that uses a method when
to determine the state of a request. If it happened or failed, etc.
function RefreshSubdivisionList() {
var formActionScript = jQuery("#RefreshSubdivisionForm").attr('action');
var postObj = jQuery.post(formActionScript, jQuery("#RefreshSubdivisionForm").serialize());
postObj.done(function(data) {
jQuery(".subdivision-list").html(data).show();
}, 'text');
return postObj;
}
jQuery("#RefreshSubdivisionForm").submit(function(event) {
event.preventDefault();
jQuery.when( RefreshSubdivisionList() ).done(function(){
jQuery('#map_canvas').gmap('destroy');
DoGoogleMap();
});
return false;
});
source to share