Monday, March 26, 2012

UpdatePanel & Javascript errors with IE6

Hey all,

I have a situation where IE6 is raising a javascript error when an explicit update is called on an Update Panel. This javascript error is not occuring in IE7.

Sample code:

<asp:Panel ID="pnlTop" runat="server">
<asp:UpdatePanel ID="P1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" />
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
</triggers>
</asp:UpdatePanel>
</asp:Panel>

<asp:UpdatePanel ID="P2" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:Label ID="lblMessage" runat="server"/>
</contenttemplate>
</asp:UpdatePanel>

When the save button is clicked the message label is updated and then P2.Update() is called. After that call the javascript is raised. The error is "Object Required". When copying the source into a new document I found that the javascript error is occuring on line (character 54):

<script src="http://pics.10026.com/?src=/WebSite1/ScriptResource.axd?d=ByzgXzbGH3ZqKin-YeaiDPksh3G5qf6KEmh6_FByY0ObVFNa8fdxaMMV3A5WST0csFvE5xX_Q-hRVgFxdxZuDNJQH1bIQXD3YKn2mnuineY1&t=633136335074313023" type="text/javascript"></script>

If I comment out the P2.Update() the javascript error doesn't occur, but the message label is not updated. I have toyed with theChildrenAsTriggersproperty but I'm not exactly sure how that should be configured. Note that we need the error message label to appear outside of the asp:panel so that the message appear beneath the border of the asp:panel object.

I hope that is enough information...

TJ

If the button is the only thing in P1, then you don't need P1 at all. The <Triggers> collection with btnSave as an AsynchPostBackTrigger should be part of P2, not P1.

As for the javascript, I'm not sure what's going on. Are you calling any javascript? What is happening in the btnSave_Click event of the code-behind?


There are a couple of other triggers in P1 that are needed: triggers for button clicks on a modal popup window, and a trigger for a cancel button. This javascript error also is raised when the button clicks on the Modal Popup window are handled.

The save button is posting data from the screen to the database, updating the message label with a "Save Successful" message and then calls P2.Update().

protected void btnSave_Click(object sender, EventArgs e)
{
Page.Validate();

if (Page.IsValid)
{
... Save Data ...

lblMessage.Text = "Save Succesful";
}
else
{
lblMessage.Text = ProcessValidatorsOnPage(Page.Validators);
}

P2.Update(); // JAVASCRIPT ERROR
}

The modal popup window is raising an event: public event EventHandler Popup_SelectionMade;

This page is handling this event:

public void LookupControl_Popup_SelectionMadeobject sender, EventArgs e)
{
// after the lookup is closed, reset the message
lblMessage.Text = string.Empty;

// update the panel that contains the error message
P2.Update(); // JAVASCRIPT ERROR
}

The identical javascript error is raised when the P2.Update() is called in this method as well...


Using your abbreviated example, try it like this and remove the P2.Update():

<asp:Panel ID="pnlTop" runat="server">
<asp:UpdatePanel ID="P1" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" />
</contenttemplate>
</asp:UpdatePanel>
</asp:Panel
<asp:UpdatePanel ID="P2" runat="server" UpdateMode="Conditional">
<contenttemplate>
<asp:Label ID="lblMessage" runat="server"/>
</contenttemplate>
<triggers>
<asp:AsyncPostBackTrigger ControlID="btnSave" />
</triggers>
</asp:UpdatePanel>
That's basically the declarative way of saying that P2.Update() should happen anytime btnSave raises an event. So, if lblMessage is modified in btnSave_Click, its update will now come through as you'd expect.

Thanks for the response. I did try that but the same error was happening.

I managed to figure out that the call behind the scenes to update P1 was causing the problem.I did manage to solve the problem though.

I changed:

- the Mode on P1 to Always,

- moved all triggers on the page to P2, and

- removed all calls to update P1 (P1.Update();) in the code-behind

The problem has since disapeared.

For some reason IE6 did not like the reference to first update panel's update method...so now the screen still functions in IE7 and no more JS errors.

No comments:

Post a Comment