Using ajax request to get previous and next object

Question

I am trying to create an Ajax function that will create an article’s navigation according to the date it was created, so the user can navigate through the articles using previous (older) and subsequent (newer) links.

<div class="content clear"> <div class="article"> Article contents... </div> <a href="#Prev" id="prev" class="leftarrow" title="Previous">EELMINE<span class="arrow_left"></span></a> <a href="#" id="bactolist" onClick="history.go(-1); return false;">Tagasi nimekirja juurde<span class="arrow_middle"></span></a> <a href="#Next" id="next" class="rightarrow" title="Next">JÄRGMINE<span class="arrow_right"></span></a> </div> <!-- End content --> <script type="text/javascript"> $.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); }); }); } }); 

I am having difficulty building the function responsible for getting the articles according to their date value.

Using console.log(article) , I get the following values:

 body: "..." comments_count: 0 comments_url: "..." created_at: "date and time ..." excerpt: "..." title: "..." url: "..." 

Thus, it should be possible to use the created_at variable for navigation, but I don't know how to do it. Any ideas?

Used by CMS: Edicy Note. CMS does not support PHP.

EDIT: This article lists the sample on the "blog" page provided by the CMS developer documentation.

Answer 1

An easier way to do this is to use your model as much as possible and do it with sql "limit". I don’t know which database you are using, so I will take a few steps with the mysql database. I am embarrassed with your code, why do you call ajax without the press? or are you hiding some kind of code?

Let me try with this code: suppose you have a div container and 2 static navigation buttons

 <a href="#" id="next" data-page="2">Next</a> <a href="#" id="back" data-page="0">Back</a> <div id="container"></div> <script> $("#next, #back").click(function(){ //get page number //0 means no page to load var page = $(this).data("page"); if(page == 0)return false; $.ajax({ url : "your/url/?page=" + page, dataType: "json", success : function(data){ var container = $("#container"); $.each(data, function(index, article){ container.append(article); // or do something you want }); if($this.attr("id") == "next") $("#next, #prev").data("page", $this.data("page") + 1); else $("#next, #prev").data("page", $this.data("page") - 1); } }); }); </script> 

for backend:

  <?php $page = $_GET["page"]; $perPage = 100; $start = ($page - 1) * $perPage; // minus 1, because limit start from 0 $sql = "SELECT * FROM table WHERE 1=1 LIMIT $start, $perPage"; //execute the sql and get the result (ex. result) echo json_encode($result); 

I want my answer to help you.

Answer 2

I tested the API on edicy, it looks like it does not allow you to filter using created_at .

But based on your code, you can use the query string to get the current article index on a specific page.

For instance:

Start with http://insenerid.edicy.co/uudised/2013/ , it is also called page 1. There are 4 articles, and you need to add ?page=1&index={0..3} to each article URL:

from http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks

to http://insenerid.edicy.co/uudised/2013/aasta-ehitusprojekt-2012-tiitli-kandidaadiks?page=1&index=1 (because this is the second article on page 1)

Then change your code:

 // This is for example: page = 1, index = 1 // You have to write extra code to get the query string you need. var page = 1, index = 1; $.ajax({ url: '/admin/api/site/articles.json?per_page=100&page=' + page, // ... // Replace // $('div.article:first').fadeIn(500); // with $('div.article:eq(' + index + ')').fadeIn(500); 

Answer 3

If your question is how to sort the data received by your ajax call, you can simply use array.sort ([compareFunction]) before using them. (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort )

like this:

  ... success: function(articles) { articles.sort(function (a, b) { var d1 = new Date(a.created_at); var d2 = new Date(b.created_at); if (d1 < d2) return -1; if (d1 == d2) return 0; return 1; }); $(articles).each(function(index, article) { // alert(article.created_at); console.log(article); ....