jeditable / DataTables - How can I refresh table after edit?

jmichaels

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]

btz

Why callback is in quotation marks?

[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]

jmichaels

I've taken off the qoutes and now when I make a change to a cell and hit ok the table disappears from view and isnt redrawn?

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]

btz

How about

[code]

callback : function(sValue, x) {
oTable.fnDraw();
}

[/code]

jmichaels

No dice, it will process the update, update the mySQL table, the value will disappear from the cell and you get the 'Click to Edit" text until you refresh the page, then you see the updated value.

damon83

Im having exactly the same issue, any solution to this problem??

DanMorin

Likewise, I have a dialog for editing a row for a table, and when the user click on OK, I update values to the server. To make sure the values have been properly updated, I want to reload/refresh the entire table, as when the page loads. Any simple suggestion? Technically, it should be a single line of code to perform this.

[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

Does your fnReloadAjax line not do it? That should go to the server, reload the entire table with the new values and display them. What does happen with that line at the moment?

Allan

DanMorin

I am looking for a method like fnReloadAjax() which will call the sAjaxSource and re-initialize the table. Do you have such a method?

allan

I don't quite understand I'm afraid - that is exactly what fnReloadAjax does - it goes to the Ajax source, gets the new data, clears the data from the table that is currently in it and then populates the table with the new data. Is that not what you are looking for?

Allan

DanMorin

Do you have an 'official' implementation of fnReloadAjax() ?

allan

http://datatables.net/plug-ins/api#fnReloadAjax - that's the current one. As with all software, it is possible there is a bug somewhere in it, but I'm not aware of any issues at the moment.

Allan

chris_n

The problem here seems rooted in the fact that sValue (which is pretty much undocumented afaict) is always passed in empty, so doing this:

[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

chris_n

Actually, this looks like it might be a problem with JEditable. When the jEditable callback fires, it seems jEditable is passing in a null value for the first param which is not true. Interestingly enough, the correct value is passed back to the server, just not to the callback.

chris_n

SOLVED!

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.

chris_n

This actually eliminates the need for the jEditable callback altogether. (Perhaps I'm displaying my ignorance here, but hopefully it will help some poor soul in the future... ;-)

dahead03

chris_n

I'm having the same issue. Can you please post the code to your solution??

Thanks

craig_ipti

agreed. i'm having exact same issue, but returning the value in the onsubmit function of jeditable is still not updating the search with the new value. it still uses the old value. anyone have a code blip they can post on how to get this to work?

anorman149

I have solved the issue.

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);

dkh7m

I was experiencing a similar issue this morning. I am a ColdFusion developer, and I discovered that my problem was with the format my function was returning to jQuery. I had the format set to JSON, which was wrapping the callback value in quotes. I changed the format to PLAIN, and the table is now updating properly. I don't know if there's a PHP equivalent to this scenario, but if there is, check the format of what your handler is returning. Hope this helps!

josephaedrus

Just to be clear on the above bug, if you try to echo (or otherwise return) any other items from the update URL (or servlet) jeditable is unable to identify the specific response value and won't update the value in the table accordingly.

Rickard

fnReloadAjax works pretty well, but one issue is that it appears events bound to the table are unbound when the table reloads. I bind click to TD to catch user clicks and open a dialog to edit the info. After the DB is updated I reload using fnReloadAjax and the click no longer works.