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?

Answer 1

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