Ajax请求“重叠”

Question

I'm using AJAX with JQuery to pull data from a MySQL database using basically the following:

function getCard(card, lineNr, linedisplay, type){

var textToWrite;    
var d = 'card='+card;


$.ajax({
        type: "POST",
        url: "getcard.php",
        data: d,
        success: function(theXML){

            cardname = $(theXML).find('card_name').text();
            pastline = $(theXML).find('past').text();
            presentline = $(theXML).find('present').text(); 
            futureline = $(theXML).find('future').text();   
            ...

        if(type=="past") textToWrite = pastline;
        else if (type=="present") textToWrite = presentline;
        else textToWrite = futureline;
        ...


        $("#"+lineNr).html(textToWrite); 
        $("#"+linedisplay).html(textToWrite);
        $('.fancybox').prop('title', cardname);
        }   

}); 
};      

This is used to call data from a MySQL table using getcard.php (not sure if you need to see that - basically it puts the data from a table row into XML,

<card_name>{$row['card_name']}</card_name>
<past>{$row['past']}</past>
<present>{$row['present']}</present>
<future>{$row['future']}</future>, 

etc).

As a card link is clicked on, a fancybox popup comes up with the card data (pastline, etc) and the cardname as the fancybox title.

All of this works fine except for one thing. The cardname value doesn't refresh at the same rate as the rest of the data. That is, the title of the second card I click on is the same as the first card I click on - but the rest of the new data (pastline, presentline etc), which is displayed in a div, comes in fine, but the cardname won't refresh until I madly click on the fancybox a few times.

Thanks, I'm guessing my way through everything.

Is there any way to make AJAX make sure it has the most recent data and stop this from overlapping?

Answer 1

It seems that your card title is a fancybox .prop, whereas the card text is html inserted into the DOM by the function. Without being able to test your code, it might be that you are only binding the property with the fancybox .prop call, and fancybox needs to be fired by an event? Maybe attach it with jquery's on(), or perhaps there's something in fancybox (I'm not really familiar with it)?