I am using Ajax and JSON to pull Wordpress posts into a div on a click event. The url of the .click ajax request is:
url: "http://localhost:8888/projects/superfreerespo/" + id,
with the 'id' being id = $(this).children('span.title').attr('data-id'); (this gets the wordpress post title)
This all works perfectly, now the JSON array that is loaded by the ajax request contains two fields next_url & previous_url, I would like to use these URL's as next and previous links by rerunning the same ajax request but with the url changed to that of the next or previous link.
Please see code below to see my current set up. Note how I have been able to console.log the next_url and pevious_url values.
<a class="link></a> (works correctly running ajax request with url of wordpress post)
<a class=next></a> (should run ajax request with url data.next_url)
<a class=previous></a> (should run ajax request with url data.previous_url)
<script>
$(document).ready(function(){
$('.link').click(function(){
if($('#content').css('display') == 'none'){$('#content').toggle();}
id = $(this).children('span.title').attr('data-id');
$.ajax({
url: "http://localhost:8888/projects/superfreerespo/" + id,
method: "GET",
data: {json: 1},
dataType: "JSON"}).done(function( data ) {
$("#game-name").html(data.post.title);
$("#game-reels").html(data.post.custom_fields.reels);
$("#game-paylines").html(data.post.custom_fields.paylines);
$("#game-minBet").html(data.post.custom_fields.min_bet);
$("#game-maxBet").html(data.post.custom_fields.max_bet);
$("#game-jackpot").html(data.post.custom_fields.jackpot);
$("#game-info").html(data.post.custom_fields.game_info);
// --------------
// You can see below I can log the prev/next values to console
console.log(data.next_url);
console.log(data.previous_url);
// The above json values should be attributed to the next & previous links accordingly and run the ajax request with those url's
})
})
});
</script>
