Search code examples
jsonrestjqgrid

jqGrid call restful service successfully but failed to show the jqGrid ui

This is the RESTful data format

{"user":[
           {"id":"aupres","passwd":"aaa","age":45,"name":"father"},
           {"id":"hwa5383","passwd":"bbb","age":40,"name":"mother"},
           {"id":"julian","passwd":"ccc","age":15,"name":"son"}

]}

My jqGrid client call the above data successfully. The below image shows the result:

enter image description here

But this code fails to display the response to the jqGrid. This is my client code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="EUC-KR">
    <title>jqGrid Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="jquery-ui.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="ui.jqgrid.css"/>
    <script type="text/javascript" src="jquery-2.2.0.min.js"></script>
    <script type="text/javascript" src="jquery.jqGrid.min.js"></script>
    </head>
    <body>
    <table id="grid"></table>
    <div id="pager"></div>
    <script type="text/javascript">
    $(document).ready(function(){

       $Grid = $("#grid");
       $Grid.jqGrid({

          mtype: "get",
          url: "/JQueryJsonWeb/rest/services/getJson/aupres",
          contentType: "text/json; charset=utf-8",
          dataType: "json",

          jsonReader : {
             root : "user"
          },
          colNames : [
             'id',
             'passwd',
             'age',
             'name'
          ],
          colModel : [
             { name : 'id',        width:40,  align:'center'},
             { name : 'passwd',    width:80,  align:'left'  },
             { name : 'age',       width:80,  align:'left'  },
             { name : 'name',      width:80,  align:'right' }
          ],
          pager : '#pager',
          rowNum : '10',

          loadComplete : onloadComplete,
          loadError : onloadError,
          gridComplete : ongridComplete
       });  

       function onloadComplete(jsonData, status) {
          console.log(jsonData) **// This method shows the above image.**
       }

       function onloadError(status) {
          console.log(status)
       }

       function ongridComplete() {
          console.log("fiished!!!");
       }
    });
    </script>
    </body>
    </html>
Solution

  • Please read the comment to your previous question:

    • JavaScript is case sensitive language. There are NO dataType: "json" parameters and the default datatype: "xml" will be used.
    • Non-existing parameters contentType will be ignored too. The returned are wrong if one interpret there as XML data.
    • The output which you included come from onloadError and not from onloadComplete. The parameters of onloadError are jqXHR, textStatus, errorThrown. You included the console output of the jqXHR object. See the answer.
    • You should declare variables in JavaScript : use var $Grid = $("#grid"); instead of $Grid = $("#grid");. Including "use strict" directive at the beginning on top functions helps to detect such errors (see here). In the same way I'd recommend you include semicolon after every statement (see console.log(status) and console.log(jsonData)).
    • You should include in all your question which version of jqGrid you use and from which fork (free jqGrid - my fork, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). The possibilities of the forks will be more and more different. Thus it's important which one you use (or can use).