Phonegap synchronous ajax call

Question

I've been working with phonegap to build an app and have been using ajax to communicate with the server to get all the necessary data. Some of the pages take a few seconds to load (and I dont display the page until everything is loaded) and I would like a loading screen to appear while the client is communicating with the server and processing all the data.

I had everything working great until I decided to throw the the ajax calls into functions (I'm working with a few team members, so I thought it would be easier for them to use these ajax calls if they were in some nice functions). Now because of the ajax function is asynchronous, the loading screen turns on and off before the requests are finished processing. I would like my function to stop the execution of code (similar to an alert) so that the loading screen will turn off AFTER all the ajax calls are made.

Essentially I want my javascript code to look like this:

loading();
sendRequests();
notLoading();

where loading() displays the loading screen, and notLoading() turns the loading screen off. My sendRequests() function is specific to each page (each page has to send different requests depending on the functionality of the page)

if you guys are wondering what the loading() and notLoading() functions looks like, here you go

// functions to make loading screen appear and disappear
function loading() {
    document.getElementById("blackout").style.display = 'block';
}
function notLoading() {
    document.getElementById("blackout").style.display = 'none';
}

I looked into a few other posts about it

How to wait for ajax request to complete in javascript when synchronous option is not available? http://www.hunlock.com/blogs/Snippets:_Synchronous_AJAX

Which those two links essentially tell you the same information, that the third parameter in request.open() needs to be set to false... well, I've tried that and it didn't work =/

here is an example of my getRequest() function so everyone can see what I'm trying to do:

// will send a GET request to the parameter url
function getRequest(url) {
    var req = new XMLHttpRequest();
    req.open('GET', url, false);
    setHeaders(req);

    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if( (req.status == 200) || (req.status == 0) ) {
                if( (typeof req.responseText != "undefined") && (req.responseText != "") ) {
                    localStorage["request"] = req.responseText;
                }
                else {
                    alert("GR: Error talking to the server");
                }
            }
            else {
                alert("GR: Error talking to server");
            }
        }

    }

    req.send(null);
    return parseJSON();
}

If anyone knows how I can fix this, I would be very appreciative!

Answer 1

I ended up just throwing the notLoading() function at all the exit statuses in the sendRequests() function. Kind of a pain, but seems to work now.