jeditable / DataTables - How can I refresh table after edit?
jeditable / DataTables - How can I refresh table after edit?
I am currently using DataTables for a project along with the jeditable plugin.
My table renders beautifully.
I can edit and save values in cells.
My table on the database gets updated correctly.
But after I update the cell I get 'Click to Edit' in the cell and the new value is not visible until I refresh the page. I have been scouring the web trying to get fnDraw and some other things to work but I am unable to figure it out, I am pretty new to jQuery, am a PHP developer.
The only thing I need it to do is re-draw the table after the values are submitted.
Here is my code:
[code]
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#district').dataTable();
/* Apply the jEditable handlers to the table */
$('#district', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
tooltip : 'Click cell to edit value...',
indicator : 'Saving...',
style : 'display:block;',
submit : 'OK',
cancel : 'Cancel',
data : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}",
type : 'select',
"Callback": function( sValue, x) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
/* Redraw the table from the new data on the server */
oTable.fnClearTable( 0 );
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
var aPos2 = oTable.fnGetPosition( this );
var id2 = oTable.fnGetData( aPos2[0] );
return {
"row_id": this.parentNode.getAttribute('id'),
"id2": id2[0],
"column": oTable.fnGetPosition( this )[ 2 ]
};
},
"height": "14px",
} );
} );
[/code]
My table renders beautifully.
I can edit and save values in cells.
My table on the database gets updated correctly.
But after I update the cell I get 'Click to Edit' in the cell and the new value is not visible until I refresh the page. I have been scouring the web trying to get fnDraw and some other things to work but I am unable to figure it out, I am pretty new to jQuery, am a PHP developer.
The only thing I need it to do is re-draw the table after the values are submitted.
Here is my code:
[code]
$(document).ready(function() {
/* Init DataTables */
var oTable = $('#district').dataTable();
/* Apply the jEditable handlers to the table */
$('#district', oTable.fnGetNodes()).editable( 'editable_ajax.php', {
tooltip : 'Click cell to edit value...',
indicator : 'Saving...',
style : 'display:block;',
submit : 'OK',
cancel : 'Cancel',
data : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}",
type : 'select',
"Callback": function( sValue, x) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
/* Redraw the table from the new data on the server */
oTable.fnClearTable( 0 );
oTable.fnDraw();
},
"submitdata": function ( value, settings ) {
var aPos2 = oTable.fnGetPosition( this );
var id2 = oTable.fnGetData( aPos2[0] );
return {
"row_id": this.parentNode.getAttribute('id'),
"id2": id2[0],
"column": oTable.fnGetPosition( this )[ 2 ]
};
},
"height": "14px",
} );
} );
[/code]
This discussion has been closed.
Replies
[code]
$('.editable').editable('http://www.example.com/save.php', {
type : 'textarea',
submit : 'OK',
callback : function(value, settings) {
console.log(this);
console.log(value);
console.log(settings);
}
});
[/code]
Here is my code for that portion:
[code]
callback: function( sValue, x) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1]);
/* Redraw the table from the new data on the server */
oTable.fnClearTable();
oTable.fnDraw();
},
[/code]
[code]
callback : function(sValue, x) {
oTable.fnDraw();
}
[/code]
[code]
$('#idDialog').dialog(
{
autoOpen: true,
width: 500,
height: 400,
modal: true,
buttons:
{
OK: function()
{
$.ajax(
{
url: strUrl, // The URL to update the table
success: function(data)
{
g_oTable.fnReloadAjax();
$('#idDialog').dialog('close');
}
});
},
Close: function()
{
$(this).dialog('close');
}
} // buttons
});
g_oTable = $('#table').dataTable(
{
"bJQueryUI": true,
"bAutoWidth": false,
"iDisplayLength": 100,
"sPaginationType": "full_numbers",
"sAjaxSource": '/ajax/Data.ashx' + window.location.search,
"fnRowCallback": function(oRow, aData)
{
$(oRow).bind('click', function()
{
OpenDialog(aData);
});
},
[/code]
Allan
Allan
Allan
[code]
"callback" : function( sValue, y) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
[/code]
Results in nothing being passed in as the first param of fnUpdate being basically null and leaving the contents of the referenced cell as it was before (which in this case is your value for jEditable's 'placeholder.'
Unless I've missed something here, I tend to think this is a bug. But perhaps more documentation on sValue and/or this example: http://datatables.net/release-datatables/examples/api/editable.html
Your server-side script *must* return the "value" of the cell as passed in. jEditable grabs this return value and assigns it to a string "results" which is then passed into the callback along with the jEditable settings object. If you don't pass the value back out, it will not show up in your callback (sValue) and thus will not be pushed back out to the edited cell.
I'm having the same issue. Can you please post the code to your solution??
Thanks
Chris_N was correct. After returning the VALUE from my Java Servlet, the "sValue" was able to be determined. The code used in my Java Servlet is below.
String value = request.getParameter("value");
response.getWriter().print(value);