UpdatePanel "kind of" Hidding DIVs

The Update pannel is kind of hidding the divs within it. I said kind of because either VMD2005ED or VS2005 "sometimes" shows errors if the div control is used in the codebehind. And even though when the errors are shown I go ahead and run it with errors and it works fine. But is very unconfortable to get this error messages everytime. I mean, in the codebehind th div has intellisense and all, but the undeclared error BC30451 still shows.

For example:

apsx file:

<atlas:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<div id="div1" runat="server">
test
</div>
</ContentTemplate>
</atlas:UpdatePanel>

aspx.vb file

div1.visible = false

Would trigger error: error BC30451: Name 'div1' is not declared. But it would run ok and the div would be invisible.

Is there anything like:Div div1 =upTest.FindControl("div1") as Div;. (although the DIV is not a control, or is it?)

so i don't get the errors or what can i do?? Is this bug gonna be fixed??

Thanks,

Diego

Maybe instead of using <div id="div1" runat="server">, try using <asp:Panel id="panel1" runat="server"> because they are rendered as divs in the emitted html. I didn't try it but you should be able to search using the FindControl method for the panel control.

It's an option, but feel more comfortable having control of the rendered html, so if there is a way it will be great, if not, this approach (if it works) will do it.

I don't think it's a good idea to refer to the div by its name directly. You should do document.getElementById('div1') to get to it. The main reason is that since it's in the UpdatePanel it can get updated, and I think that when that happens the direct reference that you were using will break.

Thanks,

Eilon

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.