如何使用jQuery使div可见？

Question

 function showwaitmsg() {
        $("#wait").fadeIn();
        return  true;
    }
    function hidewaitmsg() {
        $("#wait").fadeOut();

    }

    $("a:contains('Test1')").bind("click", function () {
      if (showwaitmsg())
        test2(); // Function contains XMLHttpRequest
        hidewaitmsg();
    });


   <div id="wait" class="overlay" style="display: none">
             Please Wait
        <img src="~/loading.gif" />
    </div>

I am trying to show a "please wait" message using the above code while the XMLHttpRequest is being processed. The wait div is showing up too late after the request has been processed. Can you please tell me what I should do to make the wait div visible as soon as the test1 button is clicked?

Answer 1

$("#id_of_button").on('click', function() {
    $("#wait").show();
});

Answer 2

Instead of calling showwaitmsg() and hidewaitmsg() outside of test2() , you should include them inside your ajax call.

$.ajax({
    ...,
    beforeSend: showwaitmsg(),
    ...,
    complete: hidewaitmsg()
});

Returning false in the beforeSend function will cancel the request. As of jQuery 1.5, the beforeSend option will be called regardless of the type of request. It is also worth noting that complete is called after success and error callbacks are executed.

Answer 3

It is much better to move this code to the AJAX call itself, like this:

$.ajax({ 
    ...,
    beforeSend: function() {
        $('#wait').fadeIn();
    },
    complete: function() {
        $('#wait').fadeOut();
    }
});

It will help to separate the logic correctly and support more ways to make such AJAX call in your code, eg pressing keyboard button, etc.