Trirand jqGrid does not appear; TypeError: $ (...). JqGrid is not a function
Grid is not showing, firefox console shows "TypeError: $ (...). JqGrid is not a function".
ASP.NET MVC 5.2.2 Razor, jQuery 2.1.1, Trirand jqGrid 4.6.0
I've checked other similar questions, every time the problem seems to be different and there is a syntax or import problem. Mine seems beautiful. All scripts that are referenced are in place. The wrapping in the $ (document) .ready () event doesn't make any difference. Appreciate any help.
<script type="text/css" src="@Url.Content("~/Content/themes/sunny/jquery-ui.sunny.min.css")">
</script>
<script type="text/css" src="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")">
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script>
$(function () {
$("#list").jqGrid({
url: "/Email/LoadDraftEmails/",
datatype: "json",
mtype: "GET",
colNames: ["Id", "Subject", "Sender name", "Sender e-mail", "Created", "Last saved"],
colModel: [
{ name: "ID", width: 50 },
{ name: "Subject", width: 200 },
{ name: "SenderName", width: 150 },
{ name: "SenderEmail", width: 150 },
{ name: "DateCreated", width: 150 },
{ name: "DateLatestSave", width: 150 }
],
pager: "#pager",
rowNum: 100,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Draft emails"
});
});
</script>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
I suspect you've only shown a small portion of all the HTML that gets rendered. Maybe there is a Layout that contains some other scripts that are mixed.
To verify that this is not the case, turn off the layout temporarily and hover all the markup over it:
@{
Layout = null;
}
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/css" src="@Url.Content("~/Content/themes/sunny/jquery-ui.sunny.min.css")"></script>
<script type="text/css" src="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.1.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")"></script>
<script>
$(function () {
$("#list").jqGrid({
url: "/Email/LoadDraftEmails/",
datatype: "json",
mtype: "GET",
colNames: ["Id", "Subject", "Sender name", "Sender e-mail", "Created", "Last saved"],
colModel: [
{ name: "ID", width: 50 },
{ name: "Subject", width: 200 },
{ name: "SenderName", width: 150 },
{ name: "SenderEmail", width: 150 },
{ name: "DateCreated", width: 150 },
{ name: "DateLatestSave", width: 150 }
],
pager: "#pager",
rowNum: 100,
rowList: [10, 20, 30],
sortname: "invid",
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "Draft emails"
});
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
This usually works fine. If so, you should see that the script links can mix in your layout and ensure that the rendered page looks like the one shown here.