Tuesday, August 19, 2008

Dynamic Javascript in an Update Panel - A Better Way

Last post was about how dynamic javascript in the update panel was not being re-executed on a partial postback.  I have a better way of making it execute -- parse the controls in the UpdatePanel and call the javascript method eval().

Here is the hook:

Page.ClientScript.RegisterStartupScript(this.GetType(), "LoadHandler", "function LoadHandler(){EvalScript($get('" + updatePanel.ClientID + "'),'scriptId');};\r\n", true);

Page.ClientScript.RegisterStartupScript(this.GetType(), "AddLoadHandler", "Sys.Application.add_load(LoadHandler);\r\n", true);

EvalScript looks like this:

function EvalScript(control, id)
 for(var n=0;n<control.children.length;n++)
     if((control.children[n].tagName == 'SCRIPT') && (control.children[n].id == id)){
         var scriptElement = control.removeChild(control.children[n]);
         EvalScript(control.children[n], id);

Basically EvalScript searchs client side all the controls in the updatepanel control for one with the name specified, then calls Eval on it's innerHTML.  Just a note, you don't want inside comments in your <SCRIPT> tag, they don't eval() well.