Question

I am using the infinite scroll plugin (infinite-scroll) with jQuery isotope and was wondering if it’s possible to modify the path with custom query parameters as user scrolls down the page to view more items.

Is there a way to access the path and modify one of the query parameter.
It’s hitting the path ok for the first time returning the first set of items and after that it hitting the next pages , 1,2 3 ok but using the same query parameters I used for the first time only updating the page number.

I would like to modify one of the parameter when hitting page 3 or 4 with something like this:

var customPath = path + "?type=items&category=clothes&pageNumber=";

Am I approaching this the wrong way?

Here is my code:

$container.infinitescroll({
    navSelector: '#page_nav', // selector for the paged navigation 
    nextSelector: '#page_nav a', // selector for the NEXT link (to page 2)
    itemSelector: '.element', // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more categories to load.',
        msgText: "<em>Loading the next set of categories...</em>",
        img: 'http://i.imgur.com/qkKy8.gif'
    },
    pathParse: function (path, nextPage) {
        var customPath = path + "?type=items&category=all&pageNumber=";
        path = [customPath, '#contaner'];
        return path;
    }
},
// call Isotope as a callback
function (newElements) {
    $container.isotope('appended', $(newElements));
});

Answer 1

Ok so I had to do a little hack but I got it working for my needs thanks to Rich for pointing me to the related question.

I added some additional properties to the jquery.infinitescroll.js prototype here:

//line 67
 $.infinitescroll.prototype = {
       //My custom parameters
        pageType: "&type=items",
        categoryParam: "&category=shoes",
        /*  
            ----------------------------
            Private methods
            ----------------------------
            */

Then inside the function called:

retrieve: function infscr_retrieve(pageNum) {}

there is a variable:

desturl = path.join(opts.state.currPage)

Changed it to

desturl = path.join(opts.state.currPage + $.infinitescroll.prototype.pageType + $.infinitescroll.prototype.categoryParam);

This will add your additional query parameters at the end of the desturl.

Then from you page where you have you JavaScript you can do something like this:

$('#filters a').click(function () {
    $.infinitescroll.prototype.pageType = "&type=products" ;                  
    $.infinitescroll.prototype.pageType = "&category=clothes";                           
     return false;
});

This will update the query parameters of the next page with you custom queries.

Hope this will help someone.