Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
First of all, yes I know that there is almost the same question on Stackoverflow, but i still can't get it to work. Even with the provided solution, which I found there:
Getting 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
- I want to get Data into my Grid.
- I am using Visual Studio 2017.
Problem: When I try to run the program I get this error:
Unhandled exception at line 56, column 13 in "Link"
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'jqGrid'
index.cshtml:
<!DOCTYPE html>
<html>
<head>
<title>FlexDatenportal</title>
<link rel="icon" href=".\icon.png">
<link href="~/styles/styles`enter code here`heet1.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.14.1/jquery.jqgrid.min.js"></script>
<script type=text/javascript>
$
(function () {
"use strict";
$("#grid").jqGrid({
colModel: [
{ key: true, name: 'ID', index: 'ID'},
{ name: "Vorname" },
{ name: "Nachname" }
],
data: [
{ Vorname: "Angelk", Nachname: "Merkel" },
{ Vorname: "Vladimir", Nachname: "Putin" },
{ Vorname: "David", Nachname: "Cameron" },
{ Vorname: "Barack", Nachname: "Obama" },
{ Vorname: "François", Nachname: "Hollande" }
]
});
});
</script>
</head>
<body>
<div class="header">
<a href=".\index.html"><img class="flexLogo" src="~/styles/Bilder/flexLogo.png" alt="Logo"></a>
<h1 class="Titel">Datenportal</h1>
<p class="UsernameTag">username</p>
<img class="profileimg" src="~/styles/Bilder/profileimage.jpg" alt="profileimg">
</div>
<div class="section">
<div class="Daten">
<p class="DatenHeadline">Daten</p>
<table id="grid"></table>
<div class="inputAButton row">
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in1" maxlength="20">
</div>
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in2" maxlength="20">
</div>
<div class="col-md-3">
<input class="form-control" type="text" value="" id="in3" maxlength="20">
</div>
<div class="col-md-3">
<div class="input-group">
<input class="form-control" type="text" value="" id="in4" maxlength="20">
<span class="input-group-btn">
<button type="button" id="AddButton" class="btn btn-primary">+</button>
</span>
</div>
</div>
</div>
<p class="Signed">by Patrick Korb</p>
</div>
</div>
</body>
</html>
HomeController.cs:
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using MyFirstWebApp.Models;
using System.Web.Mvc;
using System.Data;
using Newtonsoft.Json;
using System.Text;
using System.Data.Entity;
using System.Web.UI;
using System.Diagnostics;
using System.Threading;
using System.IO;
using System.Reflection;
using System.Net;
using System.ComponentModel;
using System.Web.Script.Serialization;
namespace MyFirstWebApp.Controllers
{
public class HomeController : Controller
{
/***Connection***/
SqlConnection sqlCon = new SqlConnection(System.Web.Configuration.WebConfigurationManager.AppSettings.Get("myConnectionString"));
PatrickTestDBEntities db = new PatrickTestDBEntities();
public ActionResult Index()
{
return View();
}
public JsonResult GetMitarbeiter()
{
var testQuery = (from a in db.tbl_PatricksMitarbeiter
select new
{
a.ID,
a.Vorname,
a.Nachname
}).Distinct();
return Json(testQuery);
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
}
I tried Oleg's free jqGrid.I pretty much copied Oleg's Javascript from https://free-jqgrid.github.io/getting-started/index.html and changed the GetMitarbeiter method in the Controller.
Let me know if you need any more detail. (my first question)
Pui
Community2 Answers
Please write always which version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7).
In any way the list of JavaScript files and the order of files, which you use
<script src="~/Scripts/JQGrid/jquery-ui.min.js"></script>
<script src="~/Scripts/JQGrid/grid.locale-en.js"></script>
<script src="~/Scripts/JQGrid/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JQGrid/jquery.jqGrid.js"></script>
is wrong.
You should first include jQuery (for example, jquery-1.11.0.min.js) and then all jQuery plugins: jQuery UI (jquery-ui.min.js) and jqGrid. It's required additionally to include jQuery UI CSS additionally to JS file.
If you use old version of jqGrid (or commercial Guriddo jqGrid JS) then you should include grid.locale-en.js before jquery.jqGrid.min.js. If you use free jqGrid fork then you don't need to include grid.locale-en.js because English US locale in included in jquery.jqGrid.min.js by default.
It's wrong to include both minimized (jquery.jqGrid.min.js) and non-minimized (jquery.jqGrid.js or jquery.jqgrid.src.js) JavaScript code of jqGrid. You should use only one version of jqGrid.
If you use Bootstrap CSS on your page, then you should consider to use jqGrid with Bootstrap options too. See here for example. You can load all free jqGrid files from CDN (see the wiki article) or alternatively to use free jqGrid from NuGet package free-jqGrid or npm package (see here).
UPDATED The error in your project is independent from jqGrid. You included in Index.cshtml the whole HTML code of the page starting with <!DOCTYPE html>. ASP.NET MVC combines "~/Views/Shared/_Layout.cshtml" by default with the content of Index.cshtml and you get absolutely wrong HTML page, where the content of Index.cshtml will be placed in the <body> of _Layout.cshtml.
You can fix the problem by adding
@{
Layout = null;
}
at the beginning of Index.cshtml (before the line <!DOCTYPE html>).
OlegIf you use Guriddo jqGrid Please check the detailed installation documentation here
Tony TomovUser contributions licensed under CC BY-SA 3.0