I think this is great! Just one issue. How do you update the row's css with the correct background color? If I enter an 'X' in the last field I would expect the row to change to the appropriate background color.
This would be perfect since we need to intercept edits to attempt to lock the row on the database before anything is actually changed, and unlock the row on cancellations, and after updates (we use a separate table to control locking). I'm fairly new to JQUERY and this stuff. Is it possible to make dataTables with makeeditable plugin work like this with all of the functionality? How can I use the jeditable plugin with this approach?
@w9r1: The makeeditable plug-in isn't related to this thread - you might be better opening a new thread with questions about how to modify that plug-in. Having said that, you will almost certainly need to modify it to have it send an XHR to the server to request that it locks a DB row (and that will need a time out of some kind I guess) when editing starts, and then have it unlock when the editing is complete and the update done.
The are a couple of things going on with the main demo http://datatables.net/blog/Inline_editing when you add more then 1 row. Let's say you add three more rows and all of them are in edit mode. After filling the text for 1 row and pressing save sometimes it resets the input values without saving and other times resets the text of all the rows that are in edit mode.
I think the correct thing would probably be to not allow more than one empty new row at a time in the demo. This could be done by adding the code:
[code]
// Only allow a new row when not currently editing
if ( nEditing !== null ) {
return;
}
[/code]
to the 'add' event handler. This might be what is wanted for the interaction, it might not be... Ultimately some code would need to be crafted for each use case. The intention with the blog post is to show how it might be done and provide a solid starting point, rather than a column plug-in solution. Eventually I'll write an editing plug-in for DataTables - the reason I haven't thus far is that there are about a million different ways to do the interactions needed, and I don't want to dictate them for the plug-in.
I was getting confused setting the textarea value until i found that textarea has no value attribute, its value comes between tags, i.e: my text. Problem solved. :)
I'm trying to use that example with FixedColumns enabled and it breaks at restore row [code] oTable.fnUpdate( aData[i], nRow, i, false );[/code], getting data from row [code]var aData = oTable.fnGetData(nRow);[/code] returns null
hey Alan,
thanks for the example,but I m getting one issue with the working of jquery.As in my case I am populating the table with the help of ITERATOR, I got 3 rows in my dynamic table and the edit functionality works only for one row(last row).
kindly help me out .
when i clicked to update a row and instead of clicking on save, i clicked on delete, the row was deleted but after clicking on edit another row, i got this error :
aData is null
[Stopper sur une erreur]
oTableGestion.fnUpdate( aData[i], nRow, i, false );
i don't know what causes that problem, any help would be appreciated.
Thanks in advance.
We are exactly using the datatables this way. when the table-layout:auto css attribute made the whole ui to flicker in Edit mode(had to move to fixed layout), you should think of a solution that auto mode can be used without flickering.
I have to use this with a drop down list...any idea how? Also I have to access the added data and the updated once and save into MySQL database when users click a button.
I don't really understand the first change I'm afraid. The server-side processing mode of DataTables must send sEcho and sEcho must be returned. If it isn't being sent, then you probably aren't using DataTBles in server side processing mode.
Regarding the second issue, can you link to a test page showing the issue please? I example appears to work okay there.
Allan, thank you for your kindness in sharing and maintaining this fantastic plug-in.
Got the codes working with full PHP back end.
http://code.google.com/p/jquery-datatables-in-line-editing/
Hope other members in the community can use my demo.
I installed the latest Version and had a tiny issue with the Table as it is called partners and in the code adressed with Partners. After changing the capital letter in the code it worked just fine.
Sure - you would need to add a little bit of code to add that ability to the technique used in my blog post though. Or consider using Editor which has select menu options built in and other field types can be added with plug-ins.
@Allan: Thank you for early reply. I am trying to use drop down list instead of text input , but I am not getting it right way. can you please tell, how can i do it?
I have got the basic functionality working, but am now stuck on how to incorporate the back end to upate the database. I am using ColdFusion. What we generally do is:
1. Collect our input (This bit works)
2. Use hidden input fields to indicate what action to take
3. Do a submit of the form
4. Server then looks at the form elements and determines what to do.
So I have CF code that looks like this immediately after my tag
[code]
alert("hdnaction exists = #form.hdnaction#");
Action #form.hdnaction#
Dealer #form.hdndlr#
Name #form.hdnname#
Address #form.hdnsddr#
Location #form.hdnloc#
Postcode #form.hdnpcode#
State #form.hdnstate#
Country #form.hdnctry#
Phone #form.hdnphone#
<!--- some variables to apply any edits --->
[/code]
This is looking to see if there is a form, and a form element called hdnaction. Initially it won't find one, but I expect it should once we submit the form.
I have modified the functions binding the add/edit/save/delete links as follows
[code]
$('#dealers a.delete').live('click', function (e) {
e.preventDefault();
$('#dealers a.edit').live('click', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if ( nEditing !== null && nEditing != nRow ) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow( oTable, nEditing );
editRow( oTable, nRow );
document.aa_TestEdit.hdnaction.value = "edit";
nEditing = nRow;
}
else if ( nEditing == nRow && this.innerHTML == "Save" ) {
/* Editing this row and want to save it */
saveRow( oTable, nEditing );
nEditing = null;
}
else {
/* No edit in progress - let's start one */
editRow( oTable, nRow );
document.aa_TestEdit.hdnaction.value = "edit";
nEditing = nRow;
}
} );
[/code]
As you can see, I set the hdnaction input to indicate what action is to be taken when we submit the form.
At the end of the saveRow function, I have added a call to updatedata, which looks like this
[code]
function updatedata(aData){
document.aa_TestEdit.hdndlr.value = aData[0];
document.aa_TestEdit.hdnname.value = aData[1];
document.aa_TestEdit.hdnaddr.value = aData[2];
document.aa_TestEdit.hdnloc.value = aData[3];
document.aa_TestEdit.hdnpcode.value = aData[4];
document.aa_TestEdit.hdnstate.value = aData[5];
document.aa_TestEdit.hdnctry.value = aData[6];
document.aa_TestEdit.hdnphone.value = aData[7];
document.getElementById("aa_TestEdit").submit();
}
[/code]
Notice the submit(). This does do a submit, but the server doesn't see the form, so doesn't know what to do. Once this is working correctly, I intend to replace the displays of the data with either Delete, or Insert/Update, as appropriate, before reloading the page with the new data.
Any ideas why the server can't see the form when I do my submit?
Replies
Btw got an error after deleting one item and click edit :
aData is null
[Break On This Error] oTable.fnUpdate( aData[i], nRow, i, false );
Allan
The are a couple of things going on with the main demo http://datatables.net/blog/Inline_editing when you add more then 1 row. Let's say you add three more rows and all of them are in edit mode. After filling the text for 1 row and pressing save sometimes it resets the input values without saving and other times resets the text of all the rows that are in edit mode.
[code]
// Only allow a new row when not currently editing
if ( nEditing !== null ) {
return;
}
[/code]
to the 'add' event handler. This might be what is wanted for the interaction, it might not be... Ultimately some code would need to be crafted for each use case. The intention with the blog post is to show how it might be done and provide a solid starting point, rather than a column plug-in solution. Eventually I'll write an editing plug-in for DataTables - the reason I haven't thus far is that there are about a million different ways to do the interactions needed, and I don't want to dictate them for the plug-in.
Allan
Is it possible to use textareas instead of inputs text?
Allan
thanks for the example,but I m getting one issue with the working of jquery.As in my case I am populating the table with the help of ITERATOR, I got 3 rows in my dynamic table and the edit functionality works only for one row(last row).
kindly help me out .
when i clicked to update a row and instead of clicking on save, i clicked on delete, the row was deleted but after clicking on edit another row, i got this error :
aData is null
[Stopper sur une erreur]
oTableGestion.fnUpdate( aData[i], nRow, i, false );
i don't know what causes that problem, any help would be appreciated.
Thanks in advance.
El garch
http://code.google.com/p/jquery-datatables-in-line-editing/
Regarding the second issue, can you link to a test page showing the issue please? I example appears to work okay there.
Allan
Got the codes working with full PHP back end.
http://code.google.com/p/jquery-datatables-in-line-editing/
Hope other members in the community can use my demo.
Regards,
Allan
Regards
Ivo
Thanks!
Allan
Allan
1. Collect our input (This bit works)
2. Use hidden input fields to indicate what action to take
3. Do a submit of the form
4. Server then looks at the form elements and determines what to do.
So I have CF code that looks like this immediately after my tag
[code]
alert("hdnaction exists = #form.hdnaction#");
Action #form.hdnaction#
Dealer #form.hdndlr#
Name #form.hdnname#
Address #form.hdnsddr#
Location #form.hdnloc#
Postcode #form.hdnpcode#
State #form.hdnstate#
Country #form.hdnctry#
Phone #form.hdnphone#
<!--- some variables to apply any edits --->
[/code]
This is looking to see if there is a form, and a form element called hdnaction. Initially it won't find one, but I expect it should once we submit the form.
I have modified the functions binding the add/edit/save/delete links as follows
[code]
$('#dealers a.delete').live('click', function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow( nRow );
document.aa_TestEdit.hdnaction.value = "delete";
} );
$('#dealers a.edit').live('click', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if ( nEditing !== null && nEditing != nRow ) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow( oTable, nEditing );
editRow( oTable, nRow );
document.aa_TestEdit.hdnaction.value = "edit";
nEditing = nRow;
}
else if ( nEditing == nRow && this.innerHTML == "Save" ) {
/* Editing this row and want to save it */
saveRow( oTable, nEditing );
nEditing = null;
}
else {
/* No edit in progress - let's start one */
editRow( oTable, nRow );
document.aa_TestEdit.hdnaction.value = "edit";
nEditing = nRow;
}
} );
[/code]
As you can see, I set the hdnaction input to indicate what action is to be taken when we submit the form.
At the end of the saveRow function, I have added a call to updatedata, which looks like this
[code]
function updatedata(aData){
document.aa_TestEdit.hdndlr.value = aData[0];
document.aa_TestEdit.hdnname.value = aData[1];
document.aa_TestEdit.hdnaddr.value = aData[2];
document.aa_TestEdit.hdnloc.value = aData[3];
document.aa_TestEdit.hdnpcode.value = aData[4];
document.aa_TestEdit.hdnstate.value = aData[5];
document.aa_TestEdit.hdnctry.value = aData[6];
document.aa_TestEdit.hdnphone.value = aData[7];
document.getElementById("aa_TestEdit").submit();
}
[/code]
Notice the submit(). This does do a submit, but the server doesn't see the form, so doesn't know what to do. Once this is working correctly, I intend to replace the displays of the data with either Delete, or Insert/Update, as appropriate, before reloading the page with the new data.
Any ideas why the server can't see the form when I do my submit?
Thanks
Ron
Is there a Datatables editing example that shows how to do client side validation and server side validation and show validation errors.
Also, I vote to have a simple serverside aJax example which shows the validation and updating using MySql PHP.
Best, LA Guy