Using jQuery's load in successive functions

Question

I am trying to populate different cells in a table, named as #RECALRow1, #RECALCol1, #RECALBodySum. Each is populated from a database. I am using AJAX and, specifically, jQuery's load.

Originally I used a number of functions - see version 1 below - which worked (the code in these functions in effectively in version 2). This worked.

I belatedly realised how similar the code in these functions was. Version 2 shows the code without functions, illustrating the similarity. This worked too. (valTable is defined earlier - the definition is not shown below).

It then seemed "obvious" that I should write a generic function which just takes two parameters. Making three calls to this function, with different parameters, should surely work(!) In fact only the third function seems to have been called; the first two do not even succeed in generating a console message.

I wondered if I am missing something on callbacks - and I read How do I return the response from an asynchronous call? - but I cannot see that I need them. Perhaps I am about to learn something very basic on practical AJAX.

Version 1

Individual functions, each of which uses jQuery load. THIS WORKS. [Aside - ASP sets the default selected value]

UpdateCol1Possibilities(); // sets content for #RECALCol1
UpdateRow1Possibilities();
UpdateBodySumPossibilities();

Version 2

Direct call to jQuery load, without encapsulation. THIS WORKS. [Aside - we need to tweak the default selected value]

$('#RECALRow1').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALRow1'
}); // close load

$('#RECALCol1').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALCol1'
}); // close load                   

$('#RECALBodySum').load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data - no need for callback
    "RECALtable":valTable,
    "RECALCol1Row1Id":'RECALBodySum'
}); // close load                   

Version 3

Generic function, which uses jQuery load. THIS DOESN'T WORK.

var RealSelect = _.debounce(function(IdToChange) { 
console.log('Calling RealSelect changing Id: ' + IdToChange);
$('#' + IdToChange).load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data
        "RECALtable":$('#RECALtable').children().val(),
        "RECALCol1Row1Id":IdToChange
    }
    , // callback
    function() { // callback function - success
        //  alert('successful callback!');
    } // close callback function, close load
    ) // close load
}
,50); // end RealSelect function

RealSelect('RECALCol1'); // sets content for #RECALCol1
RealSelect('RECALRow1');                
RealSelect('RECALBodySum');
//  Only #RECALBodySum is populated
}               

Answer 1

I'm not sure why you felt you should use _.debounce, but that is precisely your problem, as far as I can see.

Remove the debounce wrapper in your function declaration and all should work:

var RealSelect = function(IdToChange) { 
console.log('Calling RealSelect changing Id: ' + IdToChange);
$('#' + IdToChange).load(
    "/_RECAL/AJAX/AJAXSetGroupbyList.asp", // URL
    { // data
        "RECALtable":$('#RECALtable').children().val(),
        "RECALCol1Row1Id":IdToChange
    }
    , // callback
    function() { // callback function - success
        //  alert('successful callback!');
    } // close callback function, close load
    ) // close load
}; // end RealSelect function

Debounce means precisely that your function will NOT be called until a certain amount of time has passed where no new calls were made.

This is the expected behaviour, for example, of an autocomplete widget. You don't want to process every keystroke the user does immediately. Instead, you wait for the user to stop typing for, say, 500 millis, and then start fetching the data from the server.

In your case, you are creating a debounced function and then calling it three times in a row. Debounce is working as expected - only the last call runs, and only after 50 millis.

From the underscorejs docs:

debounce_.debounce(function, wait, [immediate])

Creates and returns a new debounced version of the passed function which will postpone its execution until after wait milliseconds have elapsed since the last time it was invoked. Useful for implementing behavior that should only happen after the input has stopped arriving. For example: rendering a preview of a Markdown comment, recalculating a layout after the window has stopped being resized, and so on.

Pass true for the immediate parameter to cause debounce to trigger the function on the leading instead of the trailing edge of the wait interval. Useful in circumstances like preventing accidental double-clicks on a "submit" button from firing a second time.

var lazyLayout = _.debounce(calculateLayout, 300); $(window).resize(lazyLayout);