We help IT Professionals succeed at work.

javascript:__doPostBack not firing button click inside MasterPage

mutlyp
mutlyp asked
on
10,312 Views
Last Modified: 2008-09-03
Built an application that use CSS Picture Buttons. When you click on the picture it fires an OnClick for a hidden button on the page which fires the Buton_Click event in the code behind. Built the site everything worked great. Until I put in inside a MasterPage. Now the PostBack is fired but the Button_Click event is NOT fired.
Can not figure it out. Please help.
Here is my code:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div id="PPEHeader">
    </div>
   
        <span><asp:Button ID="Button1" runat="server" Text="Button" BackColor="White" BorderColor="White" BorderWidth="0px" ForeColor="White" /></span>
        <span><asp:Button ID="Button2" runat="server" Text="Button" BackColor="White" BorderColor="White" BorderWidth="0px" ForeColor="White"/></span>
        <span><asp:Button ID="Button3" runat="server" Text="Button" BackColor="White" BorderColor="White" BorderWidth="0px" ForeColor="White"/></span>
        <span><asp:Button ID="Button4" runat="server" Text="Button" BackColor="White" BorderColor="White" BorderWidth="0px" ForeColor="White"/></span>
    <asp:Button ID="Button5" runat="server" Text="Button" />
     
     <div id="pnlButtons" style="left: 0px; width: 603px; top: 80px; height: 243px">
         <asp:Panel ID="Panel1" runat="server" Height="227px" Width="606px" HorizontalAlign="Center">
             <asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Please Select Your Location:"></asp:Label>
                <div class="ESrollovers">
                    <a  href="#" onclick="javascript:__doPostBack('Button1', '');"  />
                </div>
               
                <!--<div class="PDrollovers">
                    <a  href="#"  onclick="javascript:__doPostBack('Button2', '');" />
                </div>-->
               
                <div class="MProllovers">
                    <a  href="#"  onclick="javascript:__doPostBack('Button4', '');" />
                    alert("HI")
                </div>
                    <a  href="#"  onclick="javascript:__doPostBack('Button2', '');" />
               
                <div class="RBrollovers">
                    <a  href="#"  onclick="javascript:__doPostBack('Button3', '');" />
                </div>
                    <a  href="#"  onclick="javascript:__doPostBack('Button2', '');" />
                    <a  href="#"  onclick="javascript:__doPostBack('Button2', '');" />
               
                 <div class="PDrollovers">
                    <a  href="#"  onclick="javascript:__doPostBack('ctl00_ContentPlaceHolder1_Button5', '');" />
                </div>
               
               
        </asp:Panel>
     </div>
     <ajaxToolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Panel1">
            <Animations>
                <OnLoad>
                    <Sequence>
                        <ScriptAction Script="InitialLoad();" />
                        <FadeIn Duration="2.0" Fps="24" AnimationTarget="Panel1" />
                    </Sequence>
                </OnLoad>
            </Animations>
        </ajaxToolkit:AnimationExtender>
</asp:Content>

Code Behind:

Partial Class Site
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Session("Location") = "El Segundo"
        Session("LocValue") = "21"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        'Response.Redirect("Suggestions.aspx?RouteID=PD", False)
        Session("Location") = "Palmdale"
        Session("LocValue") = "15"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        Session("Location") = "Rancho Bernardo"
        Session("LocValue") = "13"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        Session("Location") = "Moss Point"
        Session("LocValue") = "23"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click

    End Sub
End Class

Thank You
Marr
Comment
Watch Question

brwwigginsIT Manager

Commented:
The IDs of your elements will change. They will now include the master page.
View the source of your page and you will see what I'm talking about. This line from your code "'ctl00_ContentPlaceHolder1_Button5'" seems more like what you would see
CERTIFIED EXPERT
Top Expert 2007
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Top Expert 2007

Commented:
hang on...the rich text editor in EE is messing up my post!...ignore my comment and look at the "code snippet" section...

Commented:
yep...the prefix added by the masterpage is messing your page up.  you have to use the ClientID if I'm correct.  or   $get('<% =control.ClientID %>') to find it...

Author

Commented:
I tried the <%=Button1.ClientID%> but it still did not work.
Code:
Partial Class Site
    Inherits System.Web.UI.Page


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Session("Location") = "El Segundo"
        Session("LocValue") = "21"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        'Response.Redirect("Suggestions.aspx?RouteID=PD", False)
        Session("Location") = "Palmdale"
        Session("LocValue") = "15"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        Session("Location") = "Rancho Bernardo"
        Session("LocValue") = "13"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        Session("Location") = "Moss Point"
        Session("LocValue") = "23"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click

    End Sub


    Protected Sub ctl00_ContentPlaceHolder1_Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub
End Class


<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Site.aspx.vb" Inherits="Site" title="Untitled Page" %>
 


   
   
       
       
       
       
   
     
     
         
             
               
                   
               
               
               
                   
                   
               
                   
               
               
                   
               
                   
                   
               
                 
                   
               
               
               
       
     
     
           
               
                   
                       
                       
                   
               
           
       


Master Page:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Untitled Page
   
   
   
            <script type="text/javascript" src="assets_client/scripts/is/framework.js"></script>
            <script type="text/javascript" src="assets_client/scripts/is/basepage.js"></script>
            <script type="text/javascript" src="assets_client/scripts/custom/basepage.js"></script>
            <script type="text/javascript">      //<![CDATA[
                  var myPage = new Example.UI.BasePage({virtualPath:"pageB.subPage4", clientAssetsPath:"assets_client"});
                  window.onload = myPage.onPageLoad.bindAsEventListener(myPage);
                  //]]>
            </script>
       
            
       
        <script type="text/javascript">
       
    function InitialLoad()    
    {        
        var home = document.getElementById("pnlButtons");        
        home.style.opacity="0";              
        home.style.display="block";            
    }
    </script>
       


    <form id="form1" runat="server" action="#" method="post">
       
       
                        Skip to Content

                        
                              

Northrop Grumman: Defining the Future

                             

Integrated Systems

                             

ESH&M

                       
                        
                              
                                                                        Previous Page

                                    
                                          <input type="hidden" name="Page" id="Page" value="1" />
                                          <input type="hidden" name="QuerySubmit" id="QuerySubmit" value="true" />
                                          <input type="hidden" name="ServerSpec" id="ServerSpec" value="polaris3.northgrum.com:9900" />
                                          <input type="text" name="QueryText" id="QueryText" />
                                          Go
                                    

                              
                              
  • Sector Home
  • What Is PPE?
  • Monthly Form
  • Contractor's Approved Chem List
  • Form 29-98
  • MSDS Search
  • Material Status Viewer
  • CTS
  •                                    <!--
  • (Site Name Here) Home
  • Page A

  •                                           Page B
                                                                                  
  • Page C
  • Page D
  • -->
                             <!--
                                    
                                          

Feature A

                                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi congue tempus orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

                                          Learn More

                                    
                                    
                                          

Feature B

                                         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi congue tempus orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

                                          Learn More

                                    
                              -->
                        
                        
                        
                        El Segundo - PPE
                              
                              
                                    <!--

El Segundo Title V Page

-->
                                    
                                          


        <!--Header-->
                         
                               
                               
                           
                               

                                       
                                  
               
    <!--Footer-->
           
                        
                                                      
                  
    </form>




Please help

Author

Commented:
Hey Guys
I took the entire code and scaled it down to the least amunt of code possible here it is.
The MasterPage:
<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



    Untitled Page
   


    <form id="form1" runat="server">
       
       
   
       
       
   
    </form>



The CSS
body {
}
#Header
{
    width:600px;
    height:75px;
    top:0px;
    left:0px;
    /*background-color:Blue;*/
    position:absolute;
    background-image:url(images/Header.jpg); background-repeat: no-repeat;
   
}
#pnlButtons
{
    top:75px;
    width:600px;
    height:200px;
    /*position:absolute;*/
    /*text-align:left;*/
}
/*#pnlButtons
{
    display:none;
}

#pnlButtons
{
    position:absolute;
    top:80px;
    left:0px;
    width:600px;
    height:200px;    
}
*/
#pnlButtons .ESrollovers a
{
   
      height:191px;
      width:150px;
      display:block;
      background:url(images/ESRollOverButton.jpg) no-repeat
}
#pnlButtons .ESrollovers a:hover{
      background-position:bottom
}
#pnlButtons .ESrollovers
{
    float:left;
      height:191px;
      width:150px;
      /*margin:0 40px 20px;*/
      background:url(images/ESRollOverButton.jpg) no-repeat
}

#pnlButtons .PDrollovers a
{
   
      height:191px;
      width:150px;
      display:block;
      background:url(images/PDButtonRollOver.jpg) no-repeat
}
#pnlButtons .PDrollovers a:hover{
      background-position:bottom
}
#pnlButtons .PDrollovers
{
    float:left;
      height:191px;
      width:150px;
      /*margin:0 40px 20px;*/
      background:url(images/PDButtonRollOver.jpg) no-repeat
}

#pnlButtons .RBrollovers a{
      height:191px;
      width:150px;
      display:block;
      background:url(images/RBButtonRollOver.jpg) no-repeat
}
#pnlButtons .RBrollovers a:hover{
      background-position:bottom
}
#pnlButtons .RBrollovers
{
    float:left;
      height:191px;
      width:150px;
      /*margin:0 40px 20px;*/
      background:url(images/RBButtonRollOver.jpg) no-repeat
}

#pnlButtons .MProllovers a{
      height:191px;
      width:150px;
      display:block;
      background:url(images/MPButtonRollOver.jpg) no-repeat
}
#pnlButtons .MProllovers a:hover{
      background-position:bottom
}
#pnlButtons .MProllovers
{
    float:left;
      height:191px;
      width:150px;
      /*margin:0 40px 20px;*/
      background:url(images/MPButtonRollOver.jpg) no-repeat
}


The Page:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" title="Untitled Page" %>


   
   
       
       
       
       
   
     
     
         
             
               
                   
               
               
               
                   
                   
               
                   
               
               
                   
               
                   
                   
               
                 
                   
               
               
               
       
     
     
           
               
                   
                       
                       
                   
               
           
       


and the code behind:
Partial Class Default2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        Session("Location") = "El Segundo"
        Session("LocValue") = "21"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click
        'Response.Redirect("Suggestions.aspx?RouteID=PD", False)
        Session("Location") = "Palmdale"
        Session("LocValue") = "15"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click
        Session("Location") = "Rancho Bernardo"
        Session("LocValue") = "13"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click
        Session("Location") = "Moss Point"
        Session("LocValue") = "23"
        Response.Redirect("PPEs.aspx", False)
    End Sub

    Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click

    End Sub


    Protected Sub ctl00_ContentPlaceHolder1_Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs)

    End Sub
End Class


If you could test it on your machine and see if it works for you. It does not for me.
Please help this is driving me crazy.
Thanks
Matt

Author

Commented:
Hey Guys Figured it out. It's not <%=Button1.ClientID%>
It's <%=Button1.UniqueID%>

But I will give the points to samtron for pointing me in the right direction.
Thanks for all your help.
Thanks
CERTIFIED EXPERT
Top Expert 2007

Commented:
The new EE rich text feature is messing up the code you posted...so I'm just going to post everything in the code box

From the looks of it, you are trying to tap into __dopostback here:
  <div class="ESrollovers">
                    <a  href="#" onclick="javascript:__doPostBack('Button1', '');"  />
                </div>
 
simply to apply the css class?
 
since your button:
<asp:Button ID="Button1" runat="server" Text="Button" BackColor="White" BorderColor="White" BorderWidth="0px" ForeColor="White" />
 
looks like you're trying to hide it?
 
have you tried applying your class to the button itself?
<asp:Button ID="Button1" runat="server" Text="" CssClass="ESrollovers" />
 
or using a LinkButton instead?
 
then you can avoid using the __doPostBack alltogether...

Open in new window

CERTIFIED EXPERT
Top Expert 2007

Commented:
Matt,

Glad you got it working and I appreciate the pts.
But I'd still recommend you look into not using __doPostBack unless you absolutely have to.
I don't think this is one of those "absolute" scenarios.
__doPostBack is a js function that is written and controlled by the Framework and while this technique works, it can fail and be unreliable in certain cases...
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.