JTable jQuery integrate with Spring MVC 3 issue

Question

I have an issue with JTable integration to Spring MVC

****** JSP code ***********

<link href="http://www.jtable.org/Scripts/jtable/themes/metro/blue/jtable.css" rel="stylesheet" type="text/css" />
<link href="http://www.jtable.org/Content/themes/metroblue/jquery-ui.css" rel="stylesheet" type="text/css" />

<script src="http://www.jtable.org/Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="http://www.jtable.org/Scripts/jquery-ui-1.9.2.min.js" type="text/javascript"></script>
<script src="http://www.jtable.org/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>

<script>
$(document).ready(function() {

//setup the jtable that will display the results
$('#PeopleTableContainer').jtable({
        title: 'Table of people',

        actions: {
            listAction: '/admin/getalltherole',
            createAction: '/admin/addRole',
            updateAction: '/admin/updateRole',
            deleteAction: '/admin/deleteRole'
        },
        fields: {
         custId: {
                key: true,
                list: false
            },
            name: {
                title: 'Full Name',
                width: '30%'
            },
            birthYear: {
                title: 'Birth Year',
                width: '15%'
            },
            employer: {
                title: 'Employer',
                width: '25%'
            },
            infoAsOfDate: {
                title: 'As Of Date',
                width: '15%'
            },
            disabled: {
                title: 'Status',
                width: '15%'
            }
        }
    });
    $('#PeopleTableContainer').jtable('load');
});

</script>

<div id="PeopleTableContainer" style="width: 600px;"></div>

***** Spring controller ************

@RequestMapping(value = "/admin/getalltherole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse getalltherole(){
    JsonJtableResponse jstr = new JsonJtableResponse();
    jstr.setResult("OK");
    List<Role> roleList = testService.getAllRoles();
    jstr.setRecords(roleList);
    return jstr;
}

@RequestMapping(value = "/admin/addRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse insert(@ModelAttribute Role role, BindingResult result) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    if (result.hasErrors()) {
        jsonJtableResponse.setResult("ERROR");
    }
    try {
        Role newRole = testService.saveRole(role);
        //jsonJtableResponse.setRole(newRole);
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());
    }
    return jsonJtableResponse;
}

@RequestMapping(value = "/admin/updateRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse update(@ModelAttribute Role role, BindingResult result) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    if (result.hasErrors()) {
        jsonJtableResponse.setResult("Error");
        return jsonJtableResponse;
    }
    try {
        testService.updateRole(role);
        jsonJtableResponse.setResult("OK");
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());          
    }
    return jsonJtableResponse;
}

@RequestMapping(value = "/admin/deleteRole", method = RequestMethod.POST)
@ResponseBody
public JsonJtableResponse delete(@RequestParam Integer custId) {
    JsonJtableResponse jsonJtableResponse = new JsonJtableResponse();
    try {
        testService.deleteRole(custId);
        jsonJtableResponse.setResult("OK");
    } catch (Exception e) {
        jsonJtableResponse.setResult(e.getMessage());            
    }
    return jsonJtableResponse;
}


JSON response object

public class JsonJtableResponse {

    private String Result;

    private List<Role> Records;

    public String getResult() {
        return Result;
    }

    public void setResult(String Result) {
        this.Result = Result;
    }

    public List<Role> getRecords() {
        return Records;
    }

    public void setRecords(List<Role> Records) {
        this.Records = Records;
    }   
}

****** obtained JSON response *********

    {
   "result":"OK",
   "records":[
      {
         "custId":"1",
         "name":"aaa",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130110",
         "disabled":"true"
      },
      {
         "custId":"2",
         "name":"bbb",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130111",
         "disabled":"true"
      },
      {
         "custId":"3",
         "name":"ccc",
         "birthYear":"1982",
         "employer":"xxx",
         "infoAsOfDate":"20130108",
         "disabled":"false"
      },
      {
         "custId":"4",
         "name":"ddd",
         "birthYear":"1981",
         "employer":"xxx",
         "infoAsOfDate":"20130107",
         "disabled":"true"
      }
   ]
}

ISSUE *****************

I can obtain the given JSON response using firebug console.

but when page loads it throws this error on firebug console, even though JSON data properly gets loaded,

   "NO Data available" 

message is displayed on the data table.

and there is an error on the console as well.

   "TypeError: this._$errorDialogDiv.html(message).dialog is not a function"

As I have searched, this error is typically due to jquery UI libs not properly being added.

when I change - listAction: '/admin/getalltherole' to some non existent URL

 "An error occured while communicating to the server." is displayed in a dialog box.

jquery-ui-1.9.2.min.js includes all the required jquery UI libs and I tried adding all the libs individually as well, without any luck.

any suggessions?

Answer 1

Add Jackson library, maven dependency in your pom.xml:

<properties>
    <jackson.version>1.9.10</jackson.version>
</properties>
<dependency>
    <groupId>org.codehaus.jackson</groupId>
    <artifactId>jackson-mapper-asl</artifactId>
    <version>${jackson.version}</version>
</dependency>

Now you can add json property annotation to your fields in the class so that the json output is rendered as you expect. You may write a generic class (JsonJtableResponse in your question) as given below:

public class JTableJSONResponse<T> {
    @JsonProperty("Result")
    private String result;

    @JsonProperty("Records")
    private List<T> records;

    @JsonProperty("Message")
    private String message;

    @JsonProperty("TotalRecordCount")
    private int totalRecordCount;

    public JTableJSONResponse(String result, List<T> records, int totalRecordCount) {
        super();
        this.result = result;
        this.records = records;
        this.totalRecordCount = totalRecordCount;
    }
    //getters and setters
}

Now, your controller may say

List<Role> roleList = roleService.getAllRoles();
return new JTableJSONResponse<Role>("OK",roleList,roleList.size());

Hope this helps.

Answer 2

JSON is case-sensitive. So it would not be able to match "result" with "Result". I had faced the same issue with my app as well.

So please ensure that your JSON response returns Result and Records in the correct case.

Answer 3

The problem was that JSON response which was required for JTable to be case sensitive.

NOT

 {
 "result":"OK",
 "records":[
  .......
  ]}

but

   {
   "Result":"OK",
   "Records":[
   .......
   ]}

Answer 4

From the type of error you are facing you are missing some js file to be imported .

have you added the json2.js which is an external dependency for jtable

https://github.com/hikalkan/jtable/tree/master/lib/external

it is mentioned in the following example for jtable and it is missing in your code

http://www.jtable.org/Tutorials/UsingWithAspNetWebFormsPageMethods#CreatePage

also check with the help of firebug that all the js file are loaded or not.