1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Calling Java Script function from ASP page

Discussion in 'C#' started by snufse, Sep 23, 2010.

  1. #1
    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):
     
    snufse, Sep 23, 2010 IP
  2. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2
    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):
     
    camjohnson95, Sep 24, 2010 IP
  3. prptl709

    prptl709 Guest

    Messages:
    83
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for giving coding.
     
    prptl709, Mar 1, 2011 IP