I am trying to call some Java Script functions and having problems. I have included my code, Button3 calls the function and works, for Button2 and Button3 I do not see the IMGDIV. Can someone help? Thank you. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Test_Progress_Control._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> var Page; var postBackElement; function pageLoad() { Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler); Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); } function OnBeginRequest(sender, args) { $get("IMGDIV").style.display=""; } function OnEndRequest(sender, args) { $get("IMGDIV").style.display="none"; } function Test() { return alert('Hello!'); } </script> </head> <body onload="pageLoad();"> <form id="form1" runat="server"> <div id="IMGDIV" style="display:none;position:absolute;left: 35%;top: 25%;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:103;"> <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif"/> <asp:Label ID="Label1" runat="server" Text="Loading...."/> </div> <asp:Button ID="Button1" runat="server" Text="Button1" OnClientClick="OnBeginRequest()" style="z-index: 100; left: 20px; position: absolute; top: 235px" /> <asp:Button ID="Button2" runat="server" Text="Button2" OnClientClick="OnEndRequest();" Style="z-index: 104; left: 163px; position: absolute; top: 235px" /> <asp:Button ID="Button3" runat="Server" Text="Button3" OnClientClick="Test()" Style="z-index: 104; left: 235px; position: absolute; top: 235px" /> </form> </body> </html> Code (markup):
The reason it is not working is because when you click the buttons, the javascript code is being executed but then a postback occurs, the page refreshes, and IMGDIV's display is reset to 'none'. You need to either use HTML buttons (<input>), that is assuming that you don't need any server-side code executed and just want the imgdiv to be displayed... otherwise you need to use AJAX. Like so: <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Panel1.Visible = True 'execute server side code End Sub Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Panel1.Visible = False 'more server side code End Sub Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) MsgBox("Test") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true"> <ContentTemplate> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px" Visible="false"> <div id="IMGDIV" style="position:absolute;left: 35%;top: 25%;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:103;"> <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif"/> <asp:Label ID="Label1" runat="server" Text="Loading...."/> </div> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button1" style="z-index: 100; left: 20px; position: absolute; top: 235px" onclick="Button1_Click" /> <asp:Button ID="Button2" runat="server" Text="Button2" Style="z-index: 104; left: 163px; position: absolute; top: 235px" onclick="Button2_Click" /> <asp:Button ID="Button3" runat="Server" Text="Button3" Style="z-index: 104; left: 235px; position: absolute; top: 235px" onclick="Button3_Click" /> </ContentTemplate> </asp:UpdatePanel> </form> </body> </html> Code (markup): An alternative is to use asp.net AJAX UpdateProgress control to display when loading occurs: <%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) 'pass some time System.Threading.Thread.Sleep(2000) MsgBox("Done") End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true"> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button1" style="z-index: 100; left: 20px; position: absolute; top: 235px" onclick="Button1_Click" /> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1"> <ProgressTemplate> <div id="IMGDIV" style="position:absolute;left: 35%;top: 25%;vertical-align:middle;border-style:inset;border-color:black;background-color:White;z-index:103;"> <asp:Image ID="Image1" runat="server" ImageUrl="~/ajax-loader.gif"/> <asp:Label ID="Label1" runat="server" Text="Loading...."/> </div> </ProgressTemplate> </asp:UpdateProgress> </form> </body> </html> Code (markup):