[Solved] jQuery error on page load

[Kyle Korndoerfer]

I am getting a JavaScript error when my page loads that is preventing the proper initialization of the Telerik controls and any scripts that are supposed to run afterwards.

In my _Layout.cshtml:

@( Html.Telerik().TabStrip()
    .Name( "TabStrip" )
    .Items( items =>
    {
        items.Add()
            .Action( "Index", "Home", new { area = "" } )
            .Content(@<text> </text>)
            .Text( "Home" );
        items.Add()
            .Action( "Index", "Job", new { area = "Tracking" } )
            .Content(@<text>
                @Html.ActionLink( "Jobs", "Index", new { area="Tracking", controller = "Job" } ) |
                @Html.ActionLink( "Documents", "Index", new { area = "Tracking", controller = "Document" } ) |
                @Html.ActionLink( "Messages", "Index", new { area = "Tracking", controller = "Messages" } )
            </text>)
            .Text( "Tracking" );
    } )
)

<!-- snip to bottom of layout -->

@(Html.Telerik().ScriptRegistrar()
        .Globalization( true )
        .Scripts( scripts => scripts
            .Add( "~/Scripts/test.js" )
        )
)

Then at the bottom of my view (which doesn't add any new Telerik controls), I have the following:

@{
    Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(@<text>
            alert('foo');
            // other code that needs to be executed
        </text>);
}

When the view is rendered, I get the following JavaScript error:  SCRIPT5007: Unable  to get value of the property 'replace': object is null or undefined jquery-1.5.1.js, line 3272 character 2 and never see the JavaScript alert pop-up. If I step through the JavaScript on the rendered view, the error is being generated by the call to initialize the TabStrip control:

<script type="text/javascript" src="/Scripts/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.tabstrip.js"></script>
<script type="text/javascript" src="/Scripts/test.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#TabStrip').tTabStrip();
            alert('foo');
            // other code here
        });
//]]>
</script>

I know it's probably something small I doing wrong, but what?

I am using:

• ASP.NET MVC 3 with Razor (April tools update)
• Telerk MVC v2011.1.315.340

[Kyle Korndoerfer]

I've figured it out after a lot of trial and error. On a brand new Telerik MVC project, everything was working as it should (no JavaScript errors).

After checking the files in the project, I noticed the following differences between the projects in the included script files:

1. telerik.tabstrip.js in the broken project vs. telerik.tabstrip.min.js in the working project
2. internal file differences between the telerik.tabstrip.min.js files (copied the file from the working project)

I don't know how these files got to be different, but all is well now.