Zend pagination integrating with infinite scroll

1

hi does anyone know how to work with infinite scroll while using zend\paginator?

2

I’m using it in one of my e-commerce stores, but I’ve dropped the paginator when working with infinite scroll. It’s more light-weight - you don’t need neither pages, nor the count of all the items - you just load the next portion till the portion becomes empty and then you stop.

1 Like
3

could you please provide me a clear example to show me how I work with it?

4

Of course. Here’s the snippet of code where I use it (a little bit modified for simplicity):
https://pastebin.com/RMiWJwsk

As you scroll more and more, you increase the ?portions=X in your URL address with the Javascript’s History API and you make AJAX requests that will pass the ?portion=Y where Y is the next portion to be loaded.

Changing the URL address guarantees you that when the user refreshes the page, he/she will see as many items as there were when he/she stopped scrolling.

1 Like
5

I hope it will work tnx.

6

You’re welcome. If you have any further questions, I will be glad to help you.

1 Like
7

hi again, I’m actually trying to make an Ajax call to the server but could not do it!!! I’ve tried using scroll event but since there is problem base on Scroll-linked effects the Ajax didn’t work here is the code:

 window.addEventListener("scroll",myFunction);
 function myFunction() {
 var scrollArea = document.getElementsByClassName('white-wrapper');
 var sHeight = scrollArea[0].clientHeight;
 var pageCounter = 1;
 function increasePage(){
 pageCounter++;
 }
 if(window.innerHeight + window.scrollY >= sHeight ) {
 increasePage();
 history.replaceState({page : pageCounter}, "pageNumber",("/portfolio/page-" + pageCounter));
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200) {
 alert(this.responseText);
 document.body.className = "";
 }
 };
 xmlHttp.open("POST", "http://msadd.local/ajax", true);
 xmlHttp.setRequestHeader("content-type",'text/plain');
 document.body.className = "loading";
 xmlHttp.send("state = history.state");

 }
 }

how is it possible to make a simple ajax call in zf3???
I know I have to use zend-json and zend-view but is there any clean sample as a guidance!?!?!?!
besides how have you used scroll event?

8

You don’t need zend-view. All you need to do is send an XMLHttpRequest to an API endpoint or in this case a zend-mvc controller action. That action sends a json response back with the requested data. What that data looks like that’s up to you.

Some question that might help you:

  • What part doesn’t work?
  • You can’t send an Ajax request?
  • You don’t get a json response back?
  • Does the Ajax request work without the infinite scroll?
  • Why do you send a POST request and not a GET request? You are getting data from your endpoint, not pushing new data.
  • You only handle requests with status 200. I would add exception handling and non 200 status responses, at least for development and logging.
1 Like