{"id":3030,"date":"2023-11-12T21:31:22","date_gmt":"2023-11-13T02:31:22","guid":{"rendered":"https:\/\/xlinesoft.com\/blog\/?p=3030"},"modified":"2023-11-12T21:58:27","modified_gmt":"2023-11-13T02:58:27","slug":"infinite-scroll","status":"publish","type":"post","link":"https:\/\/xlinesoft.com\/blog\/2023\/11\/12\/infinite-scroll\/","title":{"rendered":"Infinite scroll"},"content":{"rendered":"<p>Infinite scroll is a useful technique that allows to load new content automatically, when the user\u00a0 scrolls down and reaches the end of the page. This is the kind of feature that our customers asked us about for a fairly long time. Turns out, it is not that difficult to implement with the help of some custom coding.<\/p>\n<ol>\n<li>Enable &#8216;AJAX search, pagination, sorting&#8217; option on Pages -&gt; List page settings dialogue.<\/li>\n<li>Add the following code to List page: Javascript OnLoad event of the page where you need to implement infinite scrolling.<\/li>\n<\/ol>\n<div class=\"my-syntax-highlighter\">\n<pre><textarea id=\"mshighlighter\" class=\"mshighlighter\" language=\"javascript\" name=\"mshighlighter\" >window.pagecount = 1;\r\n\r\n\/\/ adding load indicator under the grid\r\n$(\"[data-location='grid']\").after(\"&lt;span class='end_message' style='visibility:hidden;font-weight:bold;margin-bottom:20px;display: block;text-align: center;'&gt;End&lt;\/span&gt;\");\r\n$(\"[data-location='grid']\").after(\"&lt;div class='load_img' style='visibility:hidden;text-align:center;margin-bottom:10px;'&gt;&lt;span style='font-weight:bold;margin-bottom:5px;clear:both;display:block;'&gt;Loading&lt;\/span&gt;&lt;img src='images\/indicator.gif' style='width:30px;height:30px;'&gt;&lt;\/div&gt;\");\r\n\r\n\/\/ scroll event handler\r\n$(window).on(\"scroll\", function() {\r\n\/\/ end of the document and we have more data\r\nif ($(this).scrollTop() + 5 &gt; $(document).height() - $(this).height()) {\r\nwindow.pagecount++;\r\n\r\n\/\/ show load indicator\r\n$(\".load_img\").css(\"visibility\", \"visible\");\r\n\r\n\/\/ get the next page content\r\nRunner.runnerAJAX(Runner.pages.getUrl(pageObj.tName, pageObj.pageType) + \"?goto=\" + window.pagecount,\r\npageObj.ajaxBaseParams,\r\nfunction(respObj) {\r\n\/\/ hide load indicator\r\n$(\".load_img\").css(\"visibility\", \"hidden\");\r\n\r\n\/\/ in respObj.html contains the whole new page HTML. We need to extract just the data\r\nvar grid_tbody = $(respObj.html).find(\"[data-location='grid']\").find(\"tbody\");\r\nif (grid_tbody.find(\"tr\").length &gt; 0) {\r\n\/\/ add new records to the grid\r\n$(\"[data-location='grid']\").find(\"tbody\").append(grid_tbody.html());\r\n} else {\r\n\/\/ no new data, show 'End' message\r\n$(window).off(\"scroll\");\r\n$(\".end_message\").css(\"visibility\", \"visible\");\r\n$(\".load_img\").remove();\r\n}\r\n});\r\n}\r\n});<\/textarea><\/pre>\n<\/div>\n<p>&nbsp;<\/p>\n<p>This is it. Enjoy!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Infinite scroll is a useful technique that allows to load new content automatically, when the user\u00a0 scrolls down and reaches the end of the page. This is the kind of feature that our customers asked us about for a fairly long time. Turns out, it is not that difficult to implement with the help of some custom coding. Enable &#8216;AJAX search, pagination, sorting&#8217; option on Pages -&gt; List page settings dialogue. Add the following code to List page: Javascript OnLoad event of the page where&#8230;<span class=\"clearfix clearfix-post\"><\/span><a href=\"https:\/\/xlinesoft.com\/blog\/2023\/11\/12\/infinite-scroll\/\" class=\"more-link\">Continue Reading <span class=\"screen-reader-text\">&#8220;Infinite scroll&#8221;<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,1,8],"tags":[],"class_list":["post-3030","post","type-post","status-publish","format-standard","hentry","category-asp-net","category-php-category","category-tutorials"],"_links":{"self":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/3030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/comments?post=3030"}],"version-history":[{"count":8,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/3030\/revisions"}],"predecessor-version":[{"id":3038,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/posts\/3030\/revisions\/3038"}],"wp:attachment":[{"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/media?parent=3030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/categories?post=3030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/xlinesoft.com\/blog\/wp-json\/wp\/v2\/tags?post=3030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}