[Solved] Cannot Find Controls in Firefox and Chrome

[Darren]

I am having an interesting issue with accessing the controls on a page.  Below is the code in question:

@section HeadContent{
    <script>
        $(document).ready(function () {
           
            // Disable the fields on load
            var ld = $('#LandingDate').data('tDatePicker');
            alert(ld);
	    
 	    // Other Controls Omitted for brevity . . . 
        });

    </script>   
}  

In IE 8, the alert displays an Object.  In both Chrome 11 and Firefox 3.6.9, the alert displays 'undefined'.  My includes in the header file are shown below:

@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group =>
    group.Compress(true).Add("telerik.common.css").Add("telerik.outlook.css"))
<script src="@Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>

Any ideas what might cause this behavior?

Thanks in advance.

-Darren

[Atanas Korchev]

Hello Darren,

 If you check the generated output of your page you will see that all Telerik extensions are initialized in another $(document).ready() call. In most browsers (read everything but IE) the document.ready handlers are executed in the order they appear. Which means that your code will look for the datepicker before it is initialized. I suggest you move your code *after* the ScriptRegistrar declaration so it is always executed after the Telerik components are initialized.

All the best,
Atanas Korchev
the Telerik team

[Darren]

Antanas,

Thank you for your reply.  That worked.

For posterity's sake, I added the following to my _Layout.cshtml:

 @Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Compress(true).Combined(true))
 @*Allow document.ready() code to be added*@
 @RenderSection("BottomJavascriptSection", required: false)

I then added the new document.ready() code in a section called "BottomJavascriptSection", as displayed below:

@section BottomJavascriptSection{
    <script>
        // Register the Lost Focus event for the Ticket Number
        $(document).ready(function () {
            
            // Disable the fields on load
            $('#LandingDate').data('tDatePicker').disable();

           // Omitted for brevity . . . 
        });
    </script>   
}


Thanks,

-Darren