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]: stackoverflow.com/questions/2509711/… — chakroun yesser
– chakroun yesser, Commented Dec 19, 2013 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
– Arman Malik, Commented Dec 19, 2013 at 17:09

Abhishek · Accepted Answer · 2013-12-19 17:35:49Z

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, 2013 at 17:35

answered Dec 19, 2013 at 17:05

Abhishek

1,5613 gold badges13 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arman Malik Over a year ago

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

Abhishek Over a year ago

issue may be that div is affected by other div on page try below -- beforeSend: function(){ $('#summary').html('<img src="/path to load image/loadimage.gif" />');$('#friendsugMain').hide(); },

Arman Malik Over a year ago

i tried many sites even askbeen.com and answers.yahoo.com but really here u answer me best. thanks

Arman Malik Over a year ago

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

Abhishek Over a year ago

yes! why not, you welcome my email id -- [email protected]

|

Manish Goyal · Accepted Answer · 2013-12-19 17:00:18Z

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, 2013 at 17:00

answered Dec 19, 2013 at 16:55

Manish Goyal

7002 gold badges7 silver badges18 bronze badges

1 Comment

Manish Goyal Over a year ago

I have edited the code, hope it will give you more clear idea, just create new image tag like <img src = "loader.gif" id = "image" style = "display:none;"/>

onionpsy · Accepted Answer · 2013-12-19 17:01:26Z

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

Drencrom · Accepted Answer · 2013-12-19 16:54:50Z

-1

I use

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

answered Dec 19, 2013 at 16:54

Drencrom

317 bronze badges

Collectives™ on Stack Overflow

Want to display loading bar while load php file in jquery

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related