[Solved] javascript breaks when ajax enabled

[Richard Butler]

I have the an aspx containing the RadAjaxManager, ScriptManager with Panel into which I load various user controls.

One of my usercontrols loads a treeview into a div which is hidden and I have hyperlink to show and hide the div using javascript.

The entire Panel where the user control is loaded is ajaxed through the ajaxmanager.

When I turn off ajax, everything works fine but when Ajax is enabled it says that my function name is undefined for the treeview event OnClientNodeClicking.    Also my own javascript function to open the div also says Object Expected (yet all works fine when ajax is disabled).

I've wrapped the javascript in a RadScriptBlock Tag too, and I've used Fiddler2 to examine the output and these functions are there.

I expect this is something trivial but I can't think what else to try, so hoping someone else has some ideas.

This is my javascript, which is at the bottom of my usercontrol.

	<telerik:radscriptblock runat="server" ID="rsbEditNewsCategories">
	<script type="text/javascript" language="javascript">
	function TogglePageSelector(event)
	{
	var ChangeLinkPage = document.getElementById("divChangeLinkPage");
	var posx = 0;
	var posy = 0;
	posx = mouseX(event);
	posy = mouseY(event);
	if (ChangeLinkPage.style.display == 'block') {
	ChangeLinkPage.style.display = 'none';}
	else {
	ChangeLinkPage.style.display = 'block';
	ChangeLinkPage.style.top = posy+10+'px';
	ChangeLinkPage.style.left = posx +'px';}
	}
	function SavePageNodeValue(sender, eventArgs)
	{
	var HiddenTextBox = document.getElementById("<%= txttvPageLinks_NodeClicked.ClientID %>");
	var CurrentPageName =  document.getElementById("<%= txtDefaultPageName.ClientID %>");
	var ChangeLinkPage = document.getElementById("divChangeLinkPage");
	var node = eventArgs.get_node();
	HiddenTextBox.value = node.get_value();
	CurrentPageName.value = node.get_text();
	ChangeLinkPage.style.display = 'none';
	}
	function OnPageNodeExpanded(sender, eventArgs)
	{
	var ChangeLinkPage = document.getElementById("divChangeLinkPage");
	ChangeLinkPage.style.display = 'block';
	}
	function mouseX(evt) {
	if (evt.pageX) return evt.pageX;
	else if (evt.clientX)
	return evt.clientX + (document.documentElement.scrollLeft ?
	document.documentElement.scrollLeft :
	document.body.scrollLeft);
	else return null;
	}
	function mouseY(evt) {
	if (evt.pageY) return evt.pageY;
	else if (evt.clientY)
	return evt.clientY + (document.documentElement.scrollTop ?
	document.documentElement.scrollTop :
	document.body.scrollTop);
	else return null;
	}
	</script>
	</telerik:radscriptblock>

[Iana Tsolova]

Hi Richard,

Unfortunately when a user control is loaded dynamically with RadAjax, the client scripts defined in the user control could not be registered properly. Therefore I suggest that you move the script into a script file and then register the scripts through the ScriptManager, or you could register all scripts directly from the code behind with the static RegisterStartupScripts() method of the ScriptManager.

Find more about loading user controls with RadAjax here.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.