Grid is not displaying, 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, each time the problem seems different and it's either syntax or import declarations problem. Mine seem fine. All referenced scripts are in place. Wrapping it in $( 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>