Adding a loading image to a jquery ajax post

Question

i have the following javascript to post a form through ajax without refreshing the screen. Since the post take a little while, i wanted to add a loading image during processing.

I see this article but it seems to only list .load() or .get() but not $.post.

<script type="text/javascript">
    $(document).ready(function() {
        $('#contact form').live('submit', function() {

            $.post($(this).attr('action'), $(this).serialize(), function(data) {

                $("#contact").replaceWith($(data));

            });
            return false;
        });
    });
</script>

Answer 1

Just add a few calls to hide/show your load screen/div, whatever:

<script type="text/javascript">
    $(function() {
        $('#contact form').live('submit', function() {
            $("#Loading").fadeIn(); //show when submitting
            $.post($(this).attr('action'), $(this).serialize(), function(data) {
                $("#contact").replaceWith($(data));
                $("#Loading").fadeOut('fast'); //hide when data's ready
            });
            return false;
        });
    });
</script>

<div id="Loading">I'm loading, image here, whatever you want</div>

Answer 2

I put this in so that is shows on every ajax call, no matter which one I have (I have several)

    /* show the message that data is loading on every ajax call */
    var loadingMessage = 'Please wait loading data for ' + defaultPageDoctor;
    $(function()
    {
        $("#Errorstatus")
        .bind("ajaxSend", function()
        {
            $(this).text(loadingMessage);
            $(this).show();
        })
        .bind("ajaxComplete", function()
        {
            $(this).hide();
        });
    });

Just create an element with the #ErrorStatus id such as:

    <div class="newProcedureErrorStatus ajaxLoading " id="newProcedureErrorStatus">
       <span id="Errorstatus" class="ui-state-error-text newProcedureErrorStatusText"></span>
      <span id="Errorstatus2" class="ui-state-error-text newProcedureErrorStatusText">
      </span>
   </div>

Now for the bonus rounds, you can use this area to put other messages up, I also include a timer:

/* show message for interval */
var saveMessageText = 'Saving...';
function ShowStatus(saveMessage, message, timeInMilliseconds)
{
    var errorMessage = $("#Errorstatus");
    if (saveMessage)
    {
        errorMessage.show();
        //var myNumber = 0;
        var myInterval = window.setInterval(function()
        {
            message = message + '...';
            errorMessage.text(message);
            errorMessage.show();
        }, 1000);
        window.setTimeout(function()
        {
            clearInterval(myInterval);
            errorMessage.hide();
        }, timeInMilliseconds);
    }
    else
    {
        errorMessage.text(message);
        errorMessage.show();
        window.setTimeout('$("#Errorstatus").hide()', timeInMilliseconds);
    };
};

use it like so:

 ShowStatus(true, 'Save Failed with unknown Error', 4000);