CODEWITHSUNDEEP
jqueryjqgrid
Hernan
Hernan

Reputation: 173

JavaScript runtime error: Object doesn't support property or method 'jqGrid'

I am having some issues trying to implement Jqgrid in ASP.net MVC 4. The grid and other Jquery functions they don't work in Firefox and Google Chrome. In IE 11 all the Jquery ajax calls works properly, but the Jqgrid does not work and I get the error on the title. My Code is this:

@{
ViewBag.Title = "Reserva de Turno";
<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.0.min.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
}


<script>
$(document).ready(function () {
    alert("Funciona");
    jQuery("#list").jqGrid({
        url: "/Turno/ListarTurnosDisponibles",
        datatype: "json",
        mtype: "GET",
        colNames: ['Fecha', 'Hora'],
        colModel: [
          { name: 'Fecha', index: 'Fecha', width: 40, align: 'left' },
          { name: 'Hora', index: 'Hora', width: 40, align: 'left' }],
        pager: $("#pager"),
        rowNum: 10,
        rowList: [5, 10, 20, 50],
        sortname: "Fecha",
        sortorder: "desc",
        viewrecords: true,
        imgpath: "~/Content/jquery.jqGrid/ui.jqgrid.css",
        caption: "Turnos disponibles"
    });
});
</script>

<h2>Reserva de Turno</h2>
<br />
<fieldset>Datos del medico</fieldset>

<br />

<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

I don't know how to use firebug or any tools for debuggin js.

Thanks

Upvotes: 0

Views: 8152

Answers (3)

Auguste
Auguste

Reputation: 2201

If you receive this error message on any version of MVC while you have references for both JQuery and JQGrid, check to make sure you don't have duplicate JQuery. In my case, I had JQuery reference on both the index.cshtml and _Layout.cshtml. If that's the case, removing the reference from the index.cshtml will resolve the problem.

Upvotes: 0

Bok Woon
Bok Woon

Reputation: 1

Another source for this issue is the use of Bootstrap bundle. 

    @Scripts.Render("~/bundles/bootstrap")

For me, I remove the Bootstrap bundle under _Layout.cshtml and jqGrid works in IE 10. Also I have tested this on Chrome and Firefox and jqgrid can work under this configuration.

    @*@Scripts.Render("~/bundles/bootstrap")*@

Upvotes: 0

Hernan
Hernan

Reputation: 173

After surfing in the internet and many tests, I found the issue. The problem is with bundles configuration. Bundles uses other version of Jquery script. Comment on the lines fixed the problem

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
          "~/Scripts/jquery-ui-{version}.js"));

Upvotes: 2

Related Questions