jQuery Grid Plugin - jqGrid

$('#safeOfferSettingsButton').click(function() {

var changedRowsArr = jQuery("#editoffer").getChangedCells('all');
addMessage("<b>SAVE: changed rows: " + changedRowsArr.length + "</b>");

// run throug all rows and send save-requests.
var rowArr = jQuery("#editoffer").getRowData();
$.each(rowArr, function(index, value){
addMessage("... saving " + value["id"]);
//jQuery('#editoffer').saveRow(value["id"], false, '<c:url value="/settings/FormSettingsServlet"/>');
//jQuery('#editoffer').jqGrid('saveRow', value["id"], checkSaveResponse, "<c:url value='/settings/FormSettingsServlet'/>");
 jQuery('#editoffer').jqGrid('saveRow', value["id"] , checkSaveResponse);
}
 );
});

<!--
********************************
The grid
********************************
-->
<table id="editoffer"></table>
<script type="text/javascript">
var lastSelectedID;
jQuery("#editoffer").jqGrid(
{ url: "/myServlets/FormSettingsServlet?mode=xml", /* url for getting the data in xml format*/
datatype: "xml",
mtype:"post",
height: 250,
colNames:['No','Name', 'Visible', 'Required'],
colModel:[
{name:'id', index:'id', width:60, sortable:false, hidden:false},
{name:'name', index:'name', width:300, sortable:false, editable:false},
{name:'visible', index:'visible', width:40, sortable:false, editable:true, edittype:'checkbox', editoptions: { value:"true:false"}, formatter: booleanImageFormatter, unformat:booleanImageUnFormatter, align:'center'},
{name:'required', index:'required', width:40, sortable:false, editable:true, edittype:'checkbox', editoptions: { value:"true:false"}, formatter: booleanImageFormatter, unformat:booleanImageUnFormatter, align:'center'}],

/**
* Do not start edit. Just negate the current value.
* This is done in order to change checkbox-values by one click:
* Process only clicks on column-index 2 and 3.
*/
onCellSelect: function(rowid, iCol, cellcontent, e){
addMessage("trying to change selection... rowid:"+rowid+" last id:" + lastSelectedID + " ->iCol: " + iCol);

var colName = "";
if (iCol == 2){colName ="visible"; }
else if (iCol == 3){colName ="required";}

if (iCol != ""){
// get the row
var tRowDataArray = jQuery('#editoffer').getRowData(rowid);
addArrMessage(tRowDataArray);
addMessage("<b>current Value: \"" + tRowDataArray[colName] + "\"</b>");

// invert the value
tRowDataArray[colName] = "" + ("true" != tRowDataArray[colName]);
addMessage("<b style='color:#aabbff;'>new Value: \"" + tRowDataArray[colName] + "\"</b>");

// Set date to refresh.
jQuery('#editoffer').setRowData(rowid,tRowDataArray);
}
},
editurl: "/myServlets/FormSettingsServlet?mode=xml",
multiselect: false,
viewrecords: true, rowNum:200, autowidth: true,
caption: "Testdata" });

/**
* Display an image that looks like a checkbox
*/
function booleanImageFormatter (cellvalue, options, rowObject){
var trimmed = jQuery.trim(cellvalue);
if (trimmed == "true"){
return "<div class=\"centered-cell dummy-check\"><span class=\"solo-icons solo-icon-check\" onMouseOver>&nbsp</span></div>";
}
else{
return "<div class=\"centered-cell dummy-uncheck\"><span class=\"solo-icons solo-icon-uncheck\">&nbsp</span></div>";
}
}

/**
* Return the booleanvalue of the formatted content
*/
function booleanImageUnFormatter (cellvalue, options, cellobject){
var imgID;
try{
imgID = $(cellobject.firstChild).hasClass("dummy-check");
}
catch(e){
alert(e);
}
// important to return a string-value
return "" + imgID;
}
</script>

<!--
********************************
Submitt-button
********************************
-->
<input type="button" name="button" value="Speichern" id="safeOfferSettingsButton" class="ui-button ui-state-default ui-corner-all ui-button-text-only">
<script type="text/javascript">
$('#safeOfferSettingsButton').click(function() {

var changedRowsArr = jQuery("#editoffer").getChangedCells('all');
addMessage("<b>SAVE: changed rows: " + changedRowsArr.length + "</b>");

// run throug all rows and send save-requests.
var rowArr = jQuery("#editoffer").getRowData();
$.each(rowArr, function(index, value){
addMessage("... saving " + value["id"]);

//jQuery('#editoffer').jqGrid('saveRow', value["id"], checkSaveResponse, "/myServlets/FormSettingsServlet");
//jQuery('#editoffer').saveRow(value["id"], false, '/myServlets/FormSettingsServlet');
jQuery('#editoffer').jqGrid('saveRow', ''+value["id"] , checkSaveResponse);
}
);

});

function checkSaveResponse(result) {
if (result.responseText==""){
addMessage("<span style:\"color:red;\">update is missing</span>");
}
else{
addMessage("<span style:\"color:green;\">success</span>");
}
return true;
}
</script>

<!--
********************************
This is an area for
debug-messages
********************************
-->
<div id="messages" style="font-size:10px; border : solid 2px #555555; background : #000000; color : #bbbbbb; padding : 4px; width : 100%; height : 300px; overflow : auto;">&nbsp;</div>
<input type="button" name="button" value="clear" id="clearConsoleMessages" class="ui-button ui-state-default ui-corner-all ui-button-text-only">
<script type="text/javascript">
function addMessage(aMessage){
$('#messages').html($('#messages').html() + aMessage + "<br>");
}

function addArrMessage(aArrayData){
var MessageString = "";
$.each(aArrayData, function(key, val){
MessageString = MessageString + key + ": " + val + ", ";
});
addMessage( "&nbsp;-> " + MessageString);
}

$('#clearConsoleMessages').click(function(){
$('#messages').html("");
});
</script>