1

I'm sure this question is not uncommon and has been answered yet, but i can only find questions where it is answered in JQuery (which i dont understand).

I'm having a AJAX Function in which data from a php script is retrieved. One of the parameters of the AJAX function is a callback-function, which gets called after the data has been successfully retrieved.
However, if the AJAX Function gets called multiple times, only the last callback-function gets called. I've already read that this might be some variable scope issue.

Now my question is: How can i get it to work so that every time i call the AJAX function, the corresponding callback function gets correctly called?

What I've tried so far:
I figured out that if i made the AJAX call synchronous i would not have this issue. But that's something i really dont want to do, because sometimes it takes very long to retrieve the data.

Here's the AJAX function: 

function getData(callback)  
{  
    var xmlhttp = new XMLHttpRequest();  
    xmlhttp.onreadystatechange = function()  
    {  
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200)  
        {  
             var data = JSON.parse(xmlhttp.responseText);
             callback(data);
        }  
    }; 
    xmlhttp.open("GET", "../PHPScripts/getData.php?q1=someparameters", true);
    xmlhttp.send(); 
}

And here are the two callers: 

function createElements()
{
    [...]
    createAnotherElement();

    var callback = function()
    {

          [gets successfully called]
    };
    getData(callback);
}

function createAnotherElement()
{

        var callback = function()
        {
            [Never gets called]
        };
        getData(callback);
}

Any help is greatly appreciated.

Jbartmann
  • 1,459
  • 4
  • 24
  • 42
  • 2
    The code you've got should work (unless I'm missing something). Are you calling `getData()` from within a loop in your real code? (if so, see http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) – Matt Jan 14 '14 at 14:21
  • It's not my real code, i tried to simplify as much as possible. No loops, the first `getData()`-call is made in another function, which gets called before the second `getData()` call is made. Also the AJAX function takes three more arguments which are used in the url (see `someparameters` as placeholder). – Jbartmann Jan 14 '14 at 14:25
  • I have changed the two `getData()` calls to better match my real code. – Jbartmann Jan 14 '14 at 14:35
  • 1
    Are you sure you're not missing the `var` from the `var callback` inside the `createAnotherElement()` function? The code you've posted still won't have a problem. The best thing I can advise you to do is reproduce your problem on a site such as http://jsfiddle.net or http://jsbin.com and then post the code that repoduces the problem, and a link to the jsfiddle/ jsbin in your question as well. – Matt Jan 14 '14 at 14:37
  • Thanks for the tips but there is nothing missing. Anyway it is good to know that the problem seems to be somewhere else than in the AJAX function. I will try to locate the problem and if i cant solve it i will follow your tips and try to reproduce on jsfiddle. – Jbartmann Jan 14 '14 at 14:40
  • I still dont know for sure what has been wrong, but now it works. I assume it has been a problem with firebug, after i removed all the breakpoints everything went fine... – Jbartmann Jan 14 '14 at 14:47
  • code working fine in my computer – Bhavesh G Jan 14 '14 at 14:49

0 Answers0