1

I want to iterate through my entries on the click of a 'next' and 'previous' button.

I have started off using getNext() and getPrev() by I'm in a bit of a rut.

{% set entry = craft.entries.section('comics').first() %}
{% set asset = entry.comic.first() %}
{% set params = craft.entries.section('comics').order('id asc') %}
{% set prevEntry = entry.getPrev(params) %}
{% set prevAsset = prevEntry.comic.first() %}
{% set nextEntry = entry.getNext(params) %}
{% set nextAsset = nextEntry.comic.first() %}

This is the Twig code. To display the prevEntry I have been using jQuery. Here is that code.

    function prevComic() {
      var $prevTitle = "{{ prevEntry.title }}";
      $(".comic-title").text($prevTitle);
      $(".comic").attr('src', '{{ prevAsset.url }}');
      $(".comic-caption").text("{{ prevEntry.body }}");
    };
    function nextComic() {
      var $nextTitle = "{{ nextEntry.title }}";
      $(".comic-title").text($nextTitle);
      $(".comic").attr('src', '{{ nextAsset.url }}');
      $(".comic-caption").text("{{ nextEntry.body }}");
    };

Then I'm using onclick() on the buttons to call the functions. All I really want is for the 'previous' button to give me the previous entry to the entry currently displayed, and for the 'next' button to give me the next entry to the entry currently displayed. Can anyone help me? Thank you :)

  • Do you want to reload the entries via page reload or ajax request? – Robin Schambach Jan 6 '18 at 16:00
  • I don't mind, I just want it to work. – timbutcher Jan 6 '18 at 16:22
  • If that's the case, you could just use this answer craftcms.stackexchange.com/a/23004/5557 and don't use javascript and instead reload the page when someone clicks on the button – Robin Schambach Jan 6 '18 at 16:23
  • How do I do it without Javascript? Is there a way to trigger things onclick within CraftCMS? – timbutcher Jan 8 '18 at 16:14
  • With a page reload. You create a link to a new page with different parameters to display different entries. That's why I asked if the request type matters. The other way would be a much smoother, cleaner ajax request to reload the things. But most people are too lazy to do it. Since you said you don't mind I tough you are the same – Robin Schambach Jan 8 '18 at 16:16
2

The way you want to achieve this won't work. Twig is just a render engine for php so you can't execute it during your runtime. You could load all entries during the page load and create a twig filter to json_decode them in order to gain access with javascript or you can do something really really nasty like

{% set allEntries = craft.entries.section('comics').order('id asc') %}
<script>
    var entries = [];
    {% for entry in allEntries %}
        entries.push({
            title: "{{ entry.title }}",
            body: "{{ entry.body }}",
            url: "{{ entry.getUrl() }}"
            // ..... 
        });
    {% endfor %}
</script>

To get an array of objects in javascript. But I would not suggest this. The clean way would be to create an ajax request and fetch the entry with php

Have a look at this to learn how to create an ajax request to a controller. You would have to change your controller to:

public function actionSearchEntry()
{
    $id = craft()->request->getParam('id');
    $element = craft()->elements->getElementById($id);

    $criteria = craft()->elements->getCriteria(ElementType::Entry);
    $criteria->section = "comics";
    $criteria->orderBy = "id asc";
    if(!$nextElement = $element->getNext($criteria)){
        $this->returnJson([
            'success'   => false
        ]);
    }

    $this->returnJson([
        'element'      => [
            'title' => $nextElement->title,
            'body'  => $nextElement->body,
            // ....
            'id'    => $nextElement->id
        ],
        'success'   => true
    ]);
}

In your javascript you'll create an ajax request and change the values to the one you received if it was successful (if not there will be probably no other entries.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.