1

I have a table that looks like this: enter image description here

When i click on the link it will make a pop up light box appear with information received from the ajax request. I use the id from the anchor tags data attribute to find relevant records.

My pop up box has left and right arrows, when clicked they should do another ajax request to repopulate the pop up box.

This is the first ajax request sent when a link is clicked:

$(document).ready(function(){
    $('.modelLink').click(function(){
        //getting the reviewID from the data attribute on the link clicked
        var reviewID = $(this).data('id');

        $.ajaxSetup({
            headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
        });
        jQuery.ajax({
            url:'/flyout/' + reviewID,
            type: 'GET',
            success: function( data ){

                //setting the right buttons id for the next request
                $('.fa-chevron-right').attr('data-id', data.nextID);

                //this function has nothing to do with my problem.
                fillFlyoutController(data);
            },
            error: function (xhr, b, c) {
                console.log("xhr=" + xhr + " b=" + b + " c=" + c);
            }
        });
    });
});

At this point my pop up box is great , showing all the relevant data. In the console the received data from the ajax request shows:

enter image description here

So you can see what i do in the first ajax request when i set the data-id for the right button to the 'data.nextID'.

Now when you click the right button it should fire of an ajax request around 97% the exact same code as seen below:

$(document).ready(function(){
    $('.fa-chevron-right').click(function() {
        //getting the reviewID from the right buttons data attribute 
        var reviewID = $(this).data('id');

        $.ajaxSetup({
            headers: {'X-CSRF-Token': $('meta[name=_token]').attr('content')}
        });
        jQuery.ajax({
            url: '/flyout/' + reviewID,
            type: 'GET',
            success: function (data) {
                //setting the right arrow reviewID to the nextID
                $('.fa-chevron-right').attr('data-id', data.nextID);

                //this function isn't relevant for this question.
                fillFlyoutController(data);
            },
            error: function (xhr, b, c) {
                console.log("xhr=" + xhr + " b=" + b + " c=" + c);
            }
        });
    });
});

Now the strange thing is, this actually works the first time the right button is clicked. The returned json is as seen below When i console.log the data:

enter image description here

Okay, so theoretically every single time i click this right button now it should loop through the same process that just worked. However when i click it a second time, it brings back the same data.

By this i mean it actually goes through the ajax request , (even though the right button has a different id now) and returned the data from the previous request as seen below:

enter image description here

Any one have any ideas why this is not working?

EDIT:: by the way, i have also tried putting this second ajax request into a function and calling it from the right button onclick="".

Also i have tried replacing .click(); to bind("click", function) to try and bind button.

All of these thing i have tried result the same.

EDIT:: This is the html for right button

<i class="fa fa-chevron-right" data-id=""></i>
Matthew Smart
  • 1,301
  • 4
  • 21
  • 37
  • Is event fired for second time? – Tushar Jul 28 '15 at 14:15
  • @Tushar yes, it goes through the ajax request but brings back data from the 1st time it was clicked, this can be repeated 10 times and i will have 10 sets of the same result(all relating to the previous reviewID) – Matthew Smart Jul 28 '15 at 14:16
  • i think the id you pass is not being updated (the ID on the chevrons click function). a way around that might be to define a variable in your JS that holds the IDs for right and left click, and that are updated by your click function. But i guess there is also a better solution. – Burki Jul 28 '15 at 14:25
  • Can you post the html for the right button? – WhiteHat Jul 28 '15 at 14:27
  • And you're certain you're getting the correct value from `data.nextID` ? – WhiteHat Jul 28 '15 at 14:29
  • the first time i do get the correct data.nextID, and i have updated to show you the button, its a font awesome font – Matthew Smart Jul 28 '15 at 14:30
  • Try setting cache to false. – Greg Pettit Jul 28 '15 at 14:31

1 Answers1

0

Try changing the attr() to prop(). Sometimes that's a problem.

You could also try using data()

This link should give you a better insight.

Community
  • 1
  • 1
BravoZulu
  • 1,140
  • 11
  • 24