Is it possible to add Jquery mobile loader on XMLHttpRequest() request? - php

Question

function uploadFile() {
var fd = new FormData();
var count = document.getElementById('image').files.length;
for (var index = 0; index < count; index ++)
{
var file = document.getElementById('image').files[index];
fd.append('myFile', file);
}
var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.open("POST", "savetofile.php", false);
xhr.send(fd);
}
function updateProgress(evt) {
/* This event is raised when the server send back a response */
$.mobile.showPageLoadingMsg();
}
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
alert(evt.target.responseText);
$.mobile.hidePageLoadingMsg()
}
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
}
I am using Jquert mobile framework and in this XMLHttpRequest I am uploading a file to the server and it takes around 5-6 seconds to complete.I have read that to add and remove the page load(spinner) for jquery mobile just add $.mobile.showPageLoadingMsg() [to load] and $.mobile.hidePageLoadingMsg()[to remove]. Have I placed the function in the wrong positions? or did I make some other mistake ?

Answer 1

Found on solution
function uploadFile() {
//ad this code
$.mobile.loading('show', {
theme: "a",
text: "yoo",
textonly: true,
textVisible: true
});
//end
var fd = new FormData();
var count = document.getElementById('image').files.length;
for (var index = 0; index < count; index ++)
{
var file = document.getElementById('image').files[index];
fd.append('myFile', file);
}