CODEWITHSUNDEEP
jquery
Carlos Blanco
Carlos Blanco

Reputation: 8772

Pass an additional counter as parameter to a callback

I have a $("").load call to get data and dump it into several divs. Each div has a unique ID that I track with an index variable inside a For loop. I do several ajax calls inside this loop. In the call back function I want to use the value of this index again. However by the time the callback executes, the for loop is already finished the index variable always has the top limit value for the loop.

How can I pass the value to this index to the callback function?

EDIT:

for (var i=1;i<=daysNum;i++)
{


    var tomorrow = new Date();
    tomorrow.setDate(tomorrow.getDate() + i); 


    var tmd=(tomorrow.getMonth()+1)+'/'+(tomorrow.getDate())+'/'+tomorrow.getFullYear();
    var tmdurl=(tomorrow.getMonth()+1)+'%2F'+(tomorrow.getDate())+'%2F'+tomorrow.getFullYear();

    $("#events").append("<div><div id='event"+i+"'></div><div id='date"+i+"'>"+tmd+"</div></div>");
    $("#event"+i).load(seicalendarurl+"/calendar.aspx?CalendarDate="+tmdurl+"&CalendarPeriod=Day .ms-cal-tdayitem, .ms-cal-alldayevent"

        ,  function (data){
             if($("event"+i).html()=="")
                $("date"+i).html("");

           }
    );

}

Upvotes: 0

Views: 653

Answers (5)

Felix Kling
Felix Kling

Reputation: 816910

You can wrap the entier loop body (or only the Ajax part) into an immediate function and pass the index as parameter:

for(var i=1;i<=daysNum;i++) {
    // other stuff
    (function(index) {
        $("#event"+index).load('...', function (){
            if($("#event"+index).html() === "") // you need `#` here too!
                $("#date"+index).empty();       // you need `#` here too!
        });
    }(i));
}

But you don't necessarily need the index. You can access the #eventX element inside the callback with this and the #dateX element is the next sibling. So you can simply do

for(var i=1;i<=daysNum;i++) {
    // other stuff
    $("#event"+index).load('...', function (){
        if($(this).html() === "") {
            $(this).next().empty();
        } 
    });
}

which is much more readable imo.

Upvotes: 5

James Kyburz
James Kyburz

Reputation: 14493

for(var i=0; i<x; i++){
  Ajax(...,function(i) {
    // in callback !
    return function(data) {
      //Work with i:)
    };
  }(i));

Upvotes: 1

Chandu
Chandu

Reputation: 82933

I think the issue is with the load callback function.

You are not missing the "#" before the event and date element selectors.

Try this version for the load callback:

function (data){            
    if($("#event"+i).html()=="")               
        $("#date"+i).html("");           
}

Upvotes: 1

CamelCamelCamel
CamelCamelCamel

Reputation: 5200

You can pass the div unique index as either the div ID, the div's.data() or even in the metadata plugin. Another option is using closures.

Upvotes: 0

Headshota
Headshota

Reputation: 21439

I couldn't find any better way, but you can send index with ajax request with data parameter and then return it with the response in your callback.

Upvotes: 0

Related Questions