Wednesday, March 21, 2012

Partial Rendering and Javascript

Hello Again,
I would like to point out an additional bug regarding my previous post (rendering JavaScript while using Atlas Partial Rendering);

1. Dynamically rendered script which returns to the client Atlas framework after performing a partial update isn't evaluated.
The simplest case could be a javascriptalert(msg)not being called if rendered dynamically usingPage.ClientScript.RegisterClientScript(...).
This apparently simple bug causesmanyproblems with in-house and commecial WebControls that must render Javascript in order to function.

2. An additional question. I noticed that OnPreRender is called on an UpdatePanel even if it wasn't updated (while using Condition update-mode, of course). Should it be so ?

Thanks Again,
Waiting for a response,
Lidor Pergament.

My Previous Post (unanswered yet)

"Hello,

After a week of Atlas Partial Rendering integration experiments with my team's WebApplication,
I would like to note out a few bugs and problematic issues.
(The main effort is on replacing our existing complex Client-Server MVC model and Client-Server Context-Sensitive UI model with simple server-side models, using Partial Rendering)

1. Dynamically registered / Static Javascript which contains "&&" operators or<!-- --> Xml comment tags, Larger Than, Smaller Than<> operators causes the Partial Rendering to fail (without any notification).
I assume this is because the partial rendering response is returned as an XML document and these characters are special Xml entities, which cause the Xml parser to treat them specially.
Maybe you could wrap all the Dynamically registered script (Page.ClientScript.RegisterXXXScript) with aCDATA element like with the content returned from the Update Panels ?

2. The previous issue also occurs when trying to render a <style href= type=stylesheet /> or <?XML Import=...> element dynamically.

2. Javascript syntax errors also cause the Partial Rendering to fail without any notification.
I noticed the bug when i accidently rendered anIF statement without a code block and curly brackets.

3. The DHTML event ondocumentready and similar document/body level events aren't fired when using partial rendering. This causes some issues with Controls that depend on these events to initialize.

4. Calling Update() on an UpdatePanel manually works only before the OnLoadComplete event.
Calling Update during the OnLoadComplete raises an Exception but strangely calling Update() from a later event, such as OnPreRender doesn't raise an Exception at all.

5. Is it possible to Create and Register UpdatePanels dynamically from Code-Behind? i tried to use ScriptManager.RegisterUpdatePanel but strangely this caused the partial rendering to fail.

6. The HttpContext.Current.Request isn't accesible during Partial Rendering.

Thanks,

Lidor Pergament."

>>Dynamically rendered script which returns to the client Atlas >>framework after performing a partial update isn't evaluated.
>>The simplest case could be a javascriptalert(msg)not being called if >>rendered dynamically usingPage.ClientScript.RegisterClientScript>(...).

which browser are u using? This trouble was with firefox but not with IE and also, it has been resolved with april CTP.


Actually, I'm using Internet Explorer.
I'll check the April CTP.

Regarding the Dynamically registerd javascript i noticed, today, in the Atlas.js script file that dynamically registered scriptsare treated, BUT the XPath used to search for script elements in the response xml is

"/rendering/script/[@.type='text/javascript']"

meaning if i had a script registered with out the type attribute in the script element, <script> code... </script> it would be ignored and wouldn't be evaluated.

I replaced all my script elements to match <script type='text/javascript'> and surpringly the scripts seemed to work... wooof what a relieve.

Was this resolved in the April CTP ?

Lidor.


i always put type attribute in script tag. I dont think this was the problem which was solved in april ctp. I thought its some thing different. Anyways.. Its good that u have come out of trouble.
I definitely agree that there is some problem with Javascript an UpdatePanels with partial rendering. Refer to http://forums.asp.net/thread/1271593.aspx.

I've also seen that partial rendering stopped working when you include certain javascript source files. In the following code sample:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Geo-Spacial Asset Management</title> <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="css/DragNDropMasterPanel.css"> <link href="css/submodal.css" rel="stylesheet" type="text/css" /> <link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" /> <style type="text/css" media="screen"><!-- .Compass { width: 54px; height: 54px; background: url(images/compass.gif); margin: 0px; cursor: pointer; } .ZoomBar { position: relative; background: url(images/bar.gif); width: 103px; height: 20px; margin: 2px; overflow: hidden; } .ZoomBar_slider { position: absolute; background: url(images/slider.gif); width: 7px; height: 20px; overflow: hidden; display: block; } .Dashboard { position:absolute; border:1px solid #cbcbcb; background-color:black; filter:alpha(opacity:90); opacity:0.9; z-index:100; padding:2px; overflow:visible; font-family:Verdana,sans-serif; font-size:7.5pt; } --> </style> <![if !IE]><script src="http://local.live.com/JS/AtlasCompat.js"></script><![endif]> <script src="scripts/submodalsource.js" type="text/javascript"></script></head><body> <form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> <ErrorTemplate> <h1>Error</h1> </ErrorTemplate> </atlas:ScriptManager> <a onclick="AddLocation();">AddNew</a> <a onclick="OnFinishAddLocation(null);">Refresh</a> <atlas:UpdatePanel ID="pnl0" runat="server" Mode="conditional" > <ContentTemplate> <asp:Button ID="btnRefresh" runat="Server" OnClick="OnGridRefresh" Text="refresh" style="width:0px;height:0px"/> </ContentTemplate> </atlas:UpdatePanel> <atlas:UpdatePanel ID="pnl" runat="server" > <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" DataKeyNames="AssetLocationID" > <Columns> <asp:TemplateField> <ItemTemplate> <asp:Panel CssClass="popupMenu" ID="PopupMenu" runat="server"> <div style="border:1px outset white">  <a href="#" onclick='EditLocation(<%# Eval("AssetLocationID")%>);'>Edit</a>  <br />  <asp:LinkButton ID="LinkButton2" runat="server" CommandName="Delete" Text="Delete"></asp:LinkButton>  </div> </asp:Panel> <asp:Panel ID="Panel9" runat="server" Width="100%"> <table width="100%"> <tr> <td ><asp:Label Font-Bold="true" ID="Label1" runat="server" Text='<%# Bind("LocationRegion")%>'></asp:Label></td> </tr> </table> </asp:Panel> <atlasToolkit:HoverMenuExtender ID="hme2" runat="Server"> <atlasToolkit:HoverMenuProperties HoverCssClass="popupHover" PopupControlID="PopupMenu" PopupPosition="right" TargetControlID="Panel9" PopDelay="25"/> </atlasToolkit:HoverMenuExtender> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:assetsConnectionString%>" DeleteCommand="DELETE FROM TBL_LOCATION WHERE (AssetLocationID = @.AssetLocationID)" SelectCommand="SELECT * FROM TBL_LOCATION" SelectCommandType="Text"> <DeleteParameters> <asp:Parameter Name="AssetLocationID" /> </DeleteParameters> </asp:SqlDataSource> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="btnRefresh" EventName="Click" /> </Triggers> </atlas:UpdatePanel>  <input id="Text1" type="text" /> </form> <script type="text/javascript">function EditLocation(locId){ var url = "dialogs/editlocations.aspx?LocationID=" + locId + "&Action=edit"; showPopWin(url, 400, 250, OnFinishAddLocation);} function OnFinishAddLocation(result){ form1.btnRefresh.click();}function AddLocation(){ var center_latitude = "-110.0902902"; var center_longitude = "78.0891821"; var zoom_level = "12"; var url = "dialogs/editlocations.aspx?LocationID=-1&Action=insert&Latitude=" + center_latitude + "&Longitude=" + center_longitude + "&ZoomLevel=" + zoom_level; showPopWin(url, 400, 200, OnFinishAddLocation);} </script> </body></html>
Partial rendering doesn not work- the gridview is not updated when you click the btnRefresh button. IF I remove
 <![if !IE]><script src="http://local.live.com/JS/AtlasCompat.js"></script><![endif]
It will start working. If I re-insert the src, it stops. I'm not sure if the developers read these two forums often enough. The developers in the Tookkit forum is much more active, it seems. I started a web site, and now I've halted development because of these unknown issues.
If you're doing a straight Atlas example, all works well, but once you start adding additional scripts, and integrate with other stuff,
there seems to be some issues--side effects--that break things.

Just a note-I'm using the April CTP. I know it is still a work in progress, but without feedback from the devs,
I'm not sure if it will be fixed at all.


One more thing to note, if I inserted an UpdateProgress, I can see it execute each time, but for some reason , the gridview doesn't update when that source is included.

include that script , which is causing the error and call UpdatePanel.Update() in server side code to see if it helps you.

BTW, what kinda website u r working on? Just curious. I am also working on a web site and had a few problems wid atlas as well.


HiShahzadAhmed, thanks. I'm integrating the Atlas UI and MS Virtual Earth control to create an app that manages/monitor/control spacially dispersed assets in an organization with multiple sites. My expertise is in web based visualization and control of plant assets (accross a wide range of industries), and I thought VE & Atlas would provide some "new" and dynamic ways to interact with the assets--over and beyond what I've used in the past. The intent is to create a prototype and see how it goes...These types of sites are always not exposed to the web, because of the sensitive information it contains (to the organization), so it is not something I can "show off" when I'm doneSad [:(]

What's your site about, if you don't mind me asking?

Just tried UpdatePanel's Update() method, but with no change in the results.

hmm... can u make sure if its postingback to the server , using debugging.

I have developing a Team managment system which features hour tracking , task list and some other stuff. It s currently in beta testing mode. I will show it to u, when it gets live. We have used atlas and library at script.aculo.us to cope with the challenges. Script aculo provides some good drag drop funcationality, without writting much of the code.


It is posting back. If I set a break point, I can break to the DataBind() call just fine.

its strange really. Cant say any thing about it.


Ok, from various comments in this and other posts, it seems that if you have characters that are not xml friendly (or has special meaning to xml), then these can stop the xml parsing in the page--which stops rendering to the client. Also, searching on the web, it seems if you have script blocks, if you put them into javascript source files and call these through script includes with the src property set to the path, it will escape these kinds of characters. I've tried encapsulating the code blocks in CDATA sections and this doesn't seem to work. The include worked.

No comments:

Post a Comment