Module pattern, jquery callback issue;

Question

Sorry for the pseudo code, but I can't post the original code here(company policy).

I have two "classes" in javascript, the class CLS2 I use to populate a DIV with HTML which come from the server (Actually it's a table). I am using the method LOAD in jquery for this.

The class CLS1 calls the CLS2 to load the HTML table and after trying to get some infos from the table with jquery method FIND.

I know what is happening. When I try to get these infos inside the table I am not able to do this, because the HTML table is not ready yet.

But if I am using the jquery method WHEN, I guessed, I should be able to do this. But it is not working so far.

If I use the callback on the jquery LOAD method everything works fine, but when I am using WHEN it is not waiting the HTML table to get ready.

Am I forgetting any thing?

I have a return from the jquery LOAD method. Is it possible to check in this return if the content is ready? console.log(retParam);

CLS2:

var cls2 = (function ($) {

    return { 

        load: function() {

            return this.populateDiv();

        },


        populateDiv: function() {

            var ret = $('#content').load('url', function(){

                // IF I USE THE JQUERY METHOD FIND HERE WORKS FINE

            });

            return ret;

        }

    };

}(jQuery));

CLS1:

var cls1 = (function ($) {

    return { 

        init: function(){

            this.config();

        },

        config: function() {

            $.when(cls2.load()).then(this.doPagination());

        },


        doPagination: function(retParam) {

            console.log(retParam);

            var val = $('#datatable').find('.tdActive').val();

        }

    };

}(jQuery));

JQUERY Ready

$(document).ready(){

    cls1.init();

}

You're wrapping both of those in anonymous functions making them execute at load time. Try just assigning var CLS1 = { init: ..., config: ..., doPagination: ... }; var CLS2 = { init: ..., populateDiv: ... } Also, is it possible they're included on the page before jQuery is defined? — Brad Christie
– Brad Christie, Commented Oct 3, 2013 at 20:25

MatteKarla · Accepted Answer · 2013-10-03 20:32:00Z

2

load returns jQuery, not a promise. if you replace .load() with .get() instead, since .get() returns a promise (actually a jqXhr) that you can do .when on.

something like

var ret = $.get( "url", function( data ) {
  $( '#content' ).html( data );
});

return ret;

answered Oct 3, 2013 at 20:32

MatteKarla

2,7471 gold badge20 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Brad Christie Over a year ago

Still executed according to my tests; (Obviously order is arguable since the load callback happens in "another thread".)

user400654 Over a year ago

@BradChristie that's because $.when($()).done(cb) will also still execute the done callback. if you don't make it .get instead you'll just get a jquery object, which does infact have a promise method that returns a promise object that is already resolved unless an animation is currently in progress.

MatteKarla Over a year ago

BradChristie: it executes but not in the correct order, since populateDiv didn't return a promise. populateDiv is called after doPagination, but if you use $.get instead then doPagination isn't called until populateDiv-promise is resolved.

Collectives™ on Stack Overflow

Module pattern, jquery callback issue;

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related