Moving Javascript around

[Sean]

Hi all,

Currently I have in my code-behind some javascript that I would like to move to its own, separate .js file. The problem is that all this javascript is wrapped in a RadCodeBlock and I am not sure what portions of it need that RadCodeBlock.

Is there anything I should be aware of before just cutting all the javascript out of a code block to move it to its own file? Is it possible to move the RadCodeBlock with it, or at least achieve the same functionality of wrapping all the JS in a RadCodeBlock?

Thanks

[Marin]

Hello Sean,

You can reference a separate javascript file from the script tag inside the RadCodeBlock like this:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" src="MyJavaScript.js">
        </script>
    </telerik:RadCodeBlock>

RadCodeBlock is used mainly to isolate server code blocks (surrounded within "<%= %>" tags) and prevent errors related to using server tags in your client code. More information can be found in this help article.

Greetings,
Marin
the Telerik team

[Sean]

Hi there,

So, I went ahead and did as you said and moved some JS around and I am now receiving issues.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript" src="../Scripts/LocalSettings.js">
    </script>
</telerik:RadCodeBlock>

This is how I wrapped a RadCodeBlock around my javascript.

This stopped working. I am told "findItemByValue" cannot be called on null, which means $find stopped working. Is it possible to have $find still work when all my JS is moved to a .JS file instead of in the code-behind for the page?

$find("<%= RadComboBox1.ClientID %>").findItemByValue(properties["ChartType"]).select();

[Marin]

Hi Sean,

In order for $find to work the result of the expression in the server tags should be evaluated in the markup page and then assigned as a global variable that can be used inside a function in the .js file. Basically all code containing server tags of the type "<%= %>" should be left in RadCodeBlock in the aspx page for proper evaluation. You also need to register your js file through the ScriptManager control. Here is a code sample that worked on my side:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/MyJavaScript.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var gridID = "<%= RadGrid1.ClientID %>";
        </script>
    </telerik:RadCodeBlock>

And the content of the .js file:

function GridCommand() {
                var grid = $find(gridID);
            }

Kind regards,
Marin
the Telerik team

[archimede]

I have this on the master page:

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
         <Scripts>
            <asp:ScriptReference Path="~/JS/Global.js" />
        </Scripts>
 </telerik:RadScriptManager>

On the aspx page that contains a grid:

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 <script type="text/javascript"  src="~/JS/Global.js">
     var gridID = '<%= RadGrid1.ClientID %>';
     var HdfIdRep = '<%= TxtIdReparto.ClientID %>';
     var HdfCodRep = "<%= hdfCodReparto.ClientID %>";
 </script>
</telerik:RadCodeBlock>

External Global.Js

function RowSelected(sender, eventArgs) {
                         var grid = sender;
                var MasterTable = grid.get_masterTableView();
                var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
                var Cod = MasterTable.getCellByColumnUniqueName(row, "IdReparto");
                var Id = MasterTable.getCellByColumnUniqueName(row, "CodReparto");

                document.getElementById('<%=hdfIdReparto.ClientID %>').value = Cod.innerText;  --> Error: Undefined
I try:
                   var hdfId = $find(HdfIdRep); --> but i get always  --> Undefined

            }

I try with a radTexBox and with <asp:hiddenfield --> But it doesn't work. How can i set the value to the texbox/hiddenfield that is on the page ?
Thanks !!!

[Marin]

Hello archimede,

 The $find function finds only controls that are visible on the page. If you need to find a asp:HiddenField you should use the document.getElementById function passing the evaluated clientID as parameter:

<script type="text/javascript"  src="~/JS/Global.js">
     var HdfIdRep = '<%= TxtIdReparto.ClientID %>';
 </script>

var hdnField = document.getElementById(HdfIdRep)

The case with the RadTextBox should be the same as the RadGrid hence te $find function should work unless you have set Visible="false" for the control.Best wishes,
Marin
the Telerik team

[archimede]

<script type="text/javascript"  src="~/JS/Global.js">
     var gridID = '<%= RadGrid1.ClientID %>';
     var HdfIdRep = '<%= hdfIdReparto.ClientID %>';  --> Hiddenfield
     var txtRep = '<%= TxtIdReparto.ClientID %>';  -- TextBox
 </script>

 <asp:HiddenField ID="hdfIdReparto" runat="server" />
    <telerik:RadTextBox ID="TxtIdReparto" runat="server" Visible="true"  >

file .js

function RowSelected(sender, eventArgs) {

    var grid = sender;
    var MasterTable = grid.get_masterTableView();
    var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
    var Cod = MasterTable.getCellByColumnUniqueName(row, "IdReparto");
    var Id = MasterTable.getCellByColumnUniqueName(row, "CodReparto");

    var txtId = $find(txtRep);  -->> Error : is undefined
    var hdfId = document.getElementById(HdfIdRep); -->> Error : is undefined
    hdfId.value = Cod.innerText;


}

Thanks !! for your answer , but i try both ways.... without success... any idea of what i missing?
i also try var grid= $find(gridID)  and i get the same error --> seems like the file is load first of the page... 
If i get the grid of the "sender" argument works...
I really don't know where i made the mistake...

[Marin]

Hi Archimede,

 You do need to specify the file in the src attribute of the script tag. It has to be referenced only through the RadScriptManager.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
         <Scripts>
            <asp:ScriptReference Path="~/JS/Global.js" />
        </Scripts>
 </telerik:RadScriptManager>

<!-- remove the src attribute -->
 <script type="text/javascript"  src="~/JS/Global.js">

Best wishes,
Marin
the Telerik team

[archimede]

Thanks thanks  a lot !!!!! now it works !!!. Could you explain me why if i put the src=".." it dosen't work?
Thanks again !!

[Marin]

Hello Archimede,

 Specifying both external file via the src attribute and content inside the script tag is not recommended approach, because some browsers may ignore the content inside the script tag and you will get errors.

<script type="text/javascript" src="MyJavaScript.js">
   <!-- any code here may be ignored by the browser -->
</script>

Best wishes,
Marin
the Telerik team

[archimede]

Perfect. I get it. thanks again