Question

I got an ActionResult TabNotes which returns a View for a tab which shows notes from a database in a grid. On the tab is a button for ActionResult CreateNote, which returns a PartialView and after saving the note I redirect back to the ActionResult TabNotes with

 return RedirectToAction("TabNotes", new { modelEntity = "Phrase", id = itemId});

However, when it goes to the action result TabNotes using this redirect it does not show the grid. The javascript gives the following error

Uncaught ReferenceError: $ is not defined (anonymous function)
Uncaught ReferenceError: ko is not defined (anonymous function)

This does not happen the first time it goes to ActionResult. Using breakpoints the following part of the ActionResult TabNotes:

[...]
   Model.Grid.url = Url.Action("TabNoteData", new { id = Model.meta.entity, itemId = Model.meta.id.Value});
    }

   return View("TabNotes", Model);
 }

gives the same input values in Model for the first time and the second time. Where can this error come from?

Edit: Firebug shows the following errors:

prompt aborted by user
throw Components.Exception...by user", Cr.NS_ERROR_NOT_AVAILABLE);        nsPrompter.js (regel 462       <Systeem>

$ is not defined
$(document).ready(function(){$('#tblTN...tes/44?cmd=refresh" id="TNPhrase44">        44?mod...=Phrase (regel 2)

ko is not defined
var viewModel=ko.mapping.fromJ...],"buttons":[],"PostAction":null}});           44?mod...=Phrase (regel 12)

Below is the javascript and code

@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('@Url.Action("CreateNote", "Entity", new {itemId = @Model.meta.id, modelEntity = "Phrase"})');
        });
        })();   
</script>


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

‘

public ActionResult CreateNote(
        [ModelBinder(typeof(Models.JsonModelBinder))]
        NoteModel Model, string cmd, long? itemId, string modelEntity)
    {           
        if (cmd == "Save")
        {
            Model.meta.message = "Note saved";
            test.Database.User User = UserRepository.GetUser(1);
            Entity entity = NotesRepository.GetEntity("Phrase");
            NotesRepository.StoreNote(Model.subject, Model.text, User, entity, itemId);
            return RedirectToAction("TabNotes", new { modelEntity = "Phrase", id = itemId});
        }
        Model.meta.modelname = "CreateNote";
        Model.meta.JsViewModelType = "EditNoteModel";
        Model.meta.PostAction = Url.Action("CreateNote", new { cmd = "Save", itemId = itemId});


        return PartialView("CreateNotePartial",Model);

        }

‘

    public ActionResult TabNotes([ModelBinder(typeof(Models.JsonModelBinder))]
        TabNotesModel Model, string cmd, string modelEntity, long? id)
    {
        if (modelEntity != null)
        {
            Model.meta.entity = modelEntity;
        }
        Entity entity = NotesRepository.GetEntity(Model.meta.entity);
        if (id.HasValue)
        {
            Model.meta.id = id;
        }

        if (Model.meta.id.HasValue)
        {
            Model.meta.modelname = "TN" + Model.meta.entity + Model.meta.id.Value.ToString();

            Dictionary<string, object> defaultValues = new Dictionary<string, object>();
            defaultValues.Add("Entity", entity.EntityId);
            defaultValues.Add("ItemId", Model.meta.id.Value);
            Entity noteEntity = NotesRepository.GetEntity("Note");
            var grid = UI.GetEntityFlexiGrid(noteEntity, true, true, true, true, defaultValues);
            grid.buttons.Clear();
            //grid.buttons.Add(new Button { onpress = "CreateNote", action = Url.Action("CreateNote"), name = "CreateNote", postdata = new { meta = Model.meta }});
            grid.title = "";
            Model.Grid = grid;

            Model.Grid.url = Url.Action("TabNoteData", new { id = Model.meta.entity, itemId = Model.meta.id.Value});
        }


       return View("TabNotes", Model);
    }

‘

public GridResult TabNoteData(string id, long itemId, FlexigridRequest request, string cmd)
    {

        GridResult returnValue = null;


        var entity = NotesRepository.GetEntity(id);
        Entity noteEntity = NotesRepository.GetEntity("Note");
        //var Acess = UIRepository.GetEntityAccess(id);

        FlexigridConfiguration grid;
        Dictionary<string, object> defaultValues = new Dictionary<string, object>();
        defaultValues.Add("Entity", entity.EntityId);
        defaultValues.Add("ItemId",itemId);
        grid = UI.GetEntityFlexiGrid(noteEntity, true, true, true, true, defaultValues);

        IQueryable q = NotesRepository.GetNotes(entity.EntityId, itemId);
        var sortField = entity.EntityFields.SingleOrDefault(c => c.Name == request.sortname);
        if (sortField == null)
        {
            request.sortname = grid.sortname;
        }
        IQueryable qdata = null;
        if (!string.IsNullOrEmpty(request.sortname) && request.sortname != "undefined")
        {
            switch (request.sortorder)
            {
                case enumFlexigridRequestSortOrder.asc:
                    qdata = q.OrderBy(request.sortname + " ascending");
                    break;
                case enumFlexigridRequestSortOrder.desc:
                    qdata = q.OrderBy(request.sortname + " descending");
                    break;
            }
        }
        if (!string.IsNullOrEmpty(request.query) && !string.IsNullOrEmpty(request.qtype))
        {
            qdata = qdata.Where(request.qtype.SanitizeFieldExpression() + ".Contains(@0)", request.query);
        }
        if (request.q != null && request.q.Length > 0)
        {
            for (int i = 0; i < request.q.Length; i++)
            {
                var type = UIRepository.GetType(id);
                var property = type.GetProperty(request.q[i]);

                System.ComponentModel.TypeConverter tc = System.ComponentModel.TypeDescriptor.GetConverter(property.PropertyType);
                string sv = request.v[i];
                if (sv == null || sv == "null")
                {
                    qdata = qdata.Where(request.q[i].SanitizeFieldExpression() + "=@0", (object)null);
                }
                else
                {
                    object v = tc.ConvertFromString(sv);
                    qdata = qdata.Where(request.q[i].SanitizeFieldExpression() + "=@0", v);
                }
            }
        }


        string settingName = "Grid." + id + ".Rp";
        var setting = UIRepository.GetQuery<test.Database.UserSetting>().SingleOrDefault(uc => uc.CreatedById == CurrentUser.UserId && uc.Name == settingName);
        if (setting == null)
        {
            setting = UIRepository.Create<test.Database.UserSetting>();
            setting.Name = settingName;
            setting.Value = request.rp.ToString();
            UIRepository.Add(setting);
        }
        else
        {
            if (request.rp.ToString() != setting.Value)
            {
                setting.Value = request.rp.ToString();
                UIRepository.Update(setting);
            }
        }

        int rowId = 0;
        var datarows = new List<object>();
        foreach (var record in qdata.Skip((request.page - 1) * request.rp).Take(request.rp).GetData())
        {
            var cellValues = new List<object>();
            foreach (var gc in grid.colModel.OrderBy(c => c.di))
            {
                cellValues.Add(gc.ToString(UI, record));
            }
            var row = new { id = rowId, cell = cellValues.ToArray() };
            datarows.Add(row);
            rowId++;
        }
        returnValue = Grid(request.page, qdata.Count(), datarows.ToList());

        return returnValue;
    }

Answer 1

That error can only be caused be one of three things:

• Your JavaScript file is not being properly loaded into your page
• You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
• You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

You should check the Firebug net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say “404” beside it. If the file is loading properly, that means that the issue is number 2.

Make sure all javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

This will ensure that your code is being loaded after jQuery has been initialized.

One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the “$” object, so if you load a plugin before loading jQuery core, then you’ll get the error you described.

So to avoid that you can use a “bodyguard” function like the following:

( function($) {
   //We can now use $ as I implemented the bodyguard!
   $(document).ready(function() {
      //your code...
   });
} ) ( jQuery );