Want to display loading bar while load php file in jquery

Question

i use a javascript jquery code to call a simple php file to display content. i have a show more link when i click there then new content load. all is working good. i just want to display a loading bar or loading image while getting new data

i want to know how i can display a loading image while calling new content

i have tried following code

<a href="javascript:void(0);" onclick="getSummary(1)" class="mini-blk"><i class="icon-refresh"></i> Show More</a>

<div id="summary"></div>

<script>

function getSummary(id)
{
   $.ajax({

     type: "GET",
     url: 'ajax_more.php',
     data: "id=" + id, // appears as $_GET['id'] @ ur backend side
     success: function(data) {
           // data is ur summary
          $('#summary').html(data);
          $('#friendsugMain').hide(); 
     }

   });

}
</script>

This is an exemple -----> [link][1] [1]: http://stackoverflow.com/questions/2509711/display-loading-image-while-post-with-ajax — chakroun yesser, Dec 19 '13 at 16:56
this is working good the only problem is when first time i click on refresh then loading image not display but when second more then more time then image display good. only first time onclick image not display but new content come — Arman Malik, Dec 19 '13 at 17:09

Manish Goyal · Answer 1 · 2013-12-19T17:00:18.397

0

Try beforesend and complete events of ajax call, you can just create a image, set it to hidden by default and add something like $("#image").show() in before send and $("#image").hide() in complete event

$.ajax({


 type: "GET",
 url: 'ajax_more.php',
 data: "id=" + id, // appears as $_GET['id'] @ ur backend side
 success: function(data) {
       // data is ur summary
      $('#summary').html(data);
      $('#friendsugMain').hide(); 
 },
  beforeSend: function(){
     $("#image").show();
   },
   complete: function(){
     $("#image").hide();
   }
 });

API EVENTS

edited Dec 19 '13 at 17:00

answered Dec 19 '13 at 16:55

Manish Goyal

700
1
7
17

I have edited the code, hope it will give you more clear idea, just create new image tag like – Manish Goyal Dec 19 '13 at 17:01

score 0 · Answer 2 · answered Dec 19 '13 at 17:01

with your code :

<img id="loading_img" src="smiley.gif" alt="[loading gif]" height="42" width="42"> <!-- change this part with your loading img -->

<div id="summary"></div>

<script>
$('#loading_img').hide();
$(document).ready(function () {
    $(document).ajaxStart(function () {
        $("#loading_img").show();
    }).ajaxStop(function () {
        $("#loading_img").hide();
    });
});

function getSummary(id) {
   $.ajax({
     type: "GET",
     url: 'ajax_more.php',
     data: "id=" + id, // appears as $_GET['id'] @ ur backend side
     success: function(data) {
          $('#summary').html(data);
          $('#friendsugMain').hide(); 
     }
   });
}
</script>

jsfiddle : http://jsfiddle.net/6Cxtw/2/

This will affect all your ajax query

Abhishek · Accepted Answer · 2013-12-19T17:35:49.287

0

    <div id="summary"></div>

<script>

function getSummary(id)
{
   $.ajax({

     type: "GET",
     url: 'ajax_more.php',
     data: "id=" + id, // appears as $_GET['id'] @ ur backend side
     beforeSend: function(){
        $('#summary').html('<img src="/path to load image/loadimage.gif" />');
        $('#friendsugMain').hide(); // just added to rectify issue that as first time image was not getting displayed
     },
     success: function(data) {
           // data is ur summary
          $('#summary').html(data);
          $('#friendsugMain').hide(); 
     }

   });

}
</script>

edited Dec 19 '13 at 17:35

answered Dec 19 '13 at 17:05

Abhishek

1,543
3
13
29

this is best i find but the issue is when i click first time on more then load image not display but then again i click then show image. i mean first time click do not display load image but after that display as many as i click – Arman Malik Dec 19 '13 at 17:18
issue may be that div is affected by other div on page try below -- beforeSend: function(){ $('#summary').html('');$('#friendsugMain').hide(); }, – Abhishek Dec 19 '13 at 17:32
i tried many sites even http://www.askbeen.com and answers.yahoo.com but really here u answer me best. thanks – Arman Malik Dec 20 '13 at 09:15
abhishek. can i add u on Gtalk or skype as i think u r really one of good developer i meet and i will be honor. can u add me on skype – Arman Malik Dec 20 '13 at 10:29
yes! why not, you welcome my email id -- asrivastav88@gmail.com – Abhishek Dec 20 '13 at 15:44
i got stuck in small prob now. i tested event.target.offsetTop; in iframe normal working good. just not working in my actualy php site. can u come on Gtalk and check my site – Arman Malik Dec 20 '13 at 16:55

score -1 · Answer 4 · answered Dec 19 '13 at 16:54

-1

I use

$("#div").html('<img src="/load.gif" />')

answered Dec 19 '13 at 16:54

Drencrom

31
7

Want to display loading bar while load php file in jquery

4 Answers4