CODEWITHSUNDEEP
jqueryeventsasynchronousjquery-load
euther
euther

Reputation: 2686

jquery event fired when all the jquery.loads are completed?

I have the following code:

$(function () {
    $("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
        DoSomething1();
    });
    $("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
        DoSomething2();
    });
    $("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
        DoSomething3();
    });
    $("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
        DoSomething4();
    });
    CodeIWishToExecuteAfterAllLoads();
});

As you know jquery load is asynchronous! so function "CodeIWishToExecuteAfterAllLoads()" will be executed before all the load events are completed.

I need an event or some way to get "CodeIWishToExecuteAfterAllLoads()" executed after all the loads are completed

Have anyone have an idea on how to acomplished that?

Thank you.

Upvotes: 0

Views: 106

Answers (3)

Alytrem
Alytrem

Reputation: 2620

You can do this:

var loaded = 0;
var expected = 4;
var record_load = function(){
    loaded++;
    if(loaded == expected)
        CodeIWishToExecuteAfterAllLoads();
}

$("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
    DoSomething1();
    record_load();
});
$("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
    DoSomething2();
    record_load();
});
$("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
    DoSomething3();
    record_load();
});
$("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
    DoSomething4();
    record_load();
});

Upvotes: 3

Brandan
Brandan

Reputation: 14983

Here's something I did with jQuery's Deferred.

I needed to load the data for a few different charts, and once all of the individual chart data was loaded, I wanted to aggregate the data and chart that.

Utils = {
  createCharts: function (){
    Utils.initializeCharts();
    Utils.createUserCharts();
  },

  initializeCharts: function (){
    Utils.deferred = $.Deferred().done(function (){
      Utils.createAggregateCharts();
    });

    Utils.remainingCharts = $(".user").size();
  },

  decrementRemainingCharts: function (){
    --Utils.remainingCharts;
    if (Utils.remainingCharts == 0){
      Utils.deferred.resolve();
    }
  },

  createUserCharts: function (){
    $(".user").each(function (i, user){

      // ...

      $.get(href, function (response){
        Utils.chart(chart_id, response);
        Utils.decrementRemainingCharts();
      });
    });
  },

  chart: function (){
    // ...
  },

  createAggregateCharts: function (){
    // ...
  }
};

Basically, you create the Deferred object with a function to call when it's "resolved". Then, based on some external condition, you decide when to call Deferred.resolve. It's very elegant.

Upvotes: 0

tmjam
tmjam

Reputation: 1039

$(function () {
    $("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
        DoSomething1();
         $("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
            DoSomething2();
            $("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
                DoSomething3();
                $("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
                    DoSomething4();
                    CodeIWishToExecuteAfterAllLoads();
                });
            });
         });
    });

});

This should work all inorder. If not the you can use setTimeout() method to provide a manual delay for some milliseconds and execute your CodeIWishToExecuteAfterAllLoads();

Hopt this is what you are looking for.

Upvotes: 0

Related Questions