How to add a loading screen when doing a AJAX call in Phonegap?

ajax, cordova, javascript, jquery

Solution

To globally show a loading page on every ajax call you can use this code:

$( document ).ajaxStart(function() {
    $( "#loading" ).show();
});

and hide it when the ajax calls stop

$( document ).ajaxStop(function() {
    $( "#loading" ).hide();
});

you need a full screen div with the id loading, and a loading image gif or something like that

Problem

Title pretty much says it. How do I add a loading screen when AJAX is running and make the loading screen disappear when it AJAX has finished running? My AJAX function: ``` $("#loginBtn").on("click", function(e){ e.preventDefault(); var loginForm = document.getElementById("loginForm"); var login_data = $('#loginForm').serialize(); $.ajax({ type: "POST", url: serverURL + "loginProcess.php", data: login_data, dataType:"json", success: function(data){ localStorage.setItem('id', JSON.stringify(data)); }, error: function(jqXHR, textStatus, errorThrown) { navigator.notification.alert('Invalid Email or Password!',null,'Error', 'Done'); } }); ``` }); Note: I'm not using jQuery Mobile.

Original source