Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2015-10-11 10:06:12

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

How to load more articles with Ajax

Sorry i don’t know ajax to make, any one plz help

I’ve a section on my website there listed 5 articles title, i need to add a new button Load More that should load 5 extra articles by Ajax to each click without reloading the page …

<txp:article_custom limit="5" category="news"><p><txp:title /></p></txp:article_custom> <a href="#">Load More</a>

Last edited by raminrahimi (2015-10-11 10:07:04)

Offline

#2 2015-10-11 14:15:45

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: How to load more articles with Ajax

Hello raminrahimi,

If you use jQuery in your project, you can test this plugin :
jscroll.com/
It works fine with <txp:newer> tag

Offline

#3 2015-10-12 05:54:31

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

Re: How to load more articles with Ajax

Hi sacripant thank you for the reply,
Could you please make an example for me like i mentioned above, because i don’t know well ajax.
once again thanks

Offline

#4 2015-10-13 12:55:28

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: How to load more articles with Ajax

Hi raminrahimi,

Could you please make an example for me like i mentioned above, because i don’t know well ajax.

That way, you’re not going to learn anything

I agree to help, but I don’t want coding instead of you.

  • What have you don’t understand in jscroll documentation ?
  • Do you use jQuery in your template ?
  • Do you know how to add a jQuery plugin in a template ?
  • If you are make some test, can you please post your test code ?

Offline

#5 2015-10-14 11:34:54

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

Re: How to load more articles with Ajax

Dear sacripant,
Thanks a lot for the good message, I tried that plugin and works fine with <txp:older /> :-)
but i’m using in different sections of a page with <txp:article_custom .... /> and <txp:older /> not works with <txp:article_custom :-(

Offline

#6 2015-10-14 11:46:20

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: How to load more articles with Ajax

Hi, you could use Oleg’s plugin which can paginate anything.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#7 2015-10-14 12:40:44

sacripant
Plugin Author
From: Rhône — France
Registered: 2008-06-01
Posts: 479
Website

Re: How to load more articles with Ajax

raminrahimi wrote #295720:

Dear sacripant,
I tried that plugin and works fine with <txp:older /> :-)

Congratulation !

Offline

#8 2015-10-21 05:00:32

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

Re: How to load more articles with Ajax

I tried the following code, that will add entire html page, but i don’t need to duplicate entire html page, if i assign the specific area of a page the pagination will goes hide on second click, can you please try and help me


<h1>Latest News</h1>
<div class="scroll">
<txp:article_custom section="news" limit="3" offset='<txp:etc_offset pgcounter="page" pageby="3" />' pgonly="0">
<div class="repeat">
<h2><txp:title /></h2>
</div>
</txp:article_custom>
<txp:etc_pagination pages='<txp:etc_numpages section="news" limit="3" />'
	mask="{next}" range="0" pgcounter="page"
	next="<a href='{href}' class='more'>Load More</a>"
/>
</div>
<script type="text/javascript">
    $('.scroll').jscroll({
    autoTrigger: false,
    nextSelector: 'a.more,
    contentSelector: 'div.repeat'
});
</script>

Offline

#9 2015-10-21 05:42:47

etc
Developer
Registered: 2010-11-11
Posts: 5,028
Website GitHub

Re: How to load more articles with Ajax

Not tested, but try

contentSelector: 'div.scroll>*'

Offline

#10 2015-10-24 07:51:07

raminrahimi
Member
From: India
Registered: 2013-03-19
Posts: 276

Re: How to load more articles with Ajax

wow !
So many thanks ETC :-) You are the best :like:
contentSelector: 'div.scroll>*'

Offline

#11 2018-04-17 02:50:23

robhert
Member
From: Perú
Registered: 2007-04-27
Posts: 206
Website

Re: How to load more articles with Ajax

Hi. Three years later I have the same situation:

When I click the “Load more” button, I go to the page 2, instead of loading the next two articles below the articles.

<div class="col-12 col-lg-8 col-xl-9">
	<div class="grid loadmore" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": ".grid-sizer", "gutter": ".gutter-sizer", "percentPosition": true, "transitionDuration": "0.3s" }'>
		<txp:article_custom offset='<txp:etc_offset pgcounter="page" pageby="2" />' pgonly="0" section="blog" limit="2" form="blog" />
		<div class="grid-sizer"></div>
		<div class="gutter-sizer"></div>
	</div>
	<p class="extra-margin-bottom text-center">
		<txp:etc_pagination pages='<txp:etc_numpages section="blog" limit="2" />' mask="{next}" range="0" pgcounter="page" next="<a href='{href}' class='more button white big'>Load more&hellip;</a>"/>
		<script type="text/javascript">
	    	$('.loadmore').jscroll({
	    	autoTrigger: false,
	    	nextSelector: 'a.more',
	    	contentSelector: 'div.loadmore>*'
		});
		</script>
	</p>
</div>

I have @<txp:etc_pagination> plugin installed. What am I missing?

Thank you in advance.

Offline

#12 2018-04-18 01:52:11

robhert
Member
From: Perú
Registered: 2007-04-27
Posts: 206
Website

Re: How to load more articles with Ajax

Hi again, to make it clear, here is the link: http://anden.pe/blog/. Once you click on “Cargar más” (Load more) button, you are moved to page2, instead of loading the remaining articles below…. Any ideas?

Thank you

Offline

Board footer

Powered by FluxBB