Jump to content
Sign in to follow this  
jhusband

Rerun ajax request with variable URL

Recommended Posts

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>
 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.