jQuery Deferred object, calling functions in sequence

Question

I'm confused about how to use jQuery's Deferred object, and the examples I've seen aren't helping me. What I want to do is 1.) get a calendar object via an ajax call, 2.) populate part of my global object (MYOBJ) with the calendar data, and then 3.) populate a page element with the new data in MYOBJ. These three functions implement the logic, and I want to call them in sequence:

function getCalendar(refDate, numDays) {
    return $.ajax({
        type: "POST",
        url: "services/Calendar.asmx/GetCalendar",
        data: '{ "refDate": "' + refDate + '", "numDays": "' + numDays + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).promise();
}


function loadCalendarData(response) {
    var calData = jQuery.parseJSON(response.d);
    MYOBJ.cal.dMin = calData.dMin;
    MYOBJ.cal.dMax = calData.dMax;
    MYOBJ.cal.dates = calData.dates; // array of date strings
}


function populateCalendar (x, y, z) {
    // use data from MYOBJ.cal here
}

I can't figure out how to make populateCalendar() wait until loadCalendarData() is done, though. This...

$.when(getCalendar(myDate, 70))
 .then(loadCalendarData)
 .then(populateCalendar(a, b, c))
 .fail(alertCalendarError);

...is obviously incorrect--it's just one variation I've thrown against the wall because I don't understand what I'm doing... :)

UPDATE: As GoldenNewby and Brian ONeil correctly point out, I could just stick my call to populateCalendar at the end of loadCalendarData. That will definitely work. I wish I had thought of that as I was posting. I guess my ultimate objective was to figure out how to achieve the sequencing. In this case, though, I can't think of any scenario where loadCalendarData would be called without a call to populateCalendar directly after it, so this solution definitely makes sense. Thanks.

Can you not just call populateCalendar as the last line of loadCalendarData? — GoldenNewby
– GoldenNewby, Commented Feb 20, 2012 at 21:57
That would definitely work, thank you. I'm sorry, though, I forgot to mention that I'm trying to keep those functions as independent of each other as possible. The example I gave is from page load, but conceivably either function could be called after that as well. Mainly I am trying to wrap my head around deferreds, and this was an example of something I couldn't figure out how to do. — Fred Mars
– Fred Mars, Commented Feb 20, 2012 at 22:08

ShankarSangoli · Accepted Answer · 2012-02-20 22:07:36Z

3

You are actually executing populateCalendar(a, b, c). You have to pass the function reference. Try this.

$.when(getCalendar(myDate, 70))
 .then(loadCalendarData)
 .then(function(){
     populateCalendar(a, b, c)
  })
 .fail(alertCalendarError);

answered Feb 20, 2012 at 22:07

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

2 Comments

Fred Mars Over a year ago

Thanks, I'm not sure I understand this, though. What is the difference between passing the function directly and executing it within the anon function?

ShankarSangoli Over a year ago

When you call the function it executes and the return value of it will be used as callback, where as when you pass the function reference it will be used as a callback function and will be executed at a later stage.

Brian ONeil · Accepted Answer · 2012-02-20 22:06:28Z

It seems like the only method that needs to be called in a deferred manner is loadCalendarData.

I would call loadCalendarData from the success callback of the .ajax call you are making and then you can just call populateCalendar at the end of loadCalendarData (as already mentioned in the comments).

it would look something like this...

function getCalendar(refDate, numDays) {
    return $.ajax({
        type: "POST",
        url: "services/Calendar.asmx/GetCalendar",
        data: '{ "refDate": "' + refDate + '", "numDays": "' + numDays + '" }',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: loadCalendarData
    });
}


function loadCalendarData(response) {
    var calData = jQuery.parseJSON(response.d);
    MYOBJ.cal.dMin = calData.dMin;
    MYOBJ.cal.dMax = calData.dMax;
    MYOBJ.cal.dates = calData.dates; // array of date strings

    populateCalendar(a, b, c); //not called until MYOBJ is setup
}


function populateCalendar (x, y, z) {
    // use data from MYOBJ.cal here
}

Collectives™ on Stack Overflow

jQuery Deferred object, calling functions in sequence

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related