This is a migrated thread and some comments may be shown as answers.

RadScriptBlock with external js file

7 Answers 821 Views

Ajax

This is a migrated thread and some comments may be shown as answers.

John Swenson asked on 09 May 2012, 06:18 PM

Hi,
I have a custom control, let's say MyControl1.ascx
Inside this control I have the following code:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function ClearRadCombo(sender, eventArgs)

{

var mycombo = $find("<%= RadComboBox1.ClientID %>");

mycombo.clearItems();

mycombo.clearSelection();

}

</script>

</telerik:RadScriptBlock>

This works just well.

Now I want to put all of the js code in a separate file, so I've changed the above code like this:

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" src="../script/myscript.js">

</script>

</telerik:RadScriptBlock>

I've registered the js file in the RadScriptManager on my MasterPage in this way:

<asp:ScriptReference Path="~/script/myscript.js" />

but it doesn't work anymore. I get a "object is null" error when the script calls the "clearItems" method, and "mycombo" is null, indeed.
So, it's possible to use RadScriptBlock with an external js file? If yes, what's wrong with my code, please?

Any help will be really appreciated.
Thank you.

7 Answers, 1 is accepted

answered on 15 May 2012, 03:15 PM

Hi John Swenson,

Specially i'm not family with this control. I'm stay testing and using. After i found your case i tested at my site. Here is sample code. But i'm not tested at ascx.
Aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" src="js/JScript.js">

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Path="~/js/JScript.js"/>

</Scripts>

</asp:ScriptManager>

<telerik:RadComboBox ID="RadComboBox1" runat="server">

<Items>

<telerik:RadComboBoxItem runat="server" Text="1" Value="RadComboBoxItem1" />

<telerik:RadComboBoxItem runat="server" Text="2" Value="RadComboBoxItem2" />

<telerik:RadComboBoxItem runat="server" Text="3" Value="RadComboBoxItem3" />

</Items>

</telerik:RadComboBox>

<br />

<asp:Button runat="server" ID="d" OnClientClick="ShowDropDown();return false;" />

</div>

</form>

</body>

</html>

External Js

function ShowDropDown() {

var combo = $telerik.$("[id$='RadComboBox1']").attr("id");

var mycombo = $find(combo);

mycombo.showDropDown();

}

Hope this help.

Regards,
Alex

answered on 17 May 2012, 08:16 AM

Hi Alex,
thank you for your suggestion, it solved my problem!

I've made the following modifications in order to adapt the code to my scenario (a custom control):

put the<script> tag in the page hosting my control, not in the control itself
no need to nest this<script> tag inside aRadScriptBlock

Definitely, this code is the key :

var combo = $telerik.$("[id$='RadComboBox1']").attr("id");

I think your code is worth to be added to the Telerik KB ;-)

Again, thank you.
Best regards.

P.S. Anyway, I was wondering if there are other ("official" ?) ways to achive the same result....

answered on 17 May 2012, 03:23 PM

Hello John,

I am glad you resolved the issue.

Please note that you cannot use server-side expressions in external javascript files such as:

$find("<%= RadComboBox1.ClientID %>");

ASP.NET framework does not process external javascript files and does not parse the code blocks ( <%= ... %> syntax). Such blocks are parsed only in aspx/ascx files so what we can suggest is moving the javascript in the original aspx file or getting the client-side object of the combobox assigning it to a global javascript variable in the aspx using the <%= ... %> syntax and then passing it as a parameter to the external .js functions to get hold of the client-component of the control:

<script type="text/javascript">

function OnItemSelected(sender, args) {

var comboBox = $find("<%= RadComboBox1.ClientID %>");

PassComboBox(sender, args, comboBox);

}

</script>

Now you can work with the RadComboBox object in your external JS file without error:

function PassComboBox(sender, args, comboBox){

var myComboBox = comboBox;

}

I hope this helps.

Kind regards,
Eyup
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 18 May 2012, 02:28 AM

Hi Eyup and John Swenson,

We can directly find the control without passing parameter , puting "(<% %>)" and "$telerik.$" at external js.
Please see my sample code. But i not sure how does it work. Result is Ok without pass any parameter.

Aspx

<!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 id="Head1" runat="server">

<title></title>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript" src="js/JScript.js">

</script>

</telerik:RadScriptBlock>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Path="~/js/JScript.js" />

</Scripts>

</asp:ScriptManager>

<telerik:RadComboBox ID="RadComboBox1" runat="server">

<Items>

<telerik:RadComboBoxItem runat="server" Text="1" Value="RadComboBoxItem1" />

<telerik:RadComboBoxItem runat="server" Text="2" Value="RadComboBoxItem2" />

<telerik:RadComboBoxItem runat="server" Text="3" Value="RadComboBoxItem3" />

</Items>

</telerik:RadComboBox>

<br />

<asp:TextBox runat="server" ID="_txt"></asp:TextBox>

<asp:Button runat="server" ID="_btnShowDropDown" OnClientClick="ShowDropDown();return false;" Text="ShowDropDown" /><br />

<asp:Button runat="server" ID="_btnShowText" OnClientClick="ShowTextValue();return false;" Text="ShowText"/>

<asp:Button runat="server" ID="_btnShowDropDownText" OnClientClick="ShowDropDownText();return false;" text="ShowDropDownText"/>

</div>

</form>

</body>

</html>

External Js

// JScript File

// Using Telerik JQuery

function ShowDropDown() {

var combo = $telerik.$("[id$='RadComboBox1']").attr("id");

var mycombo = $find(combo);

mycombo.showDropDown();

}

// Using JQuery

function ShowTextValue() {

var _itxt = $get("_txt");

alert(_itxt.value);

}

function ShowDropDownText() {

var mycombo = $find("RadComboBox1");

mycombo.showDropDown();

var _itxt = $get("_txt");

alert(_itxt.value);

}

Someone can explain to me, i'll be appreciate.

Regards,
Alex

answered on 21 May 2012, 03:45 PM

Hello Alex,

Indeed, your approach is also a possibility. However, accessing controls that way can result in unwanted behavior in future if you decide to use the controls in Panels or some other containers.
Basically, this is a general ASP.net issue and you could find more detailed information on various sources on the internet. For example:
Access Controls in External JavaScript 1
Access Controls in External JavaScript 1

All the best,
Eyup
the Telerik team