Issue with sending all data to the server after local adding rows

Question

Hi I am a newbie to jqGrid. I am using jqGrid 4.4. I have successfully used the approach by Oleg in

Adding new row to jqGrid using modal form on client only

to add rows locally. There are 2 issues I am facing

1. The row that is not added to the end , how can I achieve this?
2. I send all the rows on click of a button as below:

I always get the alert in the error block?

    $("#sendButton").click(function(){
    var gridData = jQuery("#list").getRowData();
    var myJSONString = JSON.stringify(gridData);             
    var postData = myJSONString.replace(/[\"]/g, '\"');     
    alert("JSON serialized jqGrid data:\n" + postData);
    $.ajax({
        type: "POST",
        url: CONTEXT_ROOT+"/json",
        data : postData,
        dataType:"json",
        contentType: "application/json; charset=utf-8",
        success: function(response, textStatus, xhr) {
            alert("success");
        },
        error: function(xhr, textStatus, errorThrown) {
            alert("error:"+errorThrown+" textStatus : "+textStatus);
        }           
    });
});

Not sure what I need to return once I save in the java controller. Here is the code in the controller. I also tried with the return as void but same result. Also is there a better approach to bind the list of json objects coming from the jsp to a list of domain objects. I have tried Binding when there is only a single object like from the form using @RequestBody as explained in

http://blog.springsource.org/2010/01/25/ajax-simplifications-in-spring-3-0/

@RequestMapping(value = "/json", method = RequestMethod.POST)
public ModelAndView saveNewCasePackOptions(@RequestBody List<Map> json) {

    for(Map mJson : json){  
        String idCasePkOptions = (String)mJson.get("idCasePackOptions");            
        Long idCasePackOptions = (idCasePkOptions.isEmpty())?null:new Long(idCasePkOptions);
        Short cypharecommended =  new Short((String)mJson.get("cypharecommended"));
        Short distributorapproved = new Short((String)mJson.get("distributorapproved"));
        String heightStr = (String)mJson.get("height");
        Double height = (heightStr.isEmpty())?null:new Double(heightStr);

        String lengthStr = (String)mJson.get("length");
        Double length = (lengthStr.isEmpty())?null:new Double(lengthStr);

        String weightStr = (String)mJson.get("height");
        Double weight = (weightStr.isEmpty())?null:new Double(weightStr);

        String widthStr = (String)mJson.get("width");
        Double width = (widthStr.isEmpty())?null:new Double(widthStr);      

        String stateString = (String)mJson.get("statuscode");
        stateString = (stateString.contains("Green"))?"1":"0";          
        Short statuscode = new Short(stateString);

        CasePackOptions casePkOpt = new CasePackOptions(idCasePackOptions, cypharecommended, distributorapproved, height, length, statuscode, weight, width);  

        System.out.println(casePkOpt);

        casePackOptionsService.save(casePkOpt);
    }
    ModelAndView mav = new ModelAndView();      
    mav.setViewName("casepackoptions/listPage1.jsp");
    return mav;
}

Any help will be much appreciated.

Answer 1

I wrote the answer on the first part of your question here.

The answer on the second part of your question you could receive from the people who used Spring. The part myJSONString.replace(/[\"]/g, '\"') seems very suspect for me. Probably you will need to use data : {json: postData} instead of data : postData. Probably you will need to change @RequestBody to @RequestParam or @RequestParam("json"). I don't use Spring myself.

Additionally you can use $("#list").jqGrid("getGridParam", "data") instead of jQuery("#list").getRowData(). It will be especially helpful if you uses local paging of the data.

Answer 2

I have got it working but not really sure if this is the recommended way.

java script function is

$("#sendButton").click(function(){
    var gridData = jQuery("#list").getRowData();
    gridData = JSON.stringify(gridData);    
    alert("postData stringify data :\n" + postData);
    postData = postData.replace();
    $.ajax({
        type: "POST",
        url: CONTEXT_ROOT+"/json",
        data : gridData,
        contentType: "application/json; charset=utf-8",
        success: function(response, textStatus, xhr) {
            alert("success");
        },
        error: function(xhr, textStatus, errorThrown) {             
            alert("error:"+errorThrown+" textStatus : "+textStatus);
        }           
    });
});

Server code is now

@RequestMapping(value = "/json", method = RequestMethod.POST)
public @ResponseBody String saveNewCasePackOptions(@RequestBody List<Map> json) {
    for(Map mJson : json){  
        String idCasePkOptions = (String)mJson.get("idCasePackOptions");            
        Long idCasePackOptions = (idCasePkOptions.isEmpty())?null:new Long(idCasePkOptions);
        Short cypharecommended =  new Short((String)mJson.get("cypharecommended"));
        Short distributorapproved = new Short((String)mJson.get("distributorapproved"));
        String heightStr = (String)mJson.get("height");
        Double height = (heightStr.isEmpty())?null:new Double(heightStr);

        String lengthStr = (String)mJson.get("length");
        Double length = (lengthStr.isEmpty())?null:new Double(lengthStr);

        String weightStr = (String)mJson.get("height");
        Double weight = (weightStr.isEmpty())?null:new Double(weightStr);

        String widthStr = (String)mJson.get("width");
        Double width = (widthStr.isEmpty())?null:new Double(widthStr);      

        String stateString = (String)mJson.get("statuscode");           
        Short statuscode = new Short(stateString);

        CasePackOptions casePkOpt = new CasePackOptions(idCasePackOptions, cypharecommended, distributorapproved, height, length, statuscode, weight, width);  

        System.out.println(casePkOpt);

        casePackOptionsService.save(casePkOpt);
    }
    return "Success";
}

Things that feel like they need to be done differently

1. When I try to use $("#list").jqGrid("getGridParam", "data"); instead of jQuery("#list").getRowData(); I was getting id:"1" as part of my Json string
2. When trying to use data : {json: postData} instead of data : postData the json object in firebug was encoded like this

json=%5B%7B%22idCasePackOptions%22%3A%221%22%2C%22cypharecommended%22%3A%221%22%2C%22distributorapproved%22%3A%222%22%2C%22height%22%3A%2214%22%2C%22length%22%3A%2255%22%2C%22statuscode%22%3A%221%22%2C%22weight%22%3A%2214%22%2C%22width%22%3A%221%22%7D%2C

Any suggestions would be helpful. Thanks