MVC 4 WebGrid and Jquery produces two errors. JQuery is undefined and a sort error after ajax model change

Question

Inside my div element I am updating is a page partial with a webgrid and when I specifiy ajaxUpdateContainerId: in the webgrid constructor I get the error:

JavaScript runtime error: 'jQuery' is undefined

Here is the generated javascript the error references:

<script type="text/javascript">
        (function($) {
            $.fn.swhgLoad = function(url, containerId, callback) {
                url = url + (url.indexOf('?') == -1 ? '?' : '&') + '__swhg=' + new Date().getTime();

                $('<div/>').load(url + ' ' + containerId, function(data, status, xhr) {
                    $(containerId).replaceWith($(this).html());
                    if (typeof(callback) === 'function') {
                        callback.apply(this, arguments);
                    }
                });
                return this;
            }

            $(function() {
                $('table[data-swhgajax="true"],span[data-swhgajax="true"]').each(function() {
                    var self = $(this);
                    var containerId = '#' + self.data('swhgcontainer');
                    var callback = getFunction(self.data('swhgcallback'));

                    $(containerId).parent().delegate(containerId + ' a[data-swhglnk="true"]', 'click', function() {
                        $(containerId).swhgLoad($(this).attr('href'), containerId, callback);
                        return false;
                    });
                })
            });

            function getFunction(code, argNames) {
                argNames = argNames || [];
                var fn = window, parts = (code || "").split(".");
                while (fn && parts.length) {
                    fn = fn[parts.shift()];
                }
                if (typeof (fn) === "function") {
                    return fn;
                }
                argNames.push(code);
                return Function.constructor.apply(null, argNames);
            }
        })(jQuery);

Here is my main page:

@model IEnumerable<PamperWeb.Models.Lab>

@{
    ViewBag.Title = "Index";
}

@Html.Partial("_SubMenu")

<h2>Index</h2>

<p>
    @Html.ActionLink("Add Lab", "Create", "Lab", new { patientId = ViewBag.PatientId }, null)
</p>
<div id="labs">
@Html.Partial("_Completed", Model)
</div> @section Scripts {
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/sitespec")

}

And the partial:

@model IEnumerable<PamperWeb.Models.Lab>

@{
    var grid = new WebGrid(Model, ajaxUpdateContainerId: "labs", defaultSort: "Name");
}

@grid.GetHtml(columns: grid.Columns(
grid.Column("Name"),
grid.Column("Given", header: "Date"),
grid.Column("TimeGiven", header: "Time"),
grid.Column("Value"),
grid.Column("Phase"),
grid.Column("PatientId"),
grid.Column("", format: @<text>@Ajax.ActionLink("Disable", "Disable", new { labid = item.Id, patientid = ViewBag.PatientId }, new AjaxOptions { HttpMethod="POST", UpdateTargetId = "labs"})</text>)
)
)

If I remove the ajaxUpdateContainerId from the webgrid constructor the error goes away. But then when I click to sort I get a 404 looking for my controller action. Why would it be looking for my controller action on sort?

The second issue is if I use ajax to modify the partial, in disable, sorting stops working. If I substitue in a html.actionlink sorting continues to work.

I have jquery 1.9.1. Any ideas?

Answer 1

The problem is that the JavaScript interpreter runs the script generated by the WebGrid which references jQuery. But jQuery is not loaded at that time so you are seeing the 'jQuery' is undefined message. Loading the jQuery script in the header (@Scripts.Render) as Sheep suggested should solve the problem.

However, I am wondering if this is really intended by Microsoft since they are loading jQuery at the bottom of the page by default. This usually makes sense to avoid delaying page display.

Answer 2

Have you solved this yet? I had the same problem in IE, and I was able to fix it. I had to move all my scripts/css that were defined (mine were in _Layout.cshtml) into bundles (BundleConfig.cs) and that seemed to fix the problem.

   <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />            
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
    </head>