Infinite scroll plugin modify the path with custom query

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));
});

Horny

your customPath is illegal js syntax. you can't have "shoes" inside double-quotes like that. just remove the double-quotes and it should be fine. ('&category=shoes&') i don't think you've given enough information for me to understand. are you saying you want to change the category from "clothes" to "shoes" when the user reaches page 3? Does that mean you want to stay on page 3 of clothing as opposed to page 3 of shoes? what is it exactly that you're trying to do? – Radack

Sorry that was a mistake form my side I removed the quotes.Initially when user sees the page there are a 30 items on the page from different categories. Now there is a button on the page and when the user clicks it the items are filtered and only those of category clothes are shown. Now when the user scrolls down I need to get the next 30 items but i need to modify the path query so I will only get items of category clothes as opposed to getting all the items. – Horny

i don't know enough about infinite-scroll to answer, but here's a question with an answer that might help. #11398148 – Radack

Thanks, I was able to hack the plugin a little to make it do what I wanted. – Horny

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.

Horny