Question

I have a loading div that shows in between different calls to the server.
Here is the code:

$("#submitButton").click(function () {
        $("#loadingDiv").show();
        $(this).attr("disabled", "disabled");
        $("form:first").submit();                        
    });

It all works well if I comment out the third line of code to submit the form. But when I put the code to submit the form next to these ui update calls, none of them take effect, and the browser wait cursor shows till the result of the form submit are displayed.

Answer 1

You need to add preventDefault() to prevent the default submit from occurring. As you have it, the form is being submitted before any of the click handler code can run.

$("#submitButton").click(function (e) { // note event object passed in
    e.preventDefault(); // add this
    $("#loadingDiv").show();
    $(this).attr("disabled", "disabled");
    $("form:first").submit();                        
});