CODEWITHSUNDEEP
jqueryajaxprogress-bar
BhavikKama
BhavikKama

Reputation: 8790

how to show loading image while ajax function in process?

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?

Upvotes: 1

Views: 22231

Answers (2)

Muthu Kumaran
Muthu Kumaran

Reputation: 17900

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);                              
            }
        });       

 }

Upvotes: 9

Viren Rajput
Viren Rajput

Reputation: 5726

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                            
            }
        });
    }

Upvotes: 6

Related Questions