asked on

javascript:__doPostBack not firing button click inside MasterPage

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="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

brwwiggins

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

ASKER CERTIFIED SOLUTION

samtran0331

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

samtran0331

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

silemone

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...

mutlyp

ASKER

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

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

-->

</form>

Please help

mutlyp

ASKER

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

mutlyp

ASKER

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

samtran0331

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

samtran0331

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...