UpdatePanel + javascript

Hi,

I have an UpdatePanel that I want to update on a timer. That update panel, I want to replace w/ the 3rd party control. Unfortunately, the rendered output from the 3rd party control is rather complicated w/ a great deal of javascript. Can you dynamically inject javascript into an UpdatePanel?

Hi,

You should be able to place any control inside an UpdatePanel and it should work just fine, even if it renders JavaScript to the browser. There's no need to directly inject JavaScript into the panel. As long as the control uses Page.ClientScript.RegisterXXXScript() to render the script, it should work.

Thanks,

Eilon

Thanks,

The issue appears to be with the control that I am using. The control is the Eeeksoft popup window which is a DTHML div popup. It doesn't seems to be working in the UpdatePanel with a timer and in partial rendering mode. I think there are similar issues when trying to use Infragistics in the UpdatePanel.

-Bob

Thanks for the feedback. There are some bugs that we have fixed for our next release, however certain controls still don't work properly, and we are investigating them.

Thanks,

Eilon

A possible cause for your problem may be the control renders javascriptoutside of any functions. I don't know what the proper term for thisscript is, so I'll just call it inline script. Outside of AJAX thisjavascript would normally be executed during the page load (or directlyafter .. I don't know). This javascript may be used to setup thecontrol, or apply styling to it or something else.

The problem is it seems that Firefox and IE both don't execute theinline script when Atlas replaces the contents of the updatepanel withthe reply from the server.

Example:

If you take the code below:

 <atlas:scriptmanagerrunat="server"enablepartialrendering="true"/>

 <atlas:timercontrolrunat="server"interval="5000"id="Timer"></atlas:timercontrol>

 <atlas:updatepanelrunat="server"id="updatePanel">

   <triggers>

     <atlas:controleventtriggercontrolid="Timer"eventname="Tick"/>

   </triggers>

   <contenttemplate>

     <divid="javascriptPanel">

        You don't have javascript enabled.

     </div>

     <scripttype="text/javascript">

        document.getElementById('javascriptPanel').style.display='none';

     </script>

   </contenttemplate>

 </atlas:updatepanel>

the first time this page is rendered, you shouldn't see a thing (assuming you have javascript enabled). But after 5 seconds the page will update and the javascript in the update panel is not executed a second time and hence you will see a message stating that you don't have javascript enabled.

This problem isn't limited to Atlas, I've seen it with Teleriks Callback control and Anthems Panel.

Teleriks Callback control does have a property 'evaljavascript' which when set to true will parse the contents of the AJAX updated sections and execute the javascript.

I don't know if Atlas has this capability. Thats what I'm looking into for myself now.

Andrew Davey:

A possible cause for your problem may be the control renders javascript outside of any functions...

Hello!

I'm having the same problem with the EeekSoft Popup control. I try to register an alert script:

Page.RegisterStartupScript("mypopup", "<script type='text/javascript'>alert('alert timer');</script>");

and it works. The alert window appears at the timer interval. I think the problem is on the Popup Control. If you look at the Javascript code you see the property onload:

var oldOnLoad=window.onload;

window.onload=espopup_anchorInit;

This only execute the "[id]espopup_ShowPopup(show)" Javascript function on the Onload event of the document. When the Atlas engine make a partial postback, the onload event doesn't fire again.

I'm trying to solve this issue, modifying the Javascript of the PopUp Control, with the respective credits to Tomas Petricek.

Regards,

Paulo Alves.

ASP.net Developer

www.pauloalves.net

hello.

well, this is not really an atlas issue. try running the following page:

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

head><title>Untitled Page</title>

</

head>

<

body><divid="panel"></div><inputtype="button"id="bt"value="click"onclick="h()"/><scripttype="text/javascript">function h()

{

document.getElementById(

"panel").innerHTML ="<script type='text/javascript'>alert();<\/script>";

}

</script>

</

body>

</

html>

do you see the msg box? no, because you just can't add script nodes to a document with the innerhtml property. that is what is hapenning when you put those client script code inside the update panel. using fiddler confirms that the <script> block is indeed beeing passed back from the server but is placed on the wrong section...

if you want your script to be allways run , then you mus use the clientscriptmanager class (you can access it from the page by using the clientscript property) to register your script. when you do this, your script will be added to a special section and it'll allways be executed on the client side. here's your page built with this new approach:

<%

@.PageLanguage="C#" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

scriptrunat="server">protectedoverridevoid OnLoad(EventArgs e)

{

base.OnLoad(e);this.ClientScript.RegisterStartupScript(this.GetType(),"test","document.getElementById('javascriptPanel').style.display = 'none';",true);

}

</

script>

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><atlas:ScriptManagerID="Scriptmanager1"runat="server"EnablePartialRendering="true"/><atlas:TimerControlrunat="server"Interval="5000"ID="Timer"></atlas:TimerControl><atlas:UpdatePanelrunat="server"ID="updatePanel"><Triggers><atlas:ControlEventTriggerControlID="Timer"EventName="Tick"/></Triggers><ContentTemplate><divid="javascriptPanel">

You don't have javascript enabled.

</div></ContentTemplate></atlas:UpdatePanel><scripttype="text/javascript"src="Atlas.js"></script></form>

</

body>

</

html>