jqgrid ajax,jquery - jqGrid. Async ajax calls - Stack Overflow

first of all, thanks for your time.

I'm trying to use jqGrid to make an editable grid. I'd like the user edit lines, jqGrid send changes and WITHOUT waiting response from server, user continue editing lines. If server response is OK, do nothing, and if there is some error I'd show some kind of error log (but this doesn´t worry me).

This code works:

var ultimaFila = 0; // globally available

var saveActRow = function(){

jQuery('#gridLineas').jqGrid('saveRow', ultimaFila,

function(xhr) {

var response = eval('(' + xhr.responseText + ')');

if(response.respuesta == "ok"){

return true;

} else{

return false;

}

}

, 'ActualizarLineaAlbaran.action'

);

};

var addActRow = function(e) {

var lastRowInd = jQuery("#gridLineas").jqGrid("getGridParam","reccount");

if (ultimaFila == lastRowInd){ // ¿es última línea?

jQuery("#gridLineas").jqGrid('addRow',{

rowID : parseInt(ultimaFila) + 1,

initdata : {'numLinea':parseInt(ultimaFila) + 1},

position :"last",

useDefValues : false,

useFormatter : false,

addRowParams : {extraparam:{}}

});

}

};

jQuery(document).ready(function(){

$("#gridLineas").jqGrid({

jsonReader : {root:"albaLineas", cell: "", repeatitems: false},

url:'albaLineas.action',

//ajaxGridOptions: { async: false },

loadui: 'disable',

datatype: 'json',

mtype: 'POST',

colNames:['codIndiceAlb', 'numLinea', 'Código', 'CSP', 'cantidad'],

colModel :[

{name:'codIndiceAlb', index:'codIndiceAlb', hidden: true, width:50, editable: false, sortable:false, align: "center"},

{name:'numLinea', index:'numLinea', hidden: false, width:50, editable: false, sortable:false, align: "right"},

{name:'codigoArticulo', index:'codigoArticulo', width:50, editable: true, sortable:false, align: "right"},

{name:'articuloCSP', index:'articuloCSP', width:50, editable: true, sortable:false, align: "right"},

{name:'cantidad', index:'cantidad', width:60, editable: true, sortable:false, align: "right",

editoptions: { dataEvents: [

{ type: 'keydown', fn: function(e) {

var key = e.charCode || e.keyCode;

if (key == 13){

saveActRow();

addActRow();

}}}]}

},

],

rowNum:100,

sortname: 'numLinea',

sortorder: 'desc',

gridview: true,

caption: 'líneas',

height: 350,

loadtext :'cargando líneas...',

editurl: 'ActualizarLineaAlbaran.action',

onSelectRow: function(id) {

if (id && id !== ultimaFila) {

jQuery('#gridLineas').jqGrid('restoreRow',ultimaFila);

ultimaFila = id;

/*jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc,

succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);*/

jQuery('#gridLineas').jqGrid('editRow', id, false, null,

function(xhr) {

/* SUCCESFUNC*/

var response = eval('(' + xhr.responseText + ')');

if(response.respuesta == "ok"){

return true;

} else{

return false;

}

}

, 'ActualizarLineaAlbaran.action'

);

}

}

});

but user can't continue editing until server response. I thought Ajax tech was usefully for this, but I'm an absolutely newbie in Ajax and jGrid.

I tried Synchronous Calls with jqGrid? answer, but no result for me.

So, is there anyway to don't "wait" server answer?

Any help is appreciated.

Thank you,

Jon

************* EDITED - RESPONSE TO OLEG ANSWER ***********

thanks again Oleg! the ajaxRowOptions: { async: true } works perfect, but (there is always a but ;-)) users stills see the gray grid. I suspect there is something to do with

ui.jqgrid.css line .ui-jqgrid .jqgrid-overlay

because if I delete this line overlay is out, but I have unexpected results (grid is allways gray). With Firebug I see that

line is the one witch is showing the overlay, but do someone know how to overwrite this particular line? Witch is the script code that change de style from display to block?

Thanks everyone! and have a good day!

Jon