Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2015-10-11 10:06:12
- raminrahimi
- Member
- From: India
- Registered: 2013-03-19
- Posts: 278
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
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: 278
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
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: 278
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
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
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: 278
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
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: 278
Re: How to load more articles with Ajax
wow !
So many thanks ETC :-) You are the best :like:
contentSelector: 'div.scroll>*'
Offline
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…</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
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
Re: How to load more articles with Ajax
Hi, check i your browsers console if jQuery is loaded before the scroll script.
Offline
Re: How to load more articles with Ajax
You seem to be loading the jscroll script twice – once in the head and once lower down, which might be having some bearing on what etc says. jQuery is “not found” according to the inspector.
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Hire Txp Builders – finely-crafted code, design and Txp
Offline
Re: How to load more articles with Ajax
Hi etc and Bloke. Thank you for your time. I have the jquery and jscroll javascript files only on top. But still nothing changes. On the inspector I see not error or warnings.
Something I am missing, but I don’t know what. Still I need help :)
Offline