i want to refresh table after edit

foxmedo

hello i want to refresh table rows with the new information cause i use Ajax to edit information

so what is the function who help me to refresh table rows without reload the page

i have found fnReloadAjax but there is no example who explain how i can use it ....

Regards

fbas

after edit, you can call oTable.fnDraw()

(this is assuming you've got your DataTables variable in oTable).

if you want to make sure your fnDraw is called AFTER your AJAX call, you probably want to set your AJAX call to call synchronously. set async: false. this way, the ajax call blocks until the call (your edit) is complete before continuing and calling the redraw.

---

if this is unclear, let me know more detail about what you're trying to do. it would help to post a link to your page, or provide some code

raspi

I also do have this issue that after updating and after deleting the table does not refresh.
It works great after adding a new row (out of the box), but I do not see any difference in code.

I am using code from examples and do have a PHP source for server-side which in both cases return just the string expected ("ok" for deleting or the value after update) but in any case get this alert (empty) box when SQL was successfull.

I tried to add somewhere this fnDraw method but had no success.

Could you please post what is different between ADD and the other functions?

I used this piece of code for initializing:
[code]
$(document).ready( function() {
var oTable = $('#tableEvents')
.dataTable({
"bJQueryUI": true
} )
.makeEditable({
sAddURL: "<?php echo $_SERVER['PHP_SELF'].'?act=add'; ?>",
sAddHttpMethod: "POST",
sUpdateURL: "update.php",
sUpdateHttpMethod: "POST",
sDeleteURL: "delete.php"
} )
[/code]

And here the PHP:
[code]
$progID = $_POST["id"];

$sql = "DELETE FROM $table WHERE progID=$progID";
$del = $db->query($sql) or die ("Fehler: Wert konnte nicht gelöscht werden!");

if ($del) echo "ok";
else echo "FEHLER BEIM LÖSCHEN";
[/code]

The SQL is working properly.

Please could you advice?

raspi

I again started from scratch without any additional features or setting, just the initialisation as seen below. But anyhow I could not manage that a deleted row or a changed cell will show up without refreshing the whole page.

I expect that this is not the designed behavior. So what do I need to do or what do I wrong.

Anybody having an idea.

The software indeed is incredible and enhances table handling tremendously.

bubuzzz

hi raspi,

i just managed to delete a row by using ajax few days ago. In the definition of datatable, you can call fnDrawCallback function and then call fnDraw to reset the dataset, sth like this:

[code]
"fnDrawCallback": function() {
$("#example tbody tr td #delete").bind('click',function(event){
event.preventDefault();
$.get(this.href,{},function(response){
oTable.fnDraw(false);
});
});
[/code]

Hope that helps.

raspi

bubuzzz,
thanks for replying. I could not yet test your suggestion but I will.

But anyhow I expect immediate update of an action should given out-of-the box in such an sophisticated code. And the examples show even this. So I was wondering why in my trial I could not figure out a proper refresh.

But in between I went through the original source code of jquery.dataTables.editable.js and changed two if-clauses which seem to be the troublemaker.

@Allan:
I have no idea why these if-clauses are written this way as I expect they do the opposit. Changing them (reset "success" and "failure") bring the correct (the expected) result as this way an edited cell or deleted row is immediately re-drawn.
Could you please double-check and tell if I am wrong or wright as this is in the current version 1.3 and I wonder why not more people claim on this.

The mentioned code for Deleting Row is:
on Line 390
[code]
function _fnOnRowDeleted(response) {
properties.fnEndProcessingMode();
var oTRSelected = $('tr.' + properties.sSelectedRowClass, oTable)[0];
if (response == "ok" || response == "") {
oTable.fnDeleteRow(oTRSelected);
//oDeleteRowButton.attr("disabled", "true");
_fnDisableDeleteButton();
_fnSetDisplayStart();
properties.fnOnDeleted("success");
}
else {
properties.fnShowError(response, "delete");
properties.fnOnDeleted("failure");
}
[/code]

I changed from:
[code]
if (response == "ok" || response == "") {
[/code]
to
[code]
if (response != "ok" || response == "") {
[/code]


and the same for Editing a Cell
Line 150

[code]
function _fnApplyEditable(aoNodes) {
if (properties.bDisableEditing)
return;
var oDefaultEditableSettings = {
event: 'dblclick',
"callback": function (sValue, settings) {
properties.fnEndProcessingMode();
var status = "";
if (sNewCellValue == sValue) {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sNewCellDisplayValue, aPos[0], aPos[2]);
status = "success";
} else {
var aPos = oTable.fnGetPosition(this);
oTable.fnUpdate(sOldValue, aPos[0], aPos[2]);
properties.fnShowError(sValue, "update");
status = "failure";
}
[/code]

where
[code]
if (sNewCellValue == sValue) {
[/code]

went to
[code]
if (sNewCellValue != sValue) {
[/code]

palani

Nothing wrong in the original code... trimming sValue should work
if (sNewCellValue == sValue.trim()) {

raspi

Back from vacation and curious if anybody replied....

@palani:
Hmmmm, you're right. Trimming works as well as my solution does with the checking of non-equality. But I do not know why trimming is ok. As for my understanding I expected that the status "success" should be set if the new value is different from the old one.
What does trimming do in this specific case?

But... for both solutions the original code needs to be updated / changed.
Will alan provide a new fix for that?

And still... I wonder why this behavior is in my stuff only (obviously) and why no others claim for that too?

I would be interested in feedback from anybody else figuring this little "problem" - which of course needed some hours to figure out.

nozha

thanks for your help