CODEWITHSUNDEEP
javascriptjqueryjqgrid
Dipti Sheth
Dipti Sheth

Reputation: 159

jqGrid : Uncaught TypeError: Cannot read property 'getAccessor' of undefined while reading xml data

My jqGrid works fine, loads data properly. Even sorting and pagination are working fine. But, when filterToolBar is used to search data, it doesn't search any data...just keeps showing 'Loading...'.

Below are script taggings included in HEAD part:

 <script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>    
 <script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
 <script src="~/Scripts/js/jquery.jqGrid.min.js" type="text/javascript"></script>

HTML:

<table id="jqGrid" ></table>
<div id="pager"></div>


<script type="text/javascript">
$("#jqGrid").jqGrid({
    url: "GetData.asmx/LoadData",
    datatype: "xml",     
    xmlReader: {
        repeatitems: false,            
        root: "Rowset",
        row: "Row"
    },
    colNames: ["Id","Contact Name", "City", "Country"],
    colModel: [
        { name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
        { name: "ContactName", index: "ContactName", sortable: true, width: 300,        search: true, stype: 'text' },
        { name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text' },
        { name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text' }
    ],
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    height: "auto",        
    loadonce: true,       
    sortorder: "desc",
    caption: "List of Employees",
    ignoreCase: true        
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch:   "cn" });

 </script>

Please look into this code and guide me, where it is getting wrong.

Thanks in advance, Dipti Sheth

UPDATED:

Following is the xml response: 

      <Rowsets DateCreated="2013-05-02T09:18:07" EndDate="2013-05-02T09:18:07" StartDate="2013-05-02T08:18:07" Version="12.0.6 Build(13)">
<Rowset>
<Columns>
<Column Description="Id" MaxRange="1" MinRange="0" Name="Id" SQLDataType="12" SourceColumn="Id"/>
<Column Description="ContactName" MaxRange="1" MinRange="0" Name="ContactName" SQLDataType="12" SourceColumn="ContactName"/>
<Column Description="City" MaxRange="1" MinRange="0" Name="City" SQLDataType="12" SourceColumn="City"/>
<Column Description="Country" MaxRange="1" MinRange="0" Name="Country" SQLDataType="12" SourceColumn="Country"/>
</Columns>
<Row>
<id>1</id>
<ContactName>Maria Anders</ContactName>
<City>Berlin</City>
<Country>Germany</Country>
</Row>
<Row>
<id>2</id>
<ContactName>Ana Trujillo</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>3</id>
<ContactName>Antonio Moreno</ContactName>
<City>México D.F.</City>
<Country>Mexico</Country>
</Row>
<Row>
<id>4</id>
<ContactName>Thomas Hardy</ContactName>
<City>London</City>
<Country>UK</Country>
</Row>
<Row>
<id>5</id>
<ContactName>Christina Berglund</ContactName>
<City>Luleå</City>
<Country>Sweden</Country>
</Row>
<Row>
<id>6</id>
<ContactName>Hanna Moos</ContactName>
<City>Mannheim</City>
<Country>Germany</Country>
</Row>
</Rowset>
</Rowsets>

RESPONSE HEADER: in Network tab of debugger of Chrome

Cache-Control:private, max-age=0
Content-Encoding:gzip
Content-Length:636
Content-Type:text/xml; charset=utf-8
Date:Wed, 09 Jul 2014 12:34:15 GMT
Server:Microsoft-IIS/8.0
Vary:Accept-Encoding
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
X-SourceFiles:=?UTF-8?B?QzpcUHJvamVjdHNcanFHcmlkU2FtcGxlXGpxR3JpZFNhbXBsZVxHZXREYXRhLmFzbXhcTG9hZERhdGE=?=
ConsoleSearchEmulationRendering

Thanks, Dipti Sheth

EDITED: _Layout.cshtml page:

 <!DOCTYPE html>
  <html>
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

   <link href="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.theme.css" rel="stylesheet"  media="screen" type="text/css" />
   <link href="~/Content/ui.jqgrid.css" rel="stylesheet" media="screen" type="text/css" />
   <style>
    html, body {
        margin: 0;
        padding: 0;
        font-size: 75%;            
    }
   </style>
   <script src="~/Scripts/js/jquery-1.11.0.min.js" type="text/javascript"></script>  
   <script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js" type="text/javascript"></script>
   <script src="~/Scripts/js/src/i18n/grid.locale-en.js" type="text/javascript"></script>
   <script type="text/javascript">
   $.jgrid.no_legacy_api = true;
   $.jgrid.useJSON = true;
   </script>  
   <script src="~/Scripts/js/jquery.jqGrid.src.js" type="text/javascript"></script>  
  </head> 
  <body> 

   <div class="container body-content">
    @RenderBody()       
   </div>

   @Scripts.Render("~/bundles/jquery")
   @Scripts.Render("~/bundles/bootstrap")
   @RenderSection("scripts", required: false)
 </body>
 </html>

Index.cshtml page:

 @{
    ViewBag.Title = "Home Page";
  }

  <table id="jqGrid" ></table>
  <div id="pager"></div>

 <script type="text/javascript">
    //<![CDATA[
    /*global $ */
    /*jslint browser: true */
   //  $(function () {
   //  "use strict";
      $("#jqGrid").jqGrid({
      url: "GetData.asmx/GetData/LoadData",        
      datatype: "xml",     
      xmlReader: {
      repeatitems: false,           
      root: "Rowset",
      row: "Row"
    },
    colNames: ["Id","Contact Name", "City", "Country"],
    colModel: [
        { name: 'id', index: 'id', width: 40, stype: 'text',sortable:true },
        { name: "ContactName", index: "ContactName", sortable: true, width: 300, search: true, stype: 'text' },
        { name: "City", index: "City", sortable: true, width: 300, search: true, stype: 'text'  },
        { name: "Country", index: "Country", sortable: true, width: 300, search: true, stype: 'text'  }
    ],
    rowNum: 10,
    rowList: [10, 20, 50, 100],
    pager: "#pager",
    gridview: true,
    rownumbers: true,
    viewrecords: true,
    height: "auto",        
    loadonce: true,       
    sortorder: "desc",
    caption: "List of Employees",
    ignoreCase: true        
}).jqGrid("filterToolbar", { searchOnEnter: false, stringResult: true, defaultSearch: "cn" });
 // });
  //]]>  
  </script>

It shows blank page if $(function () {}) is there. If I comment this part, then it shows grid and data on the web-page. But still, toolbar searching does not work.

Please guide me where it's going wrong.

Upvotes: 3

Views: 12528

Answers (1)

Oleg
Oleg

Reputation: 221997

Probably you included jQuery JavaScripts files twice. At the first time you include there in <head> by

<script src="~/Scripts/jquery-ui-1.11.0.custom/jquery-ui.min.js"
        type="text/javascript"></script>
<script src="~/Scripts/js/src/i18n/grid.locale-en.js"
        type="text/javascript"></script>

later you placed JavaScripts files of jqGrid and other. The problem is that you use 

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

near to the end of <body>. The second including of jQuery definitions can overwrite some previously set extensions of jQuery or reset / overwrite some previously initialized internal structures of jQuery.

The simple rule is: you have to include every JavaScript file only once on every HTML page.

Additionally I personally prefer to place JavaScript code inside of <head>. In the case you should place the code which creates the grid inside of $(function () {/*here*/});

Upvotes: 2

Related Questions