Sunday, March 11, 2012

UpdatePanel and triggers problem: not firing events?

Are the controlscustomerDropDown and labelDropDowninside or outside the UpdatePanel?


I have the same problem except I haven't been able to get it to trigger at all. I have a dropdown inside my updatepanel and trying to update a label that is also inside my updatepanel. 

<asp:UpdatePanel ID="upnlSeason" runat="server"> <ContentTemplate> <tr> <td align="center" class="normallabel">Select a team:  <asp:DropDownList ID="ddlTeams" runat="server" SkinID="NormalDropdown" Width="225px" AutoPostBack="true" OnSelectedIndexChanged="ddlTeams_SelectedIndexChanged"></asp:DropDownList></td> </tr> <tr> <td align="center" class="normallabel">Select a season:  <asp:DropDownList ID="ddlSeasons" runat="server" SkinID="NormalDropdown" Width="225px"></asp:DropDownList></td> </tr> <tr> <td align="center"><asp:label id="Label1" runat="server" SkinID="ErrorLabel" EnableViewState="true"></asp:label></td> </tr> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlTeams" EventName="SelectedIndexChanged" /> </Triggers></asp:UpdatePanel>

I realized that the dropdown was inside my updatepanel. So, I made the trigger not Async and it works fine. However, I tried putting the dropdown outside the panel, and then using the AsyncTrigger and it didn't update the panel.

What am I missing? I have codebehind that simply sets the label on SelectedIndexChanged.


Hi,

It's working fine inside or outside the UpdatePanel. Here is my code:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { } protected void ddlTeams_SelectedIndexChanged(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="upnlSeason" runat="server"> <ContentTemplate><table> <tr> <td align="center" >Select a team: </td> </tr> <tr> <td align="center" >Select a season: <asp:DropDownList ID="ddlSeasons" runat="server" Width="225px"></asp:DropDownList></td> </tr> <tr> <td align="center"><asp:label id="Label1" runat="server" EnableViewState="true"></asp:label></td> </tr></table> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlTeams" EventName="SelectedIndexChanged" /> </Triggers></asp:UpdatePanel>   <asp:DropDownList ID="ddlTeams" runat="server" Width="225px" AutoPostBack="true" OnSelectedIndexChanged="ddlTeams_SelectedIndexChanged"> <asp:ListItem Text="1" Value="1"></asp:ListItem> <asp:ListItem Text="2" Value="2"></asp:ListItem> <asp:ListItem Text="3" Value="3"></asp:ListItem> </asp:DropDownList> </div> </form></body></html>

You need to do this in a content page and let me know your results. That's where it doesn't work. I can get it to work in a stand alone page but when it is in a content page, the entire page postsback. I have tried putting the ScriptManager in the master page or in the content page and it doesn't matter.

Please try that and let me know your results.

Thanks,

Greg


Greg, it still works.

Don't just update a label and try loading another dropdown in the updatepanel. Then, you might see my problem.

OK. Here is my problem. I was able to get the event to fire but it is not updating my dropdown that is in the UpdatePanel. Here is my content page:

<%@. Page Language="vb" AutoEventWireup="false" MasterPageFile="~/SFNFL.Master" CodeBehind="teams.aspx.vb" Inherits="SFNFLv2.teams" StylesheetTheme="default" %><%@. Register Assembly="System.Web.Extensions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %><asp:Content ID="Content1" ContentPlaceHolderID="ctMain" runat="server"><asp:ScriptManager ID="scriptMgr" runat="server" EnablePartialRendering="true" /><table cellspacing="2" cellpadding="2" class="contenttable"> <tr> <td align="left" class="pagetitle"> My Teams and Drivers</td> </tr> <tr> <td class="td_h10"></td> </tr> <tr> <td align="center" valign="top" class="normallabel"> Here are your current teams and drivers.</td> </tr> <tr> <td align="center"><asp:label id="lblError" runat="server" SkinID="ErrorLabel" EnableViewState="False"></asp:label></td> </tr> <tr> <td class="td_h5"></td> </tr></table><table cellpadding="2" cellspacing="2" class="contenttable"> <tr> <td align="right" class="td_w40">Select a team:</td> <td align="left" class="td_wauto"> <asp:DropDownList ID="ddlTeams" runat="server" SkinID="NormalDropdown" Width="225px" AutoPostBack="true" OnSelectedIndexChanged="ddlTeams_SelectedIndexChanged"></asp:DropDownList></td> </tr> <asp:UpdatePanel ID="upnlSeason" runat="server"> <ContentTemplate> <tr> <td align="right" class="td_w40">Select a season:</td> <td align="left" class="td_wauto"> <asp:DropDownList ID="ddlSeasons" runat="server" SkinID="NormalDropdown" Width="225px"></asp:DropDownList></td> </tr> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="ddlTeams" EventName="SelectedIndexChanged" /> </Triggers> </asp:UpdatePanel> <tr> <td align="center" colspan="2"> <asp:Label ID="lblNoTeamsMsg" runat="server" SkinID="MessageLabel">You currently have no teams associated with your account. Please use the entry form to submit a team.</asp:Label></td> </tr></table></asp:Content>

And my Codebehind event:

Protected Sub ddlTeams_SelectedIndexChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)If ddlTeams.SelectedIndex <> -1Then LoadSeasons()End IfEnd Sub

I have verified that LoadSeason() method is returning 7 rows that should be in the dropdown. What am I missing here? I I move the ddlTeams dropdown inside the UpdatePanel and remove the triggers, then the whole page postback. I have tried variations of EnablePartialRendering and UpdateMode='Conditional' and did not see any difference. Is this even possible?

All I want to do is update a 2nd dropdown inside an updatepanel from the first dropdown. Whether it is inside the updatepanel or not, I don't care as long as it works. This can't be this hard.

Thanks,
Greg


Hi Greg,

The reason seems to be that the UpdatePanel isn't in a well formatted htmltable.

Please try this:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
 protected void Page_Load(object sender, EventArgs e)
 {
 //if (ddlSeasons.SelectedIndex == -1)
 //{
 LoadSeasons();
 //}
 }
 protected void LoadSeasons()
 {
 ddlSeasons.Items.Clear();
 for (int i = 0; i < 5; i++)
 {
 ddlSeasons.Items.Add(ddlTeams.SelectedValue + " " + i.ToString());
 }
 }
 protected void ddlTeams_SelectedIndexChanged(object sender, EventArgs e)
 {
 }
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
 <title>Untitled Page</title>
</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="scriptMgr" runat="server" EnablePartialRendering="true" />
<table cellspacing="2" cellpadding="2" class="contenttable">
 <tr>
 <td align="left" class="pagetitle">
 My Teams and Drivers</td>
 </tr>
 <tr>
 <td class="td_h10"></td>
 </tr>
 <tr>
 <td align="center" valign="top" class="normallabel">
 Here are your current teams and drivers.</td>
 </tr>
 <tr>
 <td align="center"><asp:label id="lblError" runat="server" SkinID="ErrorLabel" EnableViewState="False"></asp:label></td>
 </tr>
 <tr>
 <td class="td_h5"></td>
 </tr>
</table>
<table cellpadding="2" cellspacing="2" class="contenttable">
 <tr>
 <td align="right" class="td_w40">Select a team:</td>
 <td align="left" class="td_wauto">
 <asp:DropDownList ID="ddlTeams" runat="server" SkinID="NormalDropdown"
 Width="225px" AutoPostBack="true" OnSelectedIndexChanged="ddlTeams_SelectedIndexChanged">
 <asp:ListItem>team1</asp:ListItem>
 <asp:ListItem>team2</asp:ListItem>
 <asp:ListItem>team3</asp:ListItem>
 </asp:DropDownList></td>
 </tr>
<tr><td colspan="2">
 <asp:UpdatePanel ID="upnlSeason" runat="server">
 <ContentTemplate><table>
 <tr>
 <td align="right" class="td_w40">Select a season:</td>
 <td align="left" class="td_wauto">
 <asp:DropDownList ID="ddlSeasons" runat="server" SkinID="NormalDropdown" Width="225px"></asp:DropDownList></td>
</tr></table>
 </ContentTemplate>
 <Triggers>
 <asp:AsyncPostBackTrigger ControlID="ddlTeams" EventName="SelectedIndexChanged" />
 </Triggers>
 </asp:UpdatePanel></td></tr>
 <tr>
 <td align="center" colspan="2">
 <asp:Label ID="lblNoTeamsMsg" runat="server" SkinID="MessageLabel">You currently have no teams
 associated with your account. Please use the entry form to submit a team.</asp:Label></td>
 </tr>
</table>
 </form>
</body>
</html>

Thanks Raymond. That appeared to be the problem. I don't understand why since you should be able to just put what you want inside the updatepanel and be done with it but oh well. I guess it is required for the updatepanel to know what to partially update.

So, the answer is to make sure that you have a well formed table inside the updatepanel if you are using tables.

Thanks,
Greg


Actually, if you watch the http traffic you'll find that the request and response are all there.

But if the element isn't in well formated html tag, the client side framework fails to find the element and unable to update its content.

Posted by spectatorertg at 12:11 AM

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)