Question

I am using jquery.form plugin, I don’t think my ajax loading gif placed a right selection in jQuery. Following are my codes, could someone tell me how to place the loading gif correctly.

Many thanks.

jQuery:

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#loader').css('visibility','visible');
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
})

HTML:

<div id="loader"> <img src="images/loader.gif" width="18" height="18" / >

CSS:

#loader{
    float:left;
    margin:0px;
    position:relative;
    visibility:hidden;
}

Answer 1

One problem I see is that your HTML, as posted, is malformed. If you want the GIF to be inside of the #loader div, you need to make sure you close your tag:

<div id="loader">
  <img src="images/loader.gif" width="18" height="18"/>
</div>

If that’s not the issue, have you checked to ensure that your #loader div displays correctly with its initial visibility set to visible?

Edit:

Another big issue is that you’re only showing the loader after the form was posted successfully — $('#loader').css('visibility','visible'); is in the success callback. Try changing your JS to this:

$(document).ready(function(){
    $("#contact-form").validate({

        // .......

        submitHandler: function(form) {
            $('#loader').css('visibility','visible');
            $(form).ajaxSubmit({
                url:"echo/vali.php",
                type:"POST",
                success: function(){
                    $('#contact-form').hide();
                    $('#sent').show();
                    $('#loader').css('visibility','hidden');
                }
            });
        }
    });  
});