ankur0101 Posted September 1, 2013 Share Posted September 1, 2013 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 ? Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/ Share on other sites More sharing options...
requinix Posted September 1, 2013 Share Posted September 1, 2013 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. Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1447634 Share on other sites More sharing options...
ankur0101 Posted September 2, 2013 Author Share Posted September 2, 2013 Okay but how to do that with code ? Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1447879 Share on other sites More sharing options...
kicken Posted September 2, 2013 Share Posted September 2, 2013 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); }); }); Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1447885 Share on other sites More sharing options...
fastsol Posted September 2, 2013 Share Posted September 2, 2013 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. Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1447899 Share on other sites More sharing options...
ankur0101 Posted September 6, 2013 Author Share Posted September 6, 2013 Let me try on my page. I will update this thread. Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1448435 Share on other sites More sharing options...
ankur0101 Posted September 9, 2013 Author Share Posted September 9, 2013 Worked, thanks. Link to comment https://forums.phpfreaks.com/topic/281744-how-to-use-loading-image-in-jquery-post/#findComment-1448868 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.