Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

jQuery InfinteScroll and Laravel 3 incrementing category

I am using Laravel 3 and the infintescroll plugin by Paul Irish. I think I have it setup correctly and it works on most pages where it is needed. However on a couple of pages it seems to increase the category id that is in the url and brings in new products. For example:

the URL is site/products/category/2 upon scrolling it should go to site/products/category/2/page/2 and it should stop there, however it goes to site/products/category/3/page/2 then to site/products/category/4/page/2

As you can see it stays on page 2 but increments the category ID.

On another page it keeps incrementing the page number past where the results are.

User Gravatar

montekrysto

Posted Oct 11 2013 15:25 UTC

$25


  • Assigned To guyisra
  • Solved
  • jquery
    php
    infinitescroll
  • 2133 Views

7 Replies


Hey montekrysto,

Any chance you could provide a URL to your site?

User Gravatar

CodersClan

Posted Oct 11 2013 15:27 UTC

You can see the problem here http://198.61.173.209/products/category/2

Thank you.

User Gravatar

montekrysto

Posted Oct 11 2013 16:46 UTC

The reason this is happening is that inifinite scroll is looking automatically out of the box for path that resembles a url and then a page number

In this case, it finds http://198.61.173.209/products/category/2

This happens only on category 2 since on the first occurrence of infinite scroll it is looking for page 2

You can see that on other categories it is not happening since its not 'page 2' but categories 3,4, etc

To solve this quickly as possible, I would recommend to change the url to category/2?page=2, which will be more recognizeable by inifinite scroll

If it is not doable, you need to change the pathParse to something like

pathParse : function p(path, nextPage){                                   
             var re = new RegExp('^(.*page/)/d');
             console.log(path);   
             path = path.match(re).slice(1);                                       
             return path;
                }

I don't have much time at the moment, and this gives an error, but basically this will return a path of http://198.61.173.209/products/category/2/page/ which should tell infinite scroll what path to use instead of the automatically reg-ex based path

User Gravatar

guyisra

Posted Oct 12 2013 0:17 UTC

Ok, there seems to be a problem with the infinite scroll you included..

It seems you included an old version that was included in masonry/isotope plugin

in the old version

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

which means path can't use functions. On the version thats on github https://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js the line is

desturl = (typeof path === 'function') ? path(opts.state.currPage) : path.join(opts.state.currPage);

so that handles the case of a function in path option

then use a path that looks like what you have now, but with a fix to make it absoulte url and not relative

 path: function generatePageUrl(currentPageNumber){
                        return document.URL + "/page/" + currentPageNumber ;

                    }

which will return the correct path

you can test to see that it gets solved with the current infinitescroll.js you included by settings path to be an array and not a function by doing

path: ["/products/category/2/page/", ""]

which you will takes the correct page number

so basically - update the infinitescroll.js you included and make sure the function returns the path correctly if the input is the page number. That will solve your problem in all of the categories. Let me know if you need more help with this question (after you did the above)

User Gravatar

guyisra

Posted Oct 12 2013 2:02 UTC

Guyisra -

Thank you very much, that solved that problem!

I now have a new problem, or maybe it existed before and I didn't notice it. If you go to http://198.61.173.209/products/category/3 you will see at the top that there are 28 products returned for this query and that there should only be 4 pages - 3 pages of 9 and 1 page of 1 ( i left the pagination at top so you can see). You will notice that as you keep scrolling you will get more items than there are returned from the query! So the last page should be http://198.61.173.209/products/category/3/page/4 but it will keep incrementing the page number beyond what we have and go to http://198.61.173.209/products/category/3/page/6. I don't know where these other items are coming from, if I take off the infinitescroll and leave the pagination it works as it should.

Thank you again for helping Guyisra, I appreciate it!

User Gravatar

montekrysto

Posted Oct 12 2013 4:45 UTC

Yes I see that.. I believe the solution here is to manage that scenario in the server side

When the page is too big and no more items, it should return no results. In this case, there are duplicate items

I suggest to check your server code how you handle it once the page is too big

User Gravatar

guyisra

Posted Oct 12 2013 5:06 UTC

Solution

This didn't solve your task? Get your own custom solution.

Guyisra,

Thank you again for your help!

User Gravatar

montekrysto

Posted Oct 12 2013 14:14 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions