DataTables-editable problem with showing new rows instantly.

mathias

I have now installed and configured DataTables-editable.

I can update values and it shows them immediately (no page reload necessary). Same goes for deleted rows.

But when I add a new row, I have to reload the page to see it. I don't understand why.

In the documentation it says, I have to return the $id of the row. I do that. Just like I return $value for updates and 'ok' for deletes.

Is there something else I have to do?

I'm using symfony 1.4 as a framework.

[code]


$(document).ready(function () {
$('#services').dataTable({bJQueryUI: true}).makeEditable({


sAddURL: "service/add",
sUpdateURL: "service/update",
sDeleteURL: "service/delete"
});
});

[/code]

these are the actions
[code]
public function executeUpdate(sfWebRequest $request)
{
$id = $_REQUEST['id'] ;
$value = $_REQUEST['value'] ;
$column = strtolower($_REQUEST['columnName']) ;
$columnPosition = $_REQUEST['columnPosition'] ;
$columnId = $_REQUEST['columnId'] ;
$rowId = $_REQUEST['rowId'] ;

$service = Doctrine_Core::getTable('service')->find($id) ;
$service[$column] = $value;
$service->save();

}



public function executeDelete(sfWebRequest $request)
{
$id = $_REQUEST['id'] ;
$service = Doctrine_Core::getTable('service')->find($id) ;
$service->delete();

}

public function executeAdd(sfWebRequest $request)
{
$service = new service();
$service->setContactPerson($_REQUEST['service']['contactPerson']);
$service->setTitle($_REQUEST['service']['title']);
$service->setWebsite($_REQUEST['service']['website']);
$service->setDescription($_REQUEST['service']['description']);

$service->save();

$this->id = $service->getId();
}
[/code]


and these are the templates (which return the values needed)

[code]
<?php

/*
* deleteSuccess.php
*/

echo "ok";
?>
[/code]

[code]
<?php

/*
* addSuccess.php
*/

echo $id;
?>
[/code]

[code]
<?php

/*
* updateSuccess.php
*/

echo $_REQUEST['value'];
?>
[/code]


Help would be very much appreciated!

fbas

The call to add a row is just adding the data on the backend. You can do one of the following to show the new row on the client side:

1) use the fnAddData API function to add a row .. I think this only adds to the bottom of the table, so .. meh.
http://www.datatables.net/ref

2) refresh your table by calling fnDraw or install and use the plug-in function fnStandingRedraw. I recommend fnStandingRedraw, which refreshes the data, but keeps the same pagination and sort and filter settings.
http://www.datatables.net/plug-ins/api

mathias

thanks very much for your answer, I will look into your solutions right now.

what i don't understand:

http://jquery-datatables-editable.googlecode.com/svn/trunk/addingrecords.html

doesn't seem to implement any of your solutions yet it still has the feature. does it use yet another solution?

fbas

ahh, i didn't realize it did so much automatically. I had been writing my own add routines.

but yes, the "automatic" method in editable calls fnAddData

I might have been wrong about fnAddData adding to the end of the table. In the example fnAddData takes sorting into account.

line 298:
[code]
///Event handler called when a new row is added and response is returned from server
function _fnOnRowAdded(data) {

/// ... skip to line 325

//Add values from the form into the table
var rtn = oTable.fnAddData(values);
var oTRAdded = oTable.fnGetNodes(rtn);
//Apply editable plugin on the cells of the table
_fnApplyEditable(oTRAdded);
//add id returned by server page as an TR id attribute
properties.fnSetRowID($(oTRAdded), data);
//Close the dialog
oAddNewRowForm.dialog('close');
$(oAddNewRowForm)[0].reset();
$(".error", $(oAddNewRowForm)).html("");

_fnSetDisplayStart();
properties.fnOnAdded("success");
}
[/code]

[quote]
To enable adding new record you will need to create a custom HTML form with an id "formAddNewRow", where user can enter information about new record. When Editable plugin detects Add new record form, it will generate add button in "add_delete_toolbar".
[/quote]

mathias

so basically, by returning $id the table should be updated automatically? I do return $id in addSuccess.php, but it doesnt work, I have to refresh.

yet, delete and update work automatically. Any idea why/how/whether add is different than delete/update?

I'm going crazy...

mathias

ouch, shame on me. this is what i missed out on:

[quote]Form can have more elements that a table columns. To map the values in the form with the columns in the table, each element that matches the table columns must have a rel attribute. Rel attributes of the elements must match the column positions in the table. If the records is successfully added on the server-side, plugin will take all elements that have rel attribute and place them in the table using the rel attributes as a column positions. In the example above name, address and country will be added as cells 0, 1, and 2 in the original table.[/quote]

now it works, magic!