I'm trying to do something that sounds fairly simple using ASP.NET 3.5. A user should be able to add a "Community" to the database, and upon checking a box, pick a Parent Community from a DropDown menu that shows only if the check box is checked. For this I used a Panel (initially set to Visible=false) inside an UpdatePanel. My problem is that while it works in IE8 and Chrome (although Chrome reloads the whole page instead of just the div), in Firefox nothing happens. No query is sent at all. I should mention that all the code below is in a User Control page, not just a Web Form.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="CommunityEditing.ascx.cs" Inherits="Folke.Code.Element.CommunityEditing" %>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div class="content">
<asp:Label id="editingFeedback" runat="server" />
<dl>
<dt><%=Folke.Code.Texte.L("Name") %></dt><dd><asp:TextBox ID="name" runat="server" /><br />
<asp:RequiredFieldValidator ID="nameReq" runat="server" ControlToValidate="name" ErrorMessage="Community name is required!" /><br />
</dd>
</dl>
<asp:CheckBox ID="cbToggle" runat="server"
OnCheckedChanged="TogglePanel"
Text="Has a parent community" AutoPostBack="True" />
<asp:UpdatePanel ID="parentCommunityUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel id="parentCommunityPanel" runat="server" Visible="false">
<asp:DropDownList ID="communityListDropDownList" runat="server"/>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="cbToggle" />
</Triggers>
</asp:UpdatePanel>
<asp:Button runat="server" Text="Add" ID="send" onclick="send_Click" />
</div>
The code-behind code is as simple as it gets:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Populate drop down menu
var session = HibernateModule.CurrentSession;
var communityList = from community in session.Linq<Community>()
select community;
communityListDropDownList.DataValueField = "id";
communityListDropDownList.DataTextField = "name";
communityListDropDownList.DataSource = communityList;
communityListDropDownList.DataBind();
}
Response.Cache.SetCacheability(HttpCacheability.NoCache);
}
protected void TogglePanel(object sender, EventArgs e)
{
if (cbToggle.Checked)
{
parentCommunityPanel.Visible = true;
}
else
{
parentCommunityPanel.Visible = false;
}
}
Since this works fine in IE8, I tried to put a very similar code (pretty much identical) in a Web Form, and it works just fine in Firefox. Since the code above is embedded in a MasterPage, then in a Web Form, then a User Control, could all that "stacking" cause issues? I spent hours on this and I just can't find any lead or explanation that make sense.
Edit:
Upon checking the Error Console of Firefox, the browser reports this:
Error: theForm is undefined Source File: http://localhost:54003/EditCommunity.aspx Line: 25
Line 25 is the first if statement of this script:
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>