How to use loading image in jQuery $.post() ?

[ankur0101]

Hi,

I am using jquery $.post() to get content from other URL. A reason behind that is it sends XMLHttpReqtest using which I can restrict users directly visiting the remote URL.

Lets see an example of code which I am using

<script>
$(document).ready(function(){
$('#click').on('click', function(){
$.post("http://localhost/my_hiden_url.php/", function(data) {
                $('#content').html(data);
                });
});
});
</script>

<button name='click' id='click'>Click</button>
<p id='content'></p>

So when I click the button called Click, it will call for URL http://localhost/my_hiden_url.php and put its returning content data as html into place where id='content' is mentioned.

 

But many times when remote URL http://localhost/my_hiden_url.php takes lot of time because if fetches lot of data from database, till that time id='content' does not show anything and as soon as it receives some data from my_hidden_url.php, it pastes on <p> as it is.

 

My question is in case of more time when http://localhost/my_hiden_url.php is working with database, how can I put an image of text as "Loading . . ." in place of id='content' ?

 

So it should be like when I click Click button, it will show Loading image or text till it receives any data from my_hiden_url.php.

 

How to do that ?

[requinix]

You know that my_hiden_url.php isn't really hidden, right? Anyone can easily find out that it exists.

 

Keep a flag somewhere about whether the content has been loaded. Just before you fire off the AJAX, set the flag=false and do a setTimeout with a function displays the Loading thing if the flag isn't set. When the AJAX returns, set the flag.

[ankur0101]

Okay but how to do that with code ?

[kicken]

If actually want the loading image to only display if there is a delay, you need to do as mentioned and use a flag + setTimeout to do that. I tend to just show the loading image regardless, as it is easier. If the request goes quickly it only shows for a second, if it shows at all. If the request is slow then it shows until it is complete.

 

$('#click').on('click', function(){
   $('#content').html('<img src="/images/loading.gif">');
   $.post("http://localhost/my_hiden_url.php/", function(data) {
                $('#content').html(data);
   });
});

[fastsol]

If actually want the loading image to only display if there is a delay, you need to do as mentioned and use a flag + setTimeout to do that. I tend to just show the loading image regardless, as it is easier. If the request goes quickly it only shows for a second, if it shows at all. If the request is slow then it shows until it is complete.

 

$('#click').on('click', function(){
   $('#content').html('<img src="/images/loading.gif">');
   $.post("http://localhost/my_hiden_url.php/", function(data) {
                $('#content').html(data);
   });
});

This is what I do also and seems to work rather well.

[ankur0101]

Let me try on my page. I will update this thread.

[ankur0101]

Worked, thanks.