Search code examples
javascriptjquerymethodschaining

Chain jQ methods


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.


Solution

  • 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.