0

I have been wrecking my brains with this issue and cut it down to a small sample code to seek help. I have multiple database call but I need to make them in sequence.

The problem seems simple but solution eludes me. All I am trying to do is in the execution plan of the JS to do the followig:

1- invoke AJAX call 2- wait for it to return 3- go on my merry way

Below is a sample code I created:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX Sample</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
// This variable has global scope
var sBuffer = '';   
var iDataFlag = 0;

function getData() { 

    iDataFlag = 1;
        console.debug('AJAX - Set Flag high');        

    $.ajax({
            type: "GET",                                                                    
            url: "http://wwdpipes.azurewebsites.net/wwdpipe.ashx",
            data: "url=http%3A%2F%2Fisbndb.com%2Fapi%2Fv2%2Fjson%2FIXA6S3IW%2Fbooks%3Fq%3D0596002068&type=xml",
            success: function(xml) {
                    // Parse the XML for a specific value   
                    var data = $(xml).find('title_latin').text();                                                
                    console.debug('AJAX - Reurned: ' + data);
                                        sBuffer = data;
                                        console.debug('AJAX - Set vairable');
                                        console.debug('AJAX - sBuffer: ' + sBuffer);
                                        iDataFlag = 0;                     
                                        console.debug('AJAX - Set Flag low');        
            },
                  async: true    //deprecated in v1.5+ 
    });

    return false;                                    
}


function waitForData() {                      
    if (iDataFlag == 1) 
                window.setTimeout(waitForData, 1000);
    else
                return;
}
</script>
<script type="text/javascript">

$(document).ready(function() {
       ///////////////////////
       getData();
       waitForData();   

       ///////////////////////
       console.debug('Main - iDataFlag=' + iDataFlag);
       console.debug("Main - sBuffer = " + sBuffer);       
});                                
</script>
</head>
<body>
</body>
</html>

And blow is the CONSOLE debugs:

Untitled-3.html:15 AJAX - Set Flag high
Untitled-3.html:53 Main - iDataFlag=1
Untitled-3.html:54 Main - sBuffer = 
Untitled-3.html:24 AJAX - Reurned: Programming Web services with Perl
Untitled-3.html:26 AJAX - Set vairable
Untitled-3.html:27 AJAX - sBuffer: Programming Web services with Perl
Untitled-3.html:29 AJAX - Set Flag low

As you can see the function waitForData() is not doing what I think it should be doing - I have done many variation but can't get this to work.

Help Please!

Thanks...Q

user6310842
  • 1
  • 1
  • 1
    Once you've gone async, it's impossible to return to synchronous execution. – ssube May 09 '16 at 14:42
  • Try implementing a callback once the ajax call is completed, if that is an option – Aleksandar Trajkov May 09 '16 at 14:45
  • I am trying to create an illusion of it by doing the wait function. shouldn't that work? – user6310842 May 09 '16 at 14:45
  • I always get confused by these sort of questions - whatever you want to do when `waitForData` finds the data is received - just put that in the callbck you already have (or, even better use promise chains) – Jamiec May 09 '16 at 14:46
  • the "success" property of the ajax call is your "callback". This is what gets executed once you have the ajax call results from the server. Chain your steps together in this way. – mikey May 09 '16 at 14:47
  • @AceTrajkov, that is an option but truth to be told, i am taking a PHP code to create a pure HTML and too many places for database interaction so I am trying to control the flow before I have to re-write the whole thing in HTML/JS. – user6310842 May 09 '16 at 14:47
  • @mikey I understand that, the issue is why the wait function does not loop and keep on waiting for the flag to be reset. – user6310842 May 09 '16 at 14:49
  • It is because you don't have a loop in there, right? You can use a while loop instead of an if block in your waitfordatafunction. Likely it is waiting a second then returning. You want it to wait until some max timeout. Add timestamps to your CONSOLE debugs to observe the time at which each step is executing. – mikey May 09 '16 at 14:52

0 Answers0