ajax timercontrols: TreeView + UpdatePanel Problems

Hi there!

I think Imight have come across a bug with theasp:TreeView control when combined with theatlas:UpdatePanel.
If you take the following code, everything works fine:

<%@dotnet.itags.org.PageLanguage="VB"%>
<!DOCTYPEhtml PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<scriptrunat="server">
Protected Sub tv_SelectedNodeChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)
tb.Text = tv.SelectedNode.Text
End Sub
</script>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Tree View Problem</title>
</head>
<body>
<formid="form1"runat="server">
<p>Click on a node of the Treeview below and its text should be put into the text box</p>
<atlas:ScriptManagerrunat="server"ID="scriptManager"EnablePartialRendering="true" />
<asp:TreeViewID="tv"runat="server"OnSelectedNodeChanged="tv_SelectedNodeChanged"ImageSet="XPFileExplorer">
<Nodes>
<asp:TreeNodeText="Books"Value="Books">
<asp:TreeNodeText="Practical C-Sharp"Value="1"></asp:TreeNode>
<asp:TreeNodeText="Mastering VB.Net"Value="2"></asp:TreeNode>
</asp:TreeNode>
<asp:TreeNodeText="Movies"Value="3">
<asp:TreeNodeText="Kill Bill vol. 1"Value="4"></asp:TreeNode>
<asp:TreeNodeText="Dodgeball"Value="5"></asp:TreeNode>
<asp:TreeNodeText="Anchorman"Value="6"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<atlas:UpdatePanelID="up"runat="server">
<ContentTemplate>
<asp:TextBoxID="tb"runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="tv"EventName="SelectedNodeChanged" />
</Triggers>
</atlas:UpdatePanel>
</form>
</body>
</html>

However, things stop working when you either:

CustomSimpleSimple2Bulleted ListBulleted List 2Bulleted List 3Bulleted List 4NewsInboxEventsFaq

I think that the reason for this is because the javascript emitted by the TreeView control is not enclosed in aCDATA section, and that the image array created by the control contains-- e.g.

WebResource.axd?d=9G92-mY7CscAg6O7lwv8PsnId--TqhIqRaQpDEdAXI1&t=632745594511093750

Is there something I'm doing wrong, or is this a bug??
Can anyone find any workarounds?

Thanks,

James

James,

I copied the code into a webform and it works fine. I'm using the January atlas release, and I set the ImageSet to simple, ShowLines=True.

Ditto.

?
-Jarred

Thanks for looking into this! I too am using the January Atlas release and the production release of VS 2005. It seems that there's something else that combines with what I've done to produce my problem...

I am now sure that the problem is caused by WebResource.axd. Unfortunately, in the cut down version I have posted here, it doesn't seem to cause problems, yet in my project with other stuff it does!! Big Smile [:D]

I've been running this through the debugger, and things fail for me in line 7908 of Atlas.js in the this._onFormSubmitCompleted function. The problem is that the XML being returned is not valid XML. In certain instances (which Iyet Embarrassed [:$] cannot reproduce in a postable WebForm), the TreeView control emits the following javascript:

<script type=\"text/javascript\">

</script>

Now the problem with this is that (in this instance) the 2nd resource contains three hyphens "--"... and this is not valid XML, as XMLDom expects this to be -->!! Smile [:)]

The javascript rendered by the TreeView control seems to go completely against the guidelines that MS sets out inhttp://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/ASPNETusStan.asp, where in point 9 under "Creating XHTML Pages" we are told that "The contents of<script> and<style> elements must be wrapped in CDATA sections." Wink [;)]

So at this point in Atlas.js, response.get_data() returns the following:

<delta><rendering><head><title>
Tree View Problem
</title><style type="text/css">
.atlas__delta { font-family:Lucida Console; }
.tv_0 { text-decoration:none; }
</style></head><form name="form1" method="post" action="Default5.aspx" id="form1">
<div>
<input type="hidden" name="tv_ExpandState" id="tv_ExpandState" value="ennennn" />
<input type="hidden" name="tv_SelectedNode" id="tv_SelectedNode" value="tvt6" />
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="tv_PopulateLog" id="tv_PopulateLog" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ3MDQwNDUzNA9kFgICBA9kFgICAw88KwAJAgAPFgYeDU5ldmVyRXhwYW5kZWRkHgxTZWxlY3RlZE5vZGUFBHR2dDYeCUxhc3RJbmRleAIHZAgUKwADZBQrAAIWAh4IRXhwYW5kZWRnFCsAA2QUKwACFgIfA2dkFCsAAhYCHwNnZBQrAAIWAh8DZxQrAARkFCsAAhYCHwNnZBQrAAIWAh8DZ2QUKwACFgQfA2ceCFNlbGVjdGVkZ2RkGAEFHl9fQ29udHJvbHNSZXF1aXJlUG9zdEJhY2tLZXlfXxYBBQJ0dsRdhXgThnE10BW40FEMjizxq93a" />
</div>
<script type="text/javascript">

</script>

<script src="http://pics.10026.com/?src=/AtlasWebSite1/WebResource.axd?d=Yq1-cqrnodOdYLOHDjipoA2&t=632745594511093750" type="text/javascript"></script>

<script src="http://pics.10026.com/?src=/AtlasWebSite1/WebResource.axd?d=8Qz3IJF2us-avEkYWU7p3g2&t=632745594511093750" type="text/javascript"></script>
<script>

</script>
<panelContent id="up"><![CDATA[
<input name="tb" type="text" value="Anchorman" id="tb" />
]]></panelContent>
<script type="text/javascript">

</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWCQKH85qQDwLM76LvDALF75m7CAKHpcXIAgKHpdGjCQKBgIwCApf6maAIApf65ZsHApf68fYP70RolxkG7u2i0qsPezZ/X1yrQs8=" />
</div>
<script type="text/javascript">

</script>
</form></rendering><deltaPanels>up</deltaPanels><xmlScript><page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components />
</page></xmlScript></delta>

But response.get_xml() returns nothing, because it is not valid XML!!

I'm going to try and get a concise reproducable example, but in the meantime, if anyone could comment on the above it would be greatly appreciated!!

Cheers,

James

OK... I've spent a bit more time on this and found out the following information:

The problem is not reproducible with a fixed example.

For anyone that's actually interested...

I raised this as a bug with Microsoft... you can see the gory details athttp://lab.msdn.microsoft.com/productfeedback/viewfeedback.aspx?feedbackid=96bfa645-1b02-4b10-92bd-8aafe70e6d54

But in essence they have said:

Resolved as Duplicate by Microsoft on 2006-02-21 at 10:46:28
Thanks for your feedback regarding the Treeview not emitting javascript in CDATA sections
We plan to fix this problem, but no definite time can be given

Hi,

Is there a work around for this problem, its a show stopper for using Atlas in my project with this bug.

Thanks for any help.

Hi Paul!

Unfortunately, there is no workaround to the control not emitting the CDATA section. MS have known about this for some time (i.e. last summer), but have done nothing with it. Hopefully it will get sorted in SP1 of the framework!

However, if your problems are only being caused by the -- string in the WebResource.axd parameter then you can fix it. Basically, what you'll have to do is create a new project and then copy and paste your existing code into it.

I know this is a huge pain in the backside, but it's the only way around it!!! You might also find that when you come to deploy, it doesn't work... so you then have to uninstall the deployment and redeploy until it does work!!!

Cheers,

James

Hi James,

I am able to work with TreeView Control perfectly without any issues, but it stop working in Firefox after the hit to the child node which calls the partial update to the adjacent panel.

I dont see any javascript error in the Javascript console.
also everything is working absolutely fine in both browsers when i eliminate the Atlas coding.

HEre is the outlined part of the aspx file.
--------

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="Default"EnableEventValidation="false"%>

html>

headid="Head1"runat="server"><title>Duty Station Directory</title><linkhref="site.css"rel="stylesheet"type="text/css"/><linkrel="stylesheet"type="text/css"href="siteprint.css"media="print"/>

head>

SCRIPTlanguage="javascript">

function

scrollTop()

{

document.getElementById(

'RightPanel').scrollTop=0;

}

function

fnTrapKD(btn,event){if (document.all){if (event.keyCode == 13){event.returnValue=false;event.cancel =true;

btn.click();

}

elseif (document.getElementById){if (event.which == 13){event.returnValue=false;event.cancel =true;

btn.click();

}

elseif(document.layers){if(event.which == 13)

{

event.returnValue=false;event.cancel =true;

btn.click();

}

SCRIPT>

body><atlas:ScriptManagerrunat="server"ID="ScpMgr"EnablePartialRendering="true"/><formid="thisFrm"runat="server"><tableclass="PageWidth"><tr><tdclass="Header">Duty Station Directory</td><tdclass="SearchRow"style="width: 45%">

<asp:TextBoxID="txtSearch"runat="server"/><asp:ButtonCssClass="MenuButton"id="btnSearch"Text="Go"runat=serverOnClick="btnSearch_Click"/><atlas:UpdatePanelID="ErrorUpdtPanel"runat="server"Mode="Conditional"RenderMode="Inline"><ContentTemplate><asp:LabelID="lblErr"CssClass="errMessage"Text="Please enter text to search..."runat="server"Visible="false"/></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/></Triggers></atlas:UpdatePanel></td></tr></table><asp:XmlDataSourceID="HCRXML"runat="server"DataFile="~/App_Data/HCRDIR_.XML"TransformFile="~/App_Data/XXXXXXX.xsl"/><tableclass="PageWidth Layout PageTable"><tr><tdclass="TreeLayout"><atlas:UpdatePanelID="UpdatePanel1"runat="server"RenderMode="Inline"Mode="Conditional"><ContentTemplate><divid="TreePanel"runat="server"Class="PageTable PanelTree"><atlas:UpdatePanelID="TreeUpdtPanel"runat="server"RenderMode="Inline"Mode="Conditional"><ContentTemplate><asp:TreeViewID="TreeHCR"runat="server"DataSourceID="HCRXML"OnSelectedNodeChanged="TreeHCR_SelectedNodeChanged"ShowLines="True"ExpandDepth="1"ShowExpandCollapse="true"><DataBindings><asp:TreeNodeBindingDataMember="DutyStationDirectory"PopulateOnDemand="True"SelectAction="SelectExpand"Text="XXXXXXXXXXXXXXXXXX"Value="root"/><asp:TreeNodeBindingDataMember="Country"PopulateOnDemand="True"SelectAction="Expand"TextField="title"ValueField="id"/><asp:TreeNodeBindingDataMember="dsCity"TextField="title"ValueField="id"/></DataBindings><RootNodeStyleCssClass="nodeType rootNode"ImageUrl="~/Images/root.gif"/><ParentNodeStyleCssClass="nodeType parentNode"ImageUrl="~/Images/folder.gif"/><LeafNodeStyleCssClass="nodeType leafNode"ImageUrl="~/Images/page.gif"/><SelectedNodeStyleCssClass="nodeType selectedNode"/></asp:TreeView></ContentTemplate></atlas:UpdatePanel></div></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/></Triggers></atlas:UpdatePanel></td><tdclass="DetailLayout"><atlas:UpdateProgressID="UpdateProgressLabel"runat="server"><ProgressTemplate><imgsrc="Images/indicator.gif"/></ProgressTemplate></atlas:UpdateProgress><asp:Panelid="RightPanel"CssClass="PageTable PanelDetail"runat="Server"><atlas:UpdatePanelID="DetailUpdtPanel"runat="server"Mode="Conditional"RenderMode="Inline"><ContentTemplate><asp:PanelID="DetailPanel"runat="server"><divclass="InfoDetailTable"runat="server"id="divDtls"/></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/><atlas:ControlEventTriggerControlID="TreeHCR"EventName="SelectedNodeChanged"/><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/></Triggers></atlas:UpdatePanel><atlas:UpdatePanelID="SearchResultsUpdtPanel"runat="server"Mode="Conditional"><ContentTemplate><asp:PanelID="SearchPanel"runat="server"><asp:RepeaterID="RepeaterSearchResults"runat="server"OnItemCommand="RepeaterSearchResults_ItemCommand"><HeaderTemplate><H1class="Title">Total Matches found for '<i><%# Keyword %>'</i> : <%# TotalResults %></H1></HeaderTemplate><ItemTemplate><divclass="lightRow"><divclass="links"><asp:LinkButtonID="DetailLink"runat="server"CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Country_Id") + "#" + DataBinder.Eval(Container.DataItem, "dsCode") %> '> <%#DataBinder.Eval(Container.DataItem,"OfficeType") %></asp:LinkButton></div><divclass="Resdetails"> <%#DataBinder.Eval(Container.DataItem,"dsCode") %> -

#DataBinder.Eval(Container.DataItem,"dsCity") %></div></div></ItemTemplate><AlternatingItemTemplate><divclass="darkRow"><divclass="links"><asp:LinkButtonID="DetailLink"runat="server"CommandArgument='<%# DataBinder.Eval(Container.DataItem, "Country_Id") + "#" + DataBinder.Eval(Container.DataItem, "dsCode") %> '> <%#DataBinder.Eval(Container.DataItem,"OfficeType") %></asp:LinkButton></div><divclass="Resdetails"> <%#DataBinder.Eval(Container.DataItem,"dsCode") %> -

#DataBinder.Eval(Container.DataItem,"dsCity") %></div></div></AlternatingItemTemplate></asp:Repeater><divid="Navigation"runat="server"><asp:LinkButtonID="PreviousPageNav"CssClass="leftnav"runat="server"CommandName="Previous"OnCommand="PageNav_Command"><< Previous | </asp:LinkButton><asp:LabelID="PagerLocation"CssClass="numnav"runat="server"/><asp:LinkButtonID="NextPageNav"CssClass="rightnav"runat="server"CommandName="Next"OnCommand="PageNav_Command"> | More>></asp:LinkButton></div></asp:Panel></ContentTemplate><Triggers><atlas:ControlEventTriggerControlID="RepeaterSearchResults"EventName="ItemCommand"/><atlas:ControlEventTriggerControlID="TreeHCR"EventName="SelectedNodeChanged"/><atlas:ControlEventTriggerControlID="btnSearch"EventName="Click"/><atlas:ControlEventTriggerControlID="PreviousPageNav"EventName="Command"/><atlas:ControlEventTriggerControlID="NextPageNav"EventName="Command"/></Triggers></atlas:UpdatePanel>

</asp:Panel></td></tr></table></form>

body>

html>
------------------

I hope someone would have faced the same error and can help me to rectify it.
James

Wednesday, March 28, 2012

TreeView + UpdatePanel Problems

No comments:

Post a Comment

ajax timercontrols

Blog Archive

About Me