Rerun ajax request with variable URL

[jhusband]

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>

 

[joel24]

which of your six posts would you like replied to?

http://forums.phpfreaks.com/topic/295862-rerun-ajax-request-with-variable-url/

http://forums.phpfreaks.com/topic/295861-rerun-ajax-request-with-variable-url/

http://forums.phpfreaks.com/topic/295860-rerun-ajax-request-with-variable-url/

http://forums.phpfreaks.com/topic/295859-rerun-ajax-request-with-variable-url/

http://forums.phpfreaks.com/topic/295858-rerun-ajax-request-with-variable-url/

http://forums.phpfreaks.com/topic/295857-rerun-ajax-request-with-variable-url/

[jhusband]

Didn't think it was posting and cannot find the delete post option

[joel24]

You should be using ID instead of class if the element is unique? i.e. you're not updating multiple elements? you can add a class also if you've got some css

<a class="link></a> (works correctly running ajax request with url of wordpress post)

<a id="next" href="#"></a> (should run ajax request with url data.next_url)
<a id="previous" href="#"></a> (should run ajax request with url data.previous_url)

and then use your javascript to assign the href value when the ajax is returned

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

$('#next').attr('href', data.next_url);
$('#previous').attr('href', 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
})
})

[jhusband]

Hi joel thanks for your response. I will be using ID's, this was really just for troubleshooting. The solution you provided helps create the links with the relevant URL's but I am trying to pass those URL's through the same ajax request as the first click event. Can I wrap the ajax request as a function and pass the url as a variable from each link?

[joel24]

not entirely sure what you're after - you want the previous/next buttons to trigger the same ajax method and update the href of the previous/next?