Sys.Application.add_init loading error

[Mike]

Telerik,

We're using the Q2 2010 release and having an unusual, periodic but consistent and reproducible problem with the controls on load. The user gets a javascript error saying that a client-side event handler (in the below case, Toolbar_Clicked) is undefined. This happens in all versions of IE (but apparently not other browsers). It doesn't seem to happen locally, but it will happen when accessing our site over the Internet. If the user loads a page say 10 times, it will happen half the time. All of our pages have a mix of Telerik controls but this seems to happen mostly when there is a splitter control on the page. Stepping into the browser debugger, the code will look something like this:

WebForm_InitCallback();Telerik.Web.UI.RadSplitter._preInitialize("Radsplitter1");Telerik.Web.UI.RadPane._preInitialize("Radpane1", "Radsplitter1", "", "Radsplitbar1",  0, 0, "False");Telerik.Web.UI.RadSplitBar._preInitialize("Radsplitbar1", "Radsplitter1", "Radpane1", "Radpane2", 1, 0);Telerik.Web.UI.RadPane._preInitialize("Radpane2", "Radsplitter1", "Radsplitbar1", "",  2, 1, "True");Sys.Application.initialize();
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadAjaxManager, {"_updatePanels":"","ajaxSettings":[{InitControlID : "ClientGroupGrid",UpdatedControls : [{ControlID:"ClientGroupGrid",PanelID:""}]},{InitControlID : "ClientGrid",UpdatedControls : [{ControlID:"ClientGrid",PanelID:""}]}],"clientEvents":{OnRequestStart:"",OnResponseEnd:""},"defaultLoadingPanelID":"","enableAJAX":true,"enableHistory":false,"links":[],"styles":[],"uniqueID":"RadAjaxManager1","updatePanelsRenderMode":0}, null, null, $get("RadAjaxManager1"));
});
Sys.Application.add_init(function() {
    $create(Telerik.Web.UI.RadToolBar, {"_skin":"Professional","attributes":{},"clientStateFieldID":"ClientGroupToolbar_ClientState","collapseAnimation":"{\"type\":0,\"duration\":0}","expandAnimation":"{\"duration\":450}","itemData":[{"commandName":"NEW","cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/createtool.gif"},{"commandName":"EDIT","enabled":false,"cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/edittool.gif","disabledImageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/edittool_dis.gif"},{"commandName":"DELETE","enabled":false,"cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/deltool.gif","disabledImageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/deltool_dis.gif"},{"enabled":false,"cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/toolsep.gif"},{"commandName":"FILTERS","checkOnClick":true,"group":"Filter","checked":true,"allowSelfUnCheck":true,"cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/filttool.gif"},{"commandName":"CLIENTS","checkOnClick":true,"group":"Pane","allowSelfUnCheck":true,"cssClass":" rtbWrap","imageUrl":"/CSCMStaging/vlib/App_Themes/Professional/img/docs.gif"}]}, {"buttonClicked":Toolbar_Clicked,"load":_toolbarOnLoad}, null, $get("ClientGroupToolbar"));
});

The error is on the Sys.Application.add_init() line for the toolbar. The "buttonClicked" attribute is being set to a client-side function, Toolbar_Clicked, which apparently doesn't exist yet in the script DOM. Again, there are no script errors or any other problems on the page itself typically, since it loads properly half the time. It seems like some kind of timing/sync issue. Any help would be greatly appreciated.

Mike Oliver
Infotrieve, Inc.


Q2 2010 Release

[Simon]

Hello Mike,

Could you provide a live URL where we could observe the issue and eventually debug it?

Sincerely yours,
Simon
the Telerik team

[Dustin]

I am experiencing the same exact issue, but with the RadComboBox and client-side events. If i put the event functions in a script tag on the page it can find them, but if I put them in a script file and reference it, it can't find them. The script file appears to be loaded, but it still can't find the event functions i setup.

[Mike]

Dustin,

The fix for this (at least what we discovered) was in the placement of your script. It should be within the <form> tag. Our original javascript code was outside the <form> tag:

<html>
<form>
// asp.net ajax/telerik startup script is included here via RadScriptManager so..
...html markup
// any client-side functions required for start-up script should be within the <form> element here
</form>

// if client-side script is here, depending on the timing of browser DOM loading, the functions may or may not exist when evaluated inside the user's browser (at least for IE, other browsers may not have this problem)
</html>

Hope this makes sense,

- Mike

[Dustin]

I found what my problem was. It was a syntax error in my script.