Moving Javascript around

11 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 06 Mar 2011 Link to this post

    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
  2. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 09 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 09 Mar 2011 Link to this post

    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();
  5. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 10 Mar 2011 Link to this post

    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
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  6. archimede
    archimede avatar
    103 posts
    Member since:
    Jul 2006

    Posted 29 Jun 2011 Link to this post

    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 !!!
  7. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 29 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  8. archimede
    archimede avatar
    103 posts
    Member since:
    Jul 2006

    Posted 29 Jun 2011 Link to this post

    <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...
  9. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 30 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  10. archimede
    archimede avatar
    103 posts
    Member since:
    Jul 2006

    Posted 30 Jun 2011 Link to this post

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

    Posted 30 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  12. archimede
    archimede avatar
    103 posts
    Member since:
    Jul 2006

    Posted 30 Jun 2011 Link to this post

    Perfect. I get it. thanks again
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017