Community
cancel
Showing results for 
Search instead for 
Did you mean: 
Mario_R_
Beginner
144 Views

Popup loading gif

Hello to all,

I need advice to display a popup with a loading gif, during calls synchronous XMLHttpRequest ().
As an example I would like to see something very similar to what happens in the App Preview of Intel during uploads.

I did some tests, but I can not see the sequences in the right order. They are loaded all together once the request XMLHttpRequest ().
Tell me if you need a code example on which to apply the popup loading gif.

Thank you all

Tags (2)
0 Kudos
3 Replies
Rakshith_K_Intel
Employee
144 Views

Post your code snippet, that will help.

Here is example xhr request and where you can show/hide loading popup, code will look something like this:

    

showLoadingGif();
var url = "http://...";
var req = new XMLHttpRequest();
req.onreadystatechange = function() {
    if(req.readyState == 4){
        if(req.status == 200){
           hideLoadingGif();
	   // handle response	
        } else {
	   hideLoadingGif();
	   // handle response
        }
    }
};
req.open('GET', url, true);
req.send();

 

Mario_R_
Beginner
144 Views

Hi Rakshith, thanks for your answer.

Here's my example, the problem is when the request is synchronous (req.open ('GET', url, false)), in which case it happens: the app freezes and then the page is opened directly with the result. Without load the gif.
If the asynchronous imposed as in your example, everything works fine.

 

 $(document).on("click", "#btn_test", function(evt)
    {
		activate_page("#page_test");
		showLoadingGif();
			
		var req = new XMLHttpRequest();
		req.onreadystatechange = function() {

			if(req.status == 200){
				hideLoadingGif();
				showResult();
			}
		}
		req.open('GET', "http://..", false);
		req.send();

    }); 

 

Rakshith_K_Intel
Employee
144 Views

can you post the full code, what is the url?

Reply