I have a cshtml page that gives these errors:

Uncaught ReferenceError: $ is not defined               TabNotes:2
(anonymous function)                                    TabNotes:2
TabNotes:12Uncaught ReferenceError: ko is not defined   TabNotes:12
(anonymous function)                                    TabNotes:12
(anonymous function)                                    TabNotes:23

What can cause such an error? I can't find any reason why this would be. I tried wrapping the javascript function in $(document).ready(function () { but that did not work either. The code is below

@model test.Web.Framework.Areas.Administration.Models.TabNotesModel 
@using (UI.DocumentReadyScript())
{    
    if (Model.meta.id.HasValue)
    {
        UI.jQuery("#tbl" + Model.meta.modelname).flexigrid(Model.Grid);
    }
}
<form method="post" action="@Url.Action("TabNotes", new { cmd = "refresh" })" id="@Model.meta.modelname">
<div class="ui-state-highlight ui-corner-all highlight" data-bind="visible: meta.message">
    <span class="ui-icon ui-icon-info"></span><strong data-bind="text: meta.message">
    </strong>
</div>
@using (UI.BeginBlock("Administation.TabNotes", UI.Label("Notes", "Notes").ToString(), test.Web.Framework.Core.enumIcons.pencil, false, false))
{
    <table id="@("tbl" + Model.meta.modelname)">
    </table>
} 
</form>
<script type="text/javascript">
(function() {
        var viewModel=ko.mapping.fromJS(@Html.Raw(UI.JavascriptEncode(Model)));
        viewModel.getData=function() { return ko.mapping.toJSON( this  ); };   
        viewModel.setData=function(data){ 
        $('#tbl'+this.meta.modelname()).flexigrid( data.Grid);
        ko.mapping.updateFromJS(this,data); 
        };
        $('#@Model.meta.modelname').koform({viewmodel: viewModel , validate : {errorElement:'p' }  } );
        $('#@Model.meta.modelname').koform('applyBindings');
        $('#load-partial').click(function() {
            $('#partial').load('@Html.Raw(@Url.Action("CreateNote", "Entity", new {modelEntity = @Model.meta.entity, itemId = @Model.meta.id}))');
        }); 
    })(); 
</script>


<div id="partial"></div>
<button type="button" id="load-partial">Create Note</button>

edit: The jQuery gets loaded from the master page.

I have a cshtml page that gives these errors:

Uncaught ReferenceError: $ is not defined               TabNotes:2
(anonymous function)                                    TabNotes:2
TabNotes:12Uncaught ReferenceError: ko is not defined   TabNotes:12
(anonymous function)                                    TabNotes:12
(anonymous function)                                    TabNotes:23

What can cause such an error? I can't find any reason why this would be. I tried wrapping the javascript function in $(document).ready(function () { but that did not work either. The code is below

@model test.Web.Framework.Areas.Administration.Models.TabNotesModel 
@using (UI.DocumentReadyScript())
{    
    if (Model.meta.id.HasValue)
    {
        UI.jQuery("#tbl" + Model.meta.modelname).flexigrid(Model.Grid);
    }
}
<form method="post" action="@Url.Action("TabNotes", new { cmd = "refresh" })" id="@Model.meta.modelname">
<div class="ui-state-highlight ui-corner-all highlight" data-bind="visible: meta.message">
    <span class="ui-icon ui-icon-info"></span><strong data-bind="text: meta.message">
    </strong>
</div>
@using (UI.BeginBlock("Administation.TabNotes", UI.Label("Notes", "Notes").ToString(), test.Web.Framework.Core.enumIcons.pencil, false, false))
{
    <table id="@("tbl" + Model.meta.modelname)">
    </table>
} 
</form>
<script type="text/javascript">
(function() {
        var viewModel=ko.mapping.fromJS(@Html.Raw(UI.JavascriptEncode(Model)));
        viewModel.getData=function() { return ko.mapping.toJSON( this  ); };   
        viewModel.setData=function(data){ 
        $('#tbl'+this.meta.modelname()).flexigrid( data.Grid);
        ko.mapping.updateFromJS(this,data); 
        };
        $('#@Model.meta.modelname').koform({viewmodel: viewModel , validate : {errorElement:'p' }  } );
        $('#@Model.meta.modelname').koform('applyBindings');
        $('#load-partial').click(function() {
            $('#partial').load('@Html.Raw(@Url.Action("CreateNote", "Entity", new {modelEntity = @Model.meta.entity, itemId = @Model.meta.id}))');
        }); 
    })(); 
</script>


<div id="partial"></div>
<button type="button" id="load-partial">Create Note</button>

edit: The jQuery gets loaded from the master page.

• javascript
• razor
• knockout.js

• 2 Did you remember to include jQuery? – Grexis Commented Jan 3, 2012 at 23:55

3 Answers 3

It means that jQuery ($) and knockout (ko) are not defined. This often es up when a library isn't loaded by the time the script has been executed.

Ensure that you're loading the frameworks prior to using them (i.e. your framework-related script tags are inserted prior to your page-level scripts). If that's good, check your network activity in your developer panel to see if you're getting erroneous requests when downloading the frameworks. It could be that you're loading the frameworks asynchronously, which means you'll need an async handler to begin executing your page-level script.

Where in your code are you referencing KO and jQuery? Usually this error occurs because your code tries to run before the references are loaded.

I remend using Fiddler or another network activity tool to watch when the references are loaded (or not) and where from.

I had problems with this error when trying to incorporate a jquery ui widget into my site. I had to update the proper path of the css file being included; it can be picky sometimes. Also had to do the same for the jquery as well. Also take note where your localhost is with regards to where your 'src="/code/blah_folder" is. Hope it helps.