how to show loading image while ajax function in process?

Question

Following is my ajax function which will fill the html div on button click..now what i want is how can i show loader image when this function starts and after this function exucte the loader will hide.

function campaignList(){
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            success:function(data){
                $(".main_content").html(data);                              
            }
        });
    }

I had tried with following script

<script type="text/javascript">
$("#loading_layer").ajaxStart(function(){
       $(this).show();
     });
</script>

but nothing happens.. following is my div where the ajax loader gif image is there which i want to hide and show

<div id="loading_layer" style="display: none">

////////////////////////////////////////////////////////////////////////////// Above was for ajx method i was asking..but if i want to do same thing while form is submitting then how can i achieve this..?

following is my code line of one javascript which submitt the form

{some javascript code for form validation if all validation true then flag will be true.....

   if (flag == true) {
    div.style.display = '';
 alert("");
    document.editadform.submit();
    }
         div.style.display = 'none';
        return flag;

}

following is my one div that haev img which i want to show hide on submition of form and when its done i want to hide

" />

so any one can guide me about this problem?

i just read somewhere that Whenever an Ajax request is about to be sent, jQuery checks whether there are any other outstanding Ajax requests. If none are in progress, jQuery triggers the ajaxStart event. Any and all handlers that have been registered with the .ajaxStart() method are executed at — BhavikKama
– BhavikKama, Commented Dec 4, 2012 at 6:15

Muthu Kumaran · Accepted Answer · 2012-12-04 05:38:29Z

9

You can do by adding beforeSend in your AJAX script,

Take a look at jquery Ajax doc, http://api.jquery.com/jQuery.ajax/

function campaignList(){
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            beforeSend: function ( xhr ) {
               //Add your image loader here
            },
            success:function(data){
                $(".main_content").html(data);                              
            }
        });       

 }

answered Dec 4, 2012 at 5:38

Muthu Kumaran

18k5 gold badges50 silver badges72 bronze badges

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

Comments

Viren Rajput · Accepted Answer · 2012-12-04 05:38:25Z

6

This should just work fine:

function campaignList(){
        $(".main_content").html("<img src='loader.png'>"); // show the ajax loader
        $.ajax({
            type:'post',
            url:'<%=campaignListURL.toString()%>',
            data:{},
            success:function(data){
                $(".main_content").html(data);  // this will hide the loader and replace it with the data                            
            }
        });
    }

answered Dec 4, 2012 at 5:38

Viren Rajput

5,8965 gold badges33 silver badges41 bronze badges

6 Comments

BhavikKama Over a year ago

thnx its very simple way u guide me..i understood //but my problem is how can i give img source relatively..i am using liferay i dont have any vast knowledge about jquery but my src will come like this "request.getcontextpath"/img/loader.png" so how can i put this way in src of img?

Viren Rajput Over a year ago

well, one way you can do this is by making a global variable that will hold the value for "request.getcontextpath"/img/loader.png at the beginning and just add it to the $(".main_content") object

BhavikKama Over a year ago

i done that..thanx...now what happen is ..image just shows for glance..hardly for one millisecond..is there any way to make it show proper?

Viren Rajput Over a year ago

I guess the request gets completed in a millisecond so it hides.

BhavikKama Over a year ago

ok.by the way thanx for this...a simple and in few second u solved my problem

|

Collectives™ on Stack Overflow

how to show loading image while ajax function in process?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related