JQWidgets - Jqxgrid "no data to display", JSON Parse error

Question

I follow the steps of this example(http://www.jqwidgets.com/jquery-widgets-documentation/documentation/java-integration/bind-jquery-grid-to-mysql-database-using-jsp.htm), but there’s no data to display.

jqxgrid.jsp file:

ResultSet result = state.executeQuery(sql1);
JsonArray recordsArray = new JsonArray();
while (result.next()) {
    JsonObject currentRecord = new JsonObject();
    currentRecord.add("id",
            new JsonPrimitive(result.getString("id")));
    currentRecord.add("name",
            new JsonPrimitive(result.getString("name")));
    recordsArray.add(currentRecord);
}

out.print(recordsArray);
out.flush();

In jsp file I can get the result of JsonArray:

[{"id":"57","name":"aa"},{"id":"58","name":"qq"},{"id":"59","name":"ii"},{"id":"60","name":"jenny"},{"id":"61","name":"candy"},{"id":"62","name":"f"},{"id":"63","name":"pp"},{"id":"66","name":"kkk"}]

jqxgrid.html file:

 $(document).ready(function () {
        
        var source = {
            datatype: "json",
            datafields: [{name: 'id'}, 
                         {name: 'name'}],
           url:"jqxgrid.jsp"
        };
       
        var dataAdapter = new $.jqx.dataAdapter(source, {
            downloadComplete: function (data, status, xhr) { },
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) {alert('Status ='+ status +',  Error ='+ error ); }
        });
        $("#jqxgrid").jqxGrid({
            width: 400,
            autoheight: true,
            source: dataAdapter,
            columns: [{
                text: 'ID',
                datafield: 'id',
                width: 200
            }, {
                text: 'Name',
                datafield: 'name',
                width: 200
            }]
        });
    });

There's grid in output but shows no data to display. (Sorry, I can't post an image.)

Got error:

Status =parsererror, Error =SyntaxError: JSON Parse error: Unrecognized token '<'

How can I fix this problem? Thanks!

Thanks for your help! But still......, there's nothing change, and the grid's disappear, too. — Rebecca_chu
As much as the error explains, there's a problem with the JSON built on your jqxgrid.jsp so try checking it careful — Gerardo Charles Rojas Vega
Also try adding response.setContentType("application/json"); — Gerardo Charles Rojas Vega
Thanks a lot! I have added it in my jsp file, but still doesn't work. Is there anything wrong about building json? — Rebecca_chu

Blindman67 Blindman67 · Accepted Answer · 2015-05-24T20:32:00

I think your problem is that you are not typing the source data description (client side). The id of the 4th record is 60 which happens to be the < character. The documentation said that type is a required field (though their examples don't always use it.)

If you add type datafields:[{name:'id',type:'int'}, to the var source = { this may solve your problem. You could also use 'number' as the type for id. It may pay as well to add the type 'string' to the name field.

Hope this works for you.

JQWidgets - Jqxgrid "no data to display", JSON Parse error

1 Answers