3

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?

Xaxum
  • 3,545
  • 9
  • 46
  • 66

3 Answers3

4

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.

Paul B.
  • 2,394
  • 27
  • 47
1

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>
Sheep
  • 36
  • 1
  • 2
1

I had this same problem using MVC 4 VS2012, My problem was I had to move my @Scripts.Render directive to the top of my _Layout.cshtml. This fixed the issue

Is it possible that the @Scripts.Render directive places the the jQuery javascript files after the jqGrid files? This can be seen if you click "View Source" in your browser and see the order in which the javascript files are included in the page.

The jQuery code library must always be placed before the jqGrid library and this is the typical error message you get when this is not the case.

Keith
  • 11
  • 1