Update jQuery Plugin parameter after each iteration

Question

I am using the jQuery ScrollExtend plugin in order to attempt to add infinite scrolling to a website, the syntax to sue this plugin is as followes:

jQuery('#actualResults').scrollExtend({ 
    'target'          : '#actualResults',     
    'url'             : 'some url', 
    'newElementClass' : 'ajaxArticles'
});

Optionally this plugin can take a callback by adding onSuccess to the options array.

jQuery('#actualResults').scrollExtend({ 
    'target'          : '#actualResults',    
    'url'             : 'some url', 
    'newElementClass' : 'ajaxArticles',
    ‘onSuccess’       : 'some callback'
});

So, with the exception of the URL these settings are as they need to be, but I am having issues setting the URL.

Essentially the URL needs to take the following format:

callSearch.php?scope=web&q=the+query&page=1&offset=51

Getting the information to compose the URL isn’t hard.

var offset = parseInt($(document).getUrlParam("offset"))

if (isNaN(offset)) 
    offset = 51;
else 
    offset += 51;

var query = $(document).getUrlParam("q");
var scope = $(document).getUrlParam(”scope”);

var url = 'callSearch.php?scope=' + scope + '&q=' + query + '&offset=' + offset;

And so, that makes it easy enough to set the initial URL:

jQuery('#actualResults').scrollExtend({ 
    'target'          : '#actualResults',     
    'url'             : url, 
    'newElementClass' : 'ajaxArticles'
});

But this last stage is also the problem, how can I now update that url after each run so that 51 is added onto the offset? For example the initial URL would read:

callSearch.php?scope=web&q=the+query&page=1&offset=51

And the second:

callSearch.php?scope=web&q=the+query&page=1&offset=102

Ad so on. My assumption would be that I need to use the callback to do this? Can anyone help point me in the right direction so that I can get this to work?

Progress

I am now starting to move forward with this issue. I now have the callback function updating the offset and url variables, but the plugin doesn't seem to be picking up the new values for these. My complete JavaScript is now as follows:

jQuery(document).ready(
    function() {

        var offset = parseInt($(document).getUrlParam("offset"))

        if (isNaN(offset)) 
            offset = 51;
        else 
            offset += 51;

        var query = $(document).getUrlParam("q");
        var scope = $(document).getUrlParam("scope");

        var url = 'callSearch.php?scope=' + scope + '&q=' + query + '&offset=' + offset;


        jQuery('#actualResults').scrollExtend({ 
            'target'            : '#actualResults',         
            'url'               : url, 
            'newElementClass'   : 'ajaxArticles',
            'onSuccess'         : function() {
                offset += 51;
                url = 'callSearch.php?scope=' + scope + '&q=' + query + '&offset=' + offset;
                runLog();
            }
        });

        function runLog() {
            console.log(offset);
            console.log(url);
        }
    }
);

So, I guess the question now is how to I get the plugin to see these updated variables?

This stackoverflow thread seems relevant to my current problem, I will review this tomorrow - but for now it's time for me to go home.

Answer 1

If you see the follwing lines in the scrollExtend plugin (line 154)

//
// Set the URL
//                
if ( typeof(settings.url) == 'function' ) {
    url = settings.url.call(this, container);
}
else {
    url = settings.url;
}

It looks like you can pass a function as the url in the settings and the function can return a url.

Ex:

jQuery('#actualResults').scrollExtend({ 
    'target'            : '#actualResults',         
    'url'               : function(container){
        return 'callSearch.php?scope=' + scope + '&q=' + query + '&offset=' + offset;
    }, 
    'newElementClass'   : 'ajaxArticles',
    'onSuccess'         : function() {
        offset += 51;
        url = 'callSearch.php?scope=' + scope + '&q=' + query + '&offset=' + offset;
        runLog();
    }
});

I haven't used the said plugin but this is what I can suggest from what I saw when I went through the plugin's code.

Hope it helps you.