Skip to main content

Infinite scroll using laravel pagination and jquery


infinite scroll with laravel pagination and jquery
infinite scroll with laravel pagination and jquery

Loading the content dynamically at the end of the page when user reaches the end of the page.


It is quite easy to implement. So exactly what we want to do is
  • When page loads we want to show some posts.
  • When user scrolls we want to load more posts and append it at the end.
Upper to line gives hint what we want to do,
  • show list of some post at  on page loading,
  • when user scrolls fetch other posts via ajax and append it to the list of current post list. 

First Implement the code for the Controller

In this function when request is simple get request it returns view with 9 latest posts. When it gets an ajax request instead of returning view it returns the compiled html of post and url for the next page in laravel pagination as the json array.

When data comes as json array we have to append that rendered output in the view file. So view file will be like this.

Initially setting the next-page-url attribute of the div with id posts as the url of the next-page-url that is created by the normal laravel pagination variable.
(So if  you go on that next-page-url you will get the content of the second page.)


What exactly script does is
  • it watches for the scroll of the window. (I fail to put it on the div so i put it over window. if you find way just share it with me.)
  • It clears the time out set by previous set time out function.  We have to use time out to get delay between to acceptable scrolls. (If we don't set time out then script will fire an request on each scroll).
  • By using time out of 2000 ms we can ensure that next request from the same user will have at least delay of 2000 ms from last request and it is essential in real world project .

On first requet we will get  the page_url from the attribute of the div with id posts. After then script will set the next_page_url from the response it get.
( we check if page is not 'null'. It is laravel response. if  we reach the last page or asking for the page that does not exits laravel response will be null.)

If page is not null then we will go for the request, and append the content ( that is given by the "view" attribute of our response object [data.view] ) to the  div#posts. and changing the page url to the new page url (that we get in the response as url attribute of the response object.[data.url] )

Hope you get it useful for your next project
Labels:

Comments

Post a Comment

Popular posts from this blog

Apache : setup basic auth with apache in windows

Authentication is any process by which you verify that someone is who they claim they are. Authorization is any process by which someone is allowed to be where they want to go or to have information that they want to have. I will show here how to set up basic auth on the apache with windows. Pre-requests  Windows VPS Apache server ( That's it ) ( In windows it might be difficult to setup the Apache alone. So instead use something ling xampp , wamp or laragon .) RestClient (  I personally use the postman , but you can use your preferable client)  Windows VPS provider Steps  Enable the necessary modules in the Apache Create the password file Set the auth directives in the virtual host file. Verify basic auth. Enable the  necessary   modules  in the Apache Open the httpd.conf file in the apache's conf folder. httpd.conf file Enable the necessary modules to make the basic auth workin...
31 comments
Read more

Google blogger Ideas panel

Google blogger Ideas  I opened by blogger today, and..   I got this.  Google blogger Ideas  A panel suggesting a topic on which I can write my next blog. It's fetching unanswered question from web according to your previous post and topics. It was something, I was really looking for, after all it takes time to finding subject on which to write next and still being in the same niche.  Awesome feature Blogger! 
4 comments
Read more

Sciter : GUI Application with Golang using HTML/CSS

GUI library for golang sciter This is the words from Sciter's Web site, Sciter brings a stack of web technologies to desktop UI development. Web designers and developers can reuse their experience and expertise in creating modern looking desktop applications. Various GUI frameworks offer different UI declaration and styling languages, such as QML and  XAML (Microsoft WPF) . On the contrary, Sciter allows using time proven, robust, and flexible HTML and CSS for GUI definition and GPU accelerated rendering.   Before using sciter I already tried other alternatives but none of them was satisfactory as an example first i tried andlabs / ui  library   i already have written a post on it. You can read it on post gui programming with golang .  But this library is still under construction and has no support for production apps. Secondly, I go for electron but the problem was my simple calc like the app was of size 150mb....
9 comments
Read more