ASP.Net - Poor Mans Asynch "Please Wait..." Animation

Question

I have a page that, thanks to jQuery will automatically click the "Run Report" button under certain conditions. So, when the user goes to the page via the menu, they wait for x seconds and the results are returned. This works great...

However, I want to add an animation because some users are not aware anything is going on and I also would like to just show a spinner. The application is not yet "Ajaxified" and may never be. So I thought of a poor-mans way of doing it.

I have a

div

that has text and an image in it. That div has a class on that that simply does

display: none;

The same jQuery that clicks the button I also have it using the

.toggleClass

method to now Show the div.

This works great AND the report runs and eventually returns the data and since at that point the page is refreshed, the div gets hidden again and all is right in the world.

My problem is, the image shows but does not animate. I tried to put it Before the click hoping that would happen and start its thing Then the click even to start the waiting would occur.

Is there anything I can do to force the Gif to animate?

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Are you using the jQuery ajax method to request the report? If so there is a function built into the standard ajax method.

$.ajax({
    url: "/webservices/taskHelper.asmx/ArchiveTask",
    data: '{taskId: 5}',
    beforeSend: function () {
        $("#spinner").show();
    },
    error: deft.ajaxError,
    success: function (data) {
        $("#spinner").hide();
    }
});

The "beforeSend" function will execute when the link is clicked and continue to run until a response is recieved from the server. I use the beforeSend function to display my hidden div containing an animated gif. Works just fine. jQuery ajax docs

ASP.Net - Poor Mans Asynch "Please Wait..." Animation

Sign up