title: Using ajax request to get previous and next object
body: <p>I am trying to create a Ajax function which will create an article navigation according to their date of creation, so the user can navigate through articles using previous(older) and next(newer) links. </p>
  
  <pre><code>&lt;div class="content clear"&gt;
  
    &lt;div class="article"&gt;
      Article contents...
    &lt;/div&gt;
  
    &lt;a href="#Prev" id="prev" class="leftarrow" title="Previous"&gt;EELMINE&lt;span class="arrow_left"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#"     id="bactolist" onClick="history.go(-1); return false;"&gt;Tagasi nimekirja juurde&lt;span class="arrow_middle"&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;a href="#Next" id="next" class="rightarrow" title="Next"&gt;JÄRGMINE&lt;span class="arrow_right"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt; &lt;!-- End content --&gt;
  
  &lt;script type="text/javascript"&gt;
  
  $.ajax({
    url: '/admin/api/site/articles.json?per_page=100',
    dataType: 'json',
    success: function(articles) {
      $(articles).each(function(index, article) {
  
        console.log(article);
  
        $('div.article').fadeOut(0);        
        $('div.article:first').fadeIn(500);  
        $('a.leftarrow, a.rightarrow').click( function (ev) {
  
          //prevent browser jumping to top
          ev.preventDefault();
  
          //get current visible item
          var $visibleItem = $('div.article:visible');
  
          //get total item count
          var total =  $('div.article').length;
  
          //get index of current visible item
          var index = $visibleItem.prevAll().length;
  
          //if we click next increment current index, else decrease index
          $(this).attr('href') === '#Next' ? index++ : index--;
  
          //if we are now past the beginning or end show the last or first item
          if (index === -1){
            index = total-1;
          }
          if (index === total){
            index = 0
          }
  
          //hide current show item
          $visibleItem.hide();
  
          //fade in the relevant item
          $('div.article:eq(' + index + ')').fadeIn(500);
  
        });                                               
      });
    }
  });
  </code></pre>
  
  <p></p>
  
  <p>I'm having difficulties constructing the function responsible for getting the articles according to their date value. </p>
  
  <p>Using <code>console.log(article)</code>, I get the following values:</p>
  
  <pre><code>body: "..."
  comments_count: 0
  comments_url: "..."
  created_at: "date and time ..."
  excerpt: "..."
  title: "..."
  url: "..."
  </code></pre>
  
  <p>So it should be possible to use the <code>created_at</code> variable for the navigation, but I don't know how at the minute. 
  Any ideas?</p>
  
  <p>CMS used: <a href="http://www.edicy.com/en" rel="nofollow">Edicy</a>
  <strong>Note:</strong>        The CMS does not support PHP. </p>
  
  <p><strong>EDIT:</strong> The article listing <a href="http://www.edicy.com/developer/code-examples/javascript-tricks/fetching-articles-via-api" rel="nofollow">sample</a> on the "blog" page provided by the CMS developer documentation.</p>