Home » Asp.net

Loading please wait image show hide


I am trying to implement the loading please wait image funtionality while controls refersh on the page. Here are steps I have taken:

1. Added the image to the .net solution file in the image folder.
2. Added a div with the hidden class that holds the image source on the webform.

Image loads hidden by default and I am trying to show it when any postback or partial post back occurs. There are several controls like dropdowns, checboxes, gridview etc and links in the gridview that could take a few moments to load so I want to display the loading please wait while they reload after selections are made. All Controls exist in the update panel. I can't figure out how to show the image and hide it again when controls are reloaded. I am trying to add to this existing jQuery, my challenge is events occur after the document has been loaded so I need to add Ajax events to this query to show hide the loading please wait image. Here is what I have so far

//Dialog box settings

$(document).ready(function() {

    // $("mytest").dialog({
        title: "   Test",
        resizable: false,
        modal: true,
        height: 100,
        width: 100,
        autoOpen: false,
         buttons: {
            'OK': function() {
            'Cancel': function() {

    $(".myLink").live("click", function(e) {
          var id = $(this).html();
        var mytext = "my first Test";

        $("#mydiv1']").dialog("option", "title", "Test");
        $("#mydiv2").html("Comments: " + mytext);



Here is the code I have tried but it does not kick off, I am not sure how to combine it with the code above:




5 Answers Found


Answer 1

You can  do with javascript.. but it's not  100%  accuracy...Try using ajax  preloader component  and its open source  to download



Start from here...




Answer 2

Thanks, but I rather not start over, I am trying to build upon what I already got.  I just need help with the jQuery part.


Answer 3

Can you post  your current markup in aspx? that would be helpful to check and fix missing part.


Answer 4

Problem is in the jQuery and not in the markup.  I need to put together the jQuery code I posted above or some thing similar to it. 


Answer 5

The biggest problem you are going to have once you get most of this to work is the definition of document.ready is different with IE, FF, Safari, Chrome, and Opera. There are a couple pretty easy ways to handle this thou. On a full page  post-back I use this simple trick:


 document.body.onload = function(){



function switchDivs(){

//Fade out your loading  message, that is pre-assigned to be positioned over the page



With partial  post backs you can do this same thing with the ajaxStart() and ajaxStop() methods built into jQuery.




<< Previous      Next >>

Microsoft   |   Windows   |   Visual Studio   |   Sharepoint   |   Azure