How to submit local jqgrid data and form input elements

Question

Page contains single form with input elements and jqgrid data. jqGrid data is retrieved in json using loadonce: true option. Data is edited locally.

How to submit

Answer 1

First of all you can get all local data from the jqGrid with respect of

var localGridData = $("#list").jqGrid('getGridParam','data');

If you will need to send only subset of rows of the grid, like the selected rows only, you can need to get _index:

var idsToDataIndex = $("#list").jqGrid('getGridParam','_index');

To send the data to the server you can use the following function for example

var sendData = function(data) {
    var dataToSend = JSON.stringify(data);
    alert("The following data are sending to the server:\n" + dataToSend);
    $.ajax({
        type: "POST",
        url: "yourServerUrl",
        dataType:"json",
        data: dataToSend,
        contentType: "application/json; charset=utf-8",
        success: function(response, textStatus, jqXHR) {
            // display an success message if needed
            alert("success");
        },
        error: function(jqXHR, textStatus, errorThrown) {
            // display an error message in any way
            alert("error");
        }
    });
};

In the demo you will find a little more sophisticated example having two buttons: "Send all grid contain", "Send selected rows". The corresponding code is below

$("#sendAll").click(function(){
    var localGridData = grid.jqGrid('getGridParam','data');
    sendData(localGridData);
});
$("#sendSelected").click(function(){
    var localGridData = grid.jqGrid('getGridParam','data'),
        idsToDataIndex = grid.jqGrid('getGridParam','_index'),
        selRows = grid.jqGrid('getGridParam','selarrrow'),
        dataToSend = [], i, l=selRows.length;
    for (i=0; i

where

var grid = $("#list"),
    decodeErrorMessage = function(jqXHR, textStatus, errorThrown) {
        var html, errorInfo, i, errorText = textStatus + '\n
' + errorThrown;
        if (jqXHR.responseText.charAt(0) === '[') {
            try {
                errorInfo = $.parseJSON(jqXHR.responseText);
                errorText = "";
                for (i=0; i([\s\S]*)<\/body>/i.exec(jqXHR.responseText);
            if (html !== null && html.length > 1) {
                errorText = html[1];
            }
        }
        return errorText;
    },
    sendData = function(data) {
        var dataToSend = JSON.stringify(data);
        alert("The following data are sending to the server:\n"+dataToSend);
        $.ajax({
            type: "POST",
            url: "yourServerUrl",
            dataType:"json",
            data: dataToSend,
            contentType: "application/json; charset=utf-8",
            success: function(response, textStatus, jqXHR) {
                // remove error div if exist
                $('#' + grid[0].id + '_err').remove();
                alert("success");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                // remove error div if exist
                $('#' + grid[0].id + '_err').remove();
                // insert div with the error description before the grid
                grid.closest('div.ui-jqgrid').before(
                    '
' +
                    decodeErrorMessage(jqXHR, textStatus, errorThrown) + '
');
            }
        });
    };

I think, that more difficult and more complex problem you will become on the server. In case of concurrency errors, but I wrote you about the problems before. Exactly because of the problems I personally would never implement saving of multiple rows on the server.

UPDATED: To get data from the form you can use jQuery.serialize. You should use name attribute for all fields in the form which you want to serialize. All data which you need to send are

var allData = {
    localGridData: grid.jqGrid('getGridParam','data'),
    formData: $("#formid").serialize()
};

You can send the data exactly like I described before: sendData(allData).