how to add json data to the server and display it in the jqgrid right after a button clicked

i have a running program that will display my data from a server to the jqgrid. what i want now is to save data to the server. here's my code:

function Add(){
   var datas = {
   "ID": "xyz",
   "operation": "Add",
   "fields": ["code", "desc", "type"],
   "values": [$('#code').val(), $('#desc').val(), $('#type').val() ]
}

$('#tblData1').setGridParam({
    url:'myni.php?path=' + encodeU开发者_Go百科RI('this/update') + '&json=' +(JSON.stringify(datas)), 
    datatype: Settings.ajaxDataType,  
});
    $('#tblData1').trigger('reloadGrid'); 
}

this codes returns an error message "Exception error: Server Error: Parameter 'operation' is not specified." i already set an operation and i don't know what went wrong. can somebody help me fix this? please.

i want to know how to add data to the server after clicking the button and display it in the jqgrid right away. Please...

The function Add set local variable datas which exist only inside of the Add function. Probably what you want is to return the value from the function and set to the variable existing in the scope of usage the setGridParam call.

The next problem is that you should encode JSON.stringify(datas) with respect of encodeURIComponent before inserting it as the part of URL. You can also use jQuery.param function instead:

url:'myni.php?' + $.param({path:'this/update', json:JSON.stringify(datas)})

If you use HTTP GET (mtype:'GET') for requests to the server I would recommend you better to use postData parameter of jqGrid which contain functions:

$("list").jqGrid({
    url:'myni.php',
    postData: {
        path: 'this/update',
        json: function() {
            return JSON.stringify({
                ID: "xyz",
                operation: "Add",
                fields: ["code", "desc", "type"],
                values: [$('#code').val(), $('#desc').val(), $('#type').val()]
            });
        }
    },
    // other parameters
});

The properties of postData parameter will be added to the URL ('?' and '&' will be inserted if needed) in case of the usage of mtype:'GET' or to the body of the posted data in case of mtype:'POST'.

The advantage of the usage functions inside of postData is that the corresponding values (like the value of json parameter) will be calculated on every ajax request. If the user changes the sort order or chooses another page the ajax request to the server will be send. So in the case the postData properties must be determined and the current values from $('#code').val(), $('#desc').val() and $('#type').val() will be inserted in the request.

If the value of path parameter should not be static you can make it also as the function.

In case of usage postData which includes functions you code could be reduced to $('#tblData1').setGridParam({datatype: Settings.ajaxDataType}).trigger('reloadGrid').

More about the usage of functions inside of postData you can read here.