<blockquote>
  <p>Is it best to use jQuery for the Ajax-request?`</p>
</blockquote>

<p>Not necessarily. jQuery provides an easy-to-use <a href="http://api.jquery.com/jquery.ajax/" rel="nofollow noreferrer"><code>ajax</code> function</a>, but nowadays it's perfectly simple to <a href="http://www.sitepoint.com/guide-vanilla-ajax-without-jquery/" rel="nofollow noreferrer">make an AJAX call with vanilla JS</a>.</p>

<blockquote>
  <p>How can I load the "next" five entries in a news-feed, so the call doesn't load the latest five entries over and over?</p>
</blockquote>

<p>You will need to pass an offset and limit to your element query, or use Craft's <code>paginate</code> tag, in order to only receive data for one 'page' of elements at a time.</p>

<blockquote>
  <p>I've seen that you need to build a specific template for ajax-calls. Is there any good examples of those?</p>
</blockquote>

<p>I prefer to use the <a href="https://github.com/pixelandtonic/ElementAPI" rel="nofollow noreferrer">Element API plugin</a> to serve up my JSON for front-end consumption... but you can also build a JSON feed using a Twig template.</p>

<hr>

<p>Here are some links that might be helpful:</p>

<ul>
<li><p><a href="https://learn.jquery.com/ajax/" rel="nofollow noreferrer">Basic intro info about AJAX</a></p></li>
<li><p><a href="http://codesion.co.uk/2015/10/14/lazy-loading-channel-content-in-craft-cms/" rel="nofollow noreferrer">Tutorial on front-end lazy-loading with Craft</a> ... (site appears offline at the moment, so you can also use a <a href="https://web.archive.org/web/20151019033252/http://codesion.co.uk/2015/10/14/lazy-loading-channel-content-in-craft-cms/" rel="nofollow noreferrer">Wayback copy</a>)</p></li>
<li><p><a href="https://github.com/pixelandtonic/ElementAPI" rel="nofollow noreferrer">Element API plugin</a>, which allows you to easily create a JSON feed of queried elements: </p></li>
<li><p><a href="https://craftcms.stackexchange.com/questions/2842/infinite-scrolling-with-craft">Other</a> <a href="https://craftcms.stackexchange.com/questions/146/how-do-i-setup-ajax-paging-for-entries">answers</a> from SE questions about AJAX pagination/loading</p></li>
</ul>

CC BY-SA 3.0
2016-05-02T07:44:25.510Z
2016-05-02T07:44:25.510Z
2017-04-13T12:50:59.930Z
Michael Rog
<p>I should begin to say that I have no idea really how exactly ajax works. Although I've used it a couple of times with pre-made WordPress plugins. I saw some examples of ajax entry-loading here on Stack Exchange, I tried to make ajax requests in Craft but just ended up with server errors. </p>

<p>My main goal that I want to accomplish is just to have a news-feed that begin to show 5 entries, a button on the bottom that appends five more.</p>

<ul>
<li>Is it best to use jQuery for the Ajax-request?  </li>
<li>How can I load the "next" five entries in a news-feed, so the call doesn't load the latest five entries over and over?</li>
<li>I've seen that you need to build a specific template for ajax-calls. Is there any good examples of those?</li>
</ul>

<p>If someone got some advice for me how to accomplish this it would make me so happy!
It'd be really nice to learn how it works, so if you got tips of tutorials, working examples, good reads — please share :)</p>

<templating><ajax>
How to load entry-objects with Ajax
# How to load entry-objects with Ajax

(Asked by: username_0 on 2016-05-02)

I should begin to say that I have no idea really how exactly ajax works. Although I've used it a couple of times with pre-made WordPress plugins. I saw some examples of ajax entry-loading here on Stack Exchange, I tried to make ajax requests in Craft but just ended up with server errors.

My main goal that I want to accomplish is just to have a news-feed that begin to show 5 entries, a button on the bottom that appends five more.

* Is it best to use jQuery for the Ajax-request?
* How can I load the "next" five entries in a news-feed, so the call doesn't load the latest five entries over and over?
* I've seen that you need to build a specific template for ajax-calls. Is there any good examples of those?

If someone got some advice for me how to accomplish this it would make me so happy!
It'd be really nice to learn how it works, so if you got tips of tutorials, working examples, good reads — please share :)

**Tags:** templating, ajax

---

## 1 answers

### Answer by username_1 on 2016-05-02. Score: 7 | Accepted answer

> Is it best to use jQuery for the Ajax-request?`

Not necessarily. jQuery provides an easy-to-use [`ajax` function](http://api.jquery.com/jquery.ajax/), but nowadays it's perfectly simple to [make an AJAX call with vanilla JS](http://www.sitepoint.com/guide-vanilla-ajax-without-jquery/).

> How can I load the "next" five entries in a news-feed, so the call doesn't load the latest five entries over and over?

You will need to pass an offset and limit to your element query, or use Craft's `paginate` tag, in order to only receive data for one 'page' of elements at a time.

> I've seen that you need to build a specific template for ajax-calls. Is there any good examples of those?

I prefer to use the [Element API plugin](https://github.com/pixelandtonic/ElementAPI) to serve up my JSON for front-end consumption... but you can also build a JSON feed using a Twig template.

---

Here are some links that might be helpful:

* [Basic intro info about AJAX](https://learn.jquery.com/ajax/)
* [Tutorial on front-end lazy-loading with Craft](http://codesion.co.uk/2015/10/14/lazy-loading-channel-content-in-craft-cms/) ... (site appears offline at the moment, so you can also use a [Wayback copy](https://web.archive.org/web/20151019033252/http://codesion.co.uk/2015/10/14/lazy-loading-channel-content-in-craft-cms/))
* [Element API plugin](https://github.com/pixelandtonic/ElementAPI), which allows you to easily create a JSON feed of queried elements:
* [Other](https://craftcms.stackexchange.com/questions/2842/infinite-scrolling-with-craft) [answers](https://craftcms.stackexchange.com/questions/146/how-do-i-setup-ajax-paging-for-entries) from SE questions about AJAX pagination/loading


---

