I am calling a function to refresh a part of the current page with a jQuery.post - and then after that function completes I need to execute another function that updates the Google Map on that page, using the updated HTML written out from the $.post
I cannot nest the functions because DoGoogleMap() won't work within the scope of the RefreshSubdivisionList() function.
How do I make it wait for the $.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;
});
To make this work it looks like all you need to do is return the jqXHR object from the
RefreshSubdivisionList
method.jQuery gives XHR requests like
post
thedeffered
interface which is what thewhen
method uses to determine the state of the request. If it's done or failed, etc.