A more complex form submit with inputs inside a grid

dreamer79

There is a good form elements example for datatables you can use to put input fields inside grid and submit them later. But what if you have a large data set and use server side processing? So I made a trick that can be used as a complex example without the need to use ajax based edit and save data on server(For example I need to show a large report, the user enters data in inputs for some rows and then all the info goes to an order in my application. So server updates just don't work for the problem.). Here I'll give a brief idea how I made a large table submit data.

1. Create inputs in table cells where needed. This is easy as you can send '' as column data.
2. Create a datatable and put your own row drawing function:
[code]

oTable= $('#exampletbl').dataTable({

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var tab= this;
var dtdiv= $(tab).closest('.dataTables_wrapper');
var inpdiv= $(dtdiv).find('.dataTables_inputsdiv');
if (typeof inpdiv=='undefined'||inpdiv==null||inpdiv.length!=null&&!inpdiv.length){
//appends hidden div inside wrapper if none
$(dtdiv).append('');
inpdiv= $(dtdiv).find('.dataTables_inputsdiv');
}

$('td',nRow).each(function(i,v){
var tabid= $(tab).attr('id');
$(v).find('input,select').each(function(i1,v1){
var ix= tabid+'_'+$(v1).attr('name');
var inpx= document.getElementById(ix);
var v1val= $(v1).val();

$(v1).attr('defval',v1val);
//this is used later for clearing temporary inputs that match their default values

if (typeof inpx!='undefined'&&inpx!=null){
if ($(inpx).val()==v1val){
//remove inputs that match default values
inpx.parentNode.removeChild(inpx);
} else {
$(v1).val($(inpx).val());
}
}
});
});
}

});
[/code]

This code has a simple idea. When you have a cell with an input inside the function checks if there is an input in a hidden div(The check is by id as it's fast and id is made by joining table id and input name in my case.) and changes input value with a previous one if such is found.

3. Create an event that fires on user input inside grid and make it change hidden input values

[code]

$('.dataTable input').live('blur',function(event){
var v= event.target;
var tab= $(v).closest('table');
var inpdiv= $(tab).closest('.dataTables_wrapper').find('.dataTables_inputsdiv');
var ix= $(tab).attr('id')+'_'+$(v).attr('name');
var inpx= document.getElementById(ix);
if (typeof inpx=='undefined'||inpx==null||(inpx.length!=null&&!inpx.length)){
$(inpdiv).append('');
inpx= document.getElementById(ix);
}

if ($(v).val()==$(v).attr('defval')){
inpx.parentNode.removeChild(inpx);
} else {
$(inpx).val($(v).val());
}
});

[/code]

So finally inside your form you'll be able to edit table cell data, you'll have pagination that restores input values on redraw and from the hidden div you'll have user input on submit. You don't have to save data on server via ajax(jeditable) and wonder how to repack it for full submit, the idea described uses a little memory as it creates hidden inputs only when data change is needed.
Maybe this will be useful for someone wondering how to do such a complex input inside an application.
Source is not clear and variable names are strange, but it comes from a draft test of mine and a lot of stuff is cut from my code.

allan

Brilliant - this is a really nice solution to the problem of server-side processing only having elements on a per page basis. Thanks very much for sharing your solution with us - I'm sure I'll be linking to this post soon :-)

Regards,
Allan