javascript - 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 ment 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.

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 ment 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.

Share Improve this question edited Jul 10, 2014 at 0:51 asked Jul 9, 2014 at 11:30 Dipti Sheth 1591 gold badge2 silver badges11 bronze badges

@DiptiSheth: I couldn't reproduce the error using the data which you posted. Try the demo. – Oleg Commented Jul 9, 2014 at 13:14
@Oleg: Thanks for the demo. It works fine when it works as standalone HTML page, but not with MVC pattern. Tht's strange. Please check my MVC code in EDITED part of the question. THanks – Dipti Sheth Commented Jul 10, 2014 at 0:43
@DiptiSheth: Sorry, but it should be really no difference between loading XML data from a static file and loading dynamic data. One suspected part which I see in your code is @Scripts.Render("~/bundles/jquery") after including jQuery and jQuery UI explicitly before. It could overwrite some settings made previously. You can place $(function () {...}); back and move the Javascript code to the <head>. The error number which you posted before is very strange. It shows that the error take place inside of reloadGrid. It not exist in the code which you posted. – Oleg Commented Jul 10, 2014 at 10:59
@Oleg: Hey...Thanks a lot..it works wonderfully :) . I've mented @Scripts.Render("~/bundles/jquery") and placed back $(function () {...});. It works perfectly fine irrespective of moving javascript to <head>. Thanks a lot again. You made my day !! – Dipti Sheth Commented Jul 10, 2014 at 11:27
@DiptiSheth: Is the problem solved after removing the second inclusion of jQuery by @Scripts.Render("~/bundles/jquery")? If it's so then I would add the corresponding short answer to help other people who could have the same problem. – Oleg Commented Jul 10, 2014 at 11:30

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

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*/});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

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

1 Answer 1

与本文相关的文章

评论列表(0)