If I understand jQuery chaining correctly the first method in the list executes and must complete before the next method executes. As such I have the following
$.fn.reportZebraStriper = function(options) {
console.log('reportZebraStriper()');
return true;
}
//onDom ready events
$(document).ready(function(){
$("#oom_display_options select")
.on("change", function(event){
$('#OOM_vs_Logged').loadUrl(//ajax method call in the global site.js file//);})
.reportZebraStriper();
})
On initial page load everything executes as expected and my console gets the printout from $.fn.reportZebraStriper(). My issue arises when I make a change in the "oom_display_options" drop down the ajax is fired, the content DIV is reloaded, but the reportZebraStriper() does not fire afterwords.
What am I doing wrong here?
Edit 1: Where the loadURL() method definition. It's really just a wrapper for jQ's built in .ajax() method; it does some animation displaying while ajax is executing, etc.
$.fn.loadUrl = function(url, dataAjax) {
var target = this;
target.addBlockLoadingDiv();
return $.ajax({
type: "POST",
url: url,
data: dataAjax,
success: function(data) {
if (data) {
target.html(data);
} else {
target.text("Unable to display requested data, sorry.");
}
},
error: function(err) {
target.html(err.response);
}
});
};
jQ's load() method appears to call execute the callback method immediately (unless Im doing it wrong); this unfort. is the what we need.
Edit 2: Made a ajax call specific for this logi, when the ajax call's 'complete:' is fired It calls the $().reportZebraStriper() method. Not the resolution I was looking for but it worked.
Turns out JS promise objects is what I wanted. I wait for a promise.success call then run the desired jQ logic that needed to wait for ajax to complete.