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

Question

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=' + encodeURI('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...

score 1 · Accepted Answer · edited May 23 '17 at 10:33

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.

Oleg, this is now my code. it returns an error 'parsererror'. var datas = { ... }; $.ajax({ type: 'GET', url: '...php?' + $.param({path:'.../update', json:JSON.stringify(datas)}), dataType: Settings.ajaxDataType, data: 'json=' + JSON.stringify(datas), success: function(data) { if ('error' in data) { ... } alert(JSON.stringify(datas)); } }); $('#tblData1').setGridParam({datatype: primeSettings.ajaxDataType}).trigger('reloadGrid'); — jayAnn, Apr 07 '11 at 07:21
You should remove `data: 'json=' + JSON.stringify(datas)` part if you use `$.param` in the url. In the case the best seems me `$.ajax({ type: 'GET', url:'...php',data: {path:'.../update', json:JSON.stringify(datas)}, success: ... });` In the case the value from the `data` parameter will be processed by `$.param` and appended to the url **by $.ajax** itself. — Oleg, Apr 07 '11 at 07:58
i now already edit the code but it didn't add. and if i put this code "$('#tblData1').setGridParam({datatype: primeSettings.ajaxDataType}).trigger('reloadGrid');", the "parsererror" shows... what went wrong? — jayAnn, Apr 07 '11 at 08:22
Could you post full code example which can be used to reproduce your problem (including the test JSON data for `datas`)? — Oleg, Apr 07 '11 at 08:54
hey Oleg, its working now. i was so lame, its the "Add" word to "add". thank you so much. you help me again. — jayAnn, Apr 07 '11 at 12:53

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

1 Answers1