Show image when button is pressed

[200dogz]

Hi guys,

Just a quick and simple question:

i'm trying to have a loading image displayed when a submit button is pressed.

Basically what I have at this stage is an asp:image with its visibility set to false, and in the onclick function of the button the visibility of the image can be toggled.

This is fine however, the onclick function of the button also needs to load a lot of thing, and the change in image visibility does not get updated until all the stuffs are finished loaded on the server and the page is reloaded; which makes the use of the "loading image" pointless.

Is there a way to make the image update immediately after the button is pressed? There has to be because it's quite common...

Cheers,



Billy

[Frinavale]

Please post the code that displays the image and the code where you call it.

-Frinny

[liawcv]

Just wondering if you were trying to show the hidden loading image by using server-side codes (e.g. C# or VB.NET). And as you said, it doesn't make sense if you do it at the server-side.

In fact, all this should be done at client-side (i.e. by using JavaScript). Let make things simple: Firstly, make the loading image hidden from the view of user. You SHOULDN'T do it by setting its server-side Visible property or the loading image will not be rendered (i.e. sent) to the client-side at all. To allow its visibility to be updated by JavaScript, use CSS style rule (i.e. "display: none") instead.

Secondly, attach a JavaScript statement that shows the loading image on the button's client-side onclick event (i.e. OnClientClick property).

Here are some simple examples of how to show / hide an image by using JavaScript (let Image1 the loading image and Button1 the button):

// To show
document.getElementById("Image1").style.display = "block";
// To hide
document.getElementById("Image1").style.display = "none";
 

Let back to our case: In order to make it works in ASP.NET, you may have to write codes to (1) hide the loading image by setting its CSS style property (NOT the Visible property) and (2) attach the necessary JavaScript statement to the button's client-side onclick event. All these are to be done on the Page_Load event handler. E.g.

protected void Page_Load(...)
{
   if (!Page.IsPostBack)
   {
      // Hide the loading image initially
      Image1.Style["display"] = "none";
 
      // Attach JavaScript to the button's client-side onclick event
      Button1.OnClientClick = 
         "document.getElementById('" + Image1.ClientID + "').style.display = 'block'";
   }
}
 

That's all. You are not required to re-hide the image after the button is clicked. Changes to the loading image's style property at client-side are not visible to the server. Thus, the image will be hidden every time after reload.

And, it is important to use the Image1.ClientID to retrieve the correct client-side ID of the loading image. Or, the codes will not work if master page is used.

Suggestion
Try AJAX technology if you would like to implement a more complex scenario, e.g. show the loading image while temporary disable the entire page. AJAX makes the job much more simple, and sometime code-less.

[200dogz]

Hi guys,

Thanks for the help.

I was trying to perform it on the server-side, and doing it on the client side solves the problem :).

Cheers,



Billy

[bharathreddy]

thanks I was also searching for the same answer.......:) Great work....


Thanks
Bharath Reddy VasiReddy