How can I iterate through my entries?

Question

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 :)

Answer 1

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.