Question

il give an example

document.ready(function() {
    $("#Show").bind("click", function() 
    {
        var F = Function2();
        if (F)
        {
            // Do Other Stuff.
        }
    }
});

function Function2()
{
    $("#Message").Show();

    $.ajax({
              type: "POST",
               url: [MyURL]
               async: false;
               contentType: 'application/json; charset=utf-8',
               data: JSON.stringify(PostData),
               dataType: "json",
               success: function (returnVal) {
           $("#Message").Hide();
                   return true;
               },
               error: function (xhr, ajaxOptions, thrownError) {
                   return false;
               }
           });

}

</script>




<div id="Message" style="display:none;">
    <!-- Loading Image In here -->
</div>
<a href="#" id="Show" onclick="return:false;">Show then Hide</false>
</code>

Now what I want to happen is for this messagebox to show however the AJAX for some reason wont show it until the AJAX Request is finished by which point it is too late. I have set async to false which hasent helped either.

Answer 1

I think the root of this issue is a syntax error. JavaScript is case sensitive, so the correct syntax would be lowercase show() and hide()

If you’re still having an issue after fixing the syntax errors, try using the ajaxStart event to show the message and hide it on success.

//use the ajaxstart event to display the message
$('#message').ajaxStart(function() {
    $(this).show("slow");
});

$.ajax({   
    type: "POST",   
    url: [MyURL]   
    async: false;   
    contentType: 'application/json; charset=utf-8',   
    data: JSON.stringify(PostData),   
    dataType: "json",   
    success: function (returnVal) {   
        $("#Message").hide("slow"); //hide message on success   
        return true;   
    },   
    error: function (xhr, ajaxOptions, thrownError) {   
        return false;   
    }   
});  

Delaying the show or hide

$("#message").delay(3000).hide("slow");

Here’s a jsFiddle: http://jsfiddle.net/rs83R/