Checkbox to submit (jeditable)

dfusete

Hi,

Im trying datatables and it looks cool! Just wondering if would it be possible to edit on the fly my Yes/No values.

I mean... My database has several "1-0" fields which I want to be shown as "Yes" or "No" and when clicked transformed into a checkbox which will post value if modified.

Does this make sense? (sorry about my english)

Regards

dfusete

Ups. forgot to paste the code im playing with:

[code]

$(document).ready(function() {
oTable = $('#the_table').dataTable( {
"sDom": 'TC<"clear">lfrtip',
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "get_data.php",
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{"sName": "id",
"bVisible": false,
"aTargets": [ 0 ]
},
{"sName": "received", "aTargets": [ 1 ], "sClass": "mEdit"},
{"sName": "proccessed", "aTargets": [ 2 ]},
{"sName": "start_date",
"sType": "date", "aTargets": [ 3 ]},
{ "sName": "end_date",
"sType": "date", "aTargets": [ 4 ]},
{"sName": "amount", "aTargets": [ 5 ]},
{"sName": "timestamp", "aTargets": [ 6 ]}
],
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'20'+
'30'+
'40'+
'50'+
'All'+
' records'
},

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},
"fnDrawCallback": function () {
$('#the_table tbody td.mEdit').editable( 'set_data.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
}
} );
},
} );
} );

[/code]

allan

Hi dfusete,

This sounds like a bit of a jEditable question, and I'm afraid I'm no expert on that plug-in for jQuery (although it is a nice plug-in and I use it in the DataTables examples :-) ). jEditable doesn't have a built in type for binary operations (just text, textarea and select) to you need to add a custom data type. This jEditable blog post shows how that can be done: http://www.appelsiini.net/2008/2/creating-inline-timepicker-with-javascript

Fortunately there is already a plug-in developed for jEditable to provide a binary operation with a checkbox: http://svn.appelsiini.net/svn/javascript/trunk/jquery_jeditable_contributed/jquery.jeditable.checkbox.js . If you prefer a radio input I'm sure it could be readily modified for that, or even a DIV based click input - but the checkbox looks ideal.

So when you've included that code you need to set the jEditable type to 'checkbox' in the above code and that should hopefully do the trick :-)

Regards,
Allan