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>
source to share
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.
source to share