Correct way to "load more" articles with ajax?

Myusername · 2020-09-19 07:30:08

Good Morning! A quick question…

I am designing a website on Textpattern that would like to use a “load more” button at the end of the article loop. The goal, of course, is to load more articles when clicked.

I did this by creating a form in json format with all the information of the articles I needed (title, body, author, etc.). Then, I used ajax to access that form and then display them in my loop.

However, in my research, tutorials generally pointed to a direct search of the database, never like I did.

So I was thoughtful. Is there a “right way” to do this? does anyone know anything about it?

Last edited by Myusername (2020-09-19 11:23:54)

etc · 2020-09-19 12:50:48

Myusername wrote #325960:

However, in my research, tutorials generally pointed to a direct search of the database, never like I did.

Could you develop on this? Are SQL servers capable of interpreting AJAX requests without any (say, PHP) interface?

Myusername · 2020-09-19 21:41:58

etc wrote #325967:

Could you develop on this? Are SQL servers capable of interpreting AJAX requests without any (say, PHP) interface?

I don’t think I expressed myself well. In fact when I said it directly from the database, I meant using PHP for that. However, without a json file to store the articles.

An example is this topic.

Maybe I will launch a shortcode that helps to include “load more” buttons with ajax in article_custom and article tags. But I would like to develop using best practices.

colak · 2020-09-20 06:45:20

I have seen txp sites with ajax loading of articles about 10 years ago. I never liked this type of endless scrolling, present in social media platforms, as the visitors never quite know where they can access the articles from, especially after the number of the articles increases.

Maybe my dislike is now intensified as I am relating endless scrolling to doomscrolling, but admittedly it would be interesting to see how it can be done using the latest txp version.

etc · 2020-09-20 11:54:46

Myusername wrote #325969:

An example is this topic. … But I would like to develop using best practices.

By no mean I pretend my practices are good, just sharing. The laziest way must be jQuery load method, when you retrieve what you need directly from a remote HTML page and insert it into your page. If the performance is important (or you just want to get rid of jQuery), then, I think, loading and processing JSON data instead is fine. Outputting JSON is quite easy with txp 4.8 via media-typed forms, but the client-side JS processing will be yours.

The example you cite is illustrated here, fwiw.

Pat64 · 2021-10-25 06:23:10

Maybe this could be useful if you are looking for a simpler solution without the need of jQuery.

Note: it’s not an infinite scroll loader, instead a “load more” button.

1° Create a config form in order to store some TXP variables located into a unique place for easier future changes:

<txp:hide>
Section name devoted to articles
</txp:hide>
<txp:variable name="articles_section" value="articles" />

<txp:hide>
TXP variable for the value of limit (number of articles to display)
</txp:hide>
<txp:variable name="articles_limit" value="3" escape="integer" />

Modify all limit attributes for your articles with this variable: limit='<txp:variable name="articles_limit" />'

2°. Create a page template with only this structure:

<txp::config />
<txp:evaluate query='number(<txp:page_url type="offset" escape="integer" />) > 0'><txp:else /><txp:header name="HTTP/1.1 301 Moved Permanently" value='Location: <txp:site_url />' /></txp:evaluate>
<txp:article_custom section='<txp:variable name="articles_section" />' limit='<txp:variable name="articles_limit" />' offset='<txp:page_url type="offset" />' />

Where you want to place the loading button, add this code into your page template:

<div id="articles-inner">
<span aria-hidden="true" id="offset" data-counter="<txp:variable name="articles_limit" />"></span>
<txp:variable name="articles_count" trim>
<txp:article_custom section="articles" pageby="1" pgonly limit="999" status />
</txp:variable>
</div>

3°. Add this js script within your footer (the end of your HTML document before the closing </body> tag:

<script>
"use strict";
if(null!=document.getElementById("articles-inner"))var inner=document.getElementById("articles-inner");
// Compressed by https://jscompress.com/ and Babel
if(null!=inner){inner.insertAdjacentHTML("afterend","<button id=\"loader\"><b></b></button>");var xhr=new XMLHttpRequest,btn=document.getElementById("loader"),offset=document.getElementById("offset");btn.onclick=function(){var a=parseInt(offset.getAttribute("data-counter"),10);xhr.open("GET","ajax?offset="+a),xhr.onload=function(){200===xhr.status?(inner.insertAdjacentHTML("beforebegin",xhr.responseText),offset.setAttribute("data-counter",<txp:variable name="articles_limit" />+a)):alert("Request failed.  Returned status of "+xhr.status)},xhr.send(),a>=<txp:variable name="articles_count" />&&btn.remove();}}};

4°. Voilà. The content of the loading button is injected with the help of CSS:

:lang(fr) #loader b:after,:lang(en) #loader b:after{
content:'Voir la suite';
font-weight:600
}
:lang(en) #loader b:after{content:'Load More'}

Last edited by Pat64 (2022-03-24 03:48:27)

Textpattern CMS

Textpattern CMS support forum

#1 2020-09-19 07:30:08