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

JQuery and '$telerik' is undefined

1 Answer 394 Views

General Discussions

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

wnl asked on 06 Jul 2009, 11:11 AM

Hi,
I'm trying to use JQuery. I read Telerik documentation about this and I want to make a sample:

    
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">  
        
            </telerik:RadScriptManager> 
        
            <telerik:RadComboBox runat="server" ID="RadComboBox1" Width="300px" Skin="Telerik">  
        
               <Items> 
        
                   <telerik:RadComboBoxItem Text="ASP.NET AJAX UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="WinForms UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="WPF UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="Silverlight UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik Reporting" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik OpenAccess ORM" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik Sitefinity CMS" /> 
        
               </Items> 
        
            </telerik:RadComboBox> 
        
            <script type="text/javascript">  
        
               (function($) {  
        
                   $(document).ready(function() {  
        
                       $('.rcbItem')  
        
                       .mouseover(function() {  
        
                           $(this).stop().animate({ paddingLeft: "30px" }, { duration: 300 });  
        
                       })  
        
                       .mouseout(function() {  
        
                           $(this).stop().animate({ paddingLeft: "4px" }, { duration: 300 });  
        
                       });  
        
                   });  
        
               })($telerik.$);  
        
            </script>

It's OK. But I don't want to have javascript inside body element so I moved javascript to head section of my site:

    
            <!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 runat="server">  
        
                <title></title>  
        
                <script type="text/javascript">  
        
               (function($) {  
        
                   $(document).ready(function() {  
        
                       $('.rcbItem')  
        
                       .mouseover(function() {  
        
                           $(this).stop().animate({ paddingLeft: "30px" }, { duration: 300 });  
        
                       })  
        
                       .mouseout(function() {  
        
                           $(this).stop().animate({ paddingLeft: "4px" }, { duration: 300 });  
        
                       });  
        
                   });  
        
               })($telerik.$);  
        
            </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadComboBox runat="server" ID="RadComboBox1" Width="300px" Skin="Telerik">  
        
               <Items> 
        
                   <telerik:RadComboBoxItem Text="ASP.NET AJAX UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="WinForms UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="WPF UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="Silverlight UI Controls" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik Reporting" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik OpenAccess ORM" /> 
        
                   <telerik:RadComboBoxItem Text="Telerik Sitefinity CMS" /> 
        
               </Items> 
        
            </telerik:RadComboBox> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

And now there is an error:
http://img229.imageshack.us/img229/1006/telerikjquerybug.jpg ('$telerik' is undefined).
Is it the proper behaviour? I want to put all javascript code into seperate file and include with sigle line:

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

What do I wrong?

1 Answer, 1 is accepted

answered on 06 Jul 2009, 12:46 PM

Hi Jaromin Sycz,

If you put the javascript in the <head> section - it will execute before the Telerik's javascript files are loaded hence the error.

You can add the script as a ScriptReference of the ScriptManager like this:

    
            <asp:ScriptManager ID="ScriptManager1" runat="server"> 
        
                <Scripts> 
        
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    <asp:ScriptReference Path="scripts/scripts.js" /> 
        
                </Scripts> 
        
            </asp:ScriptManager>

Alternatively, you can modify the javascript code a bit so it executes on pageLoad event:

    
            <head runat="server"> 
        
                <script src="scripts/scripts.js" type="text/javascript"></script> 
        
            </head>

    
            function pageLoad() {   
        
               $ = $telerik.$; 
        
               $('.rcbItem')   
        
               .mouseover(function() {   
        
                   $(this).stop().animate({ paddingLeft: "30px" }, { duration: 300 });   
        
               })   
        
               .mouseout(function() {   
        
                   $(this).stop().animate({ paddingLeft: "4px" }, { duration: 300 });   
        
               });   
        
            };

Sincerely yours,
Veselin Vasilev
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.