Inline Row Editing
Inline Row Editing
So I have come a long way since I started this implementation and need some assistance as I have been struggling to get it all working properly.
I have a table of 10 columns one of which is the edit link column. During the edit process one column (Promo Code) is not editable so I had to work on the JS for editRow so that it would work. Saving the rows works fine. However the issue at hand comes when you have to have restoreRow called or when you add a new record.
I created a new function called addRow and have used this because when "Adding" a record you must edit ALL columns INCLUDING promo code.
Below is an explanation of the issues I am struggling with and also the full code for the data table.
ISSUE: When I click the add new promo link it reloads the table and no new row is inserted at the start of the table. Also when I click the edit link for one row and then go click it for another row things go crazy and I start to see errors like the following in my console. Here is exactly what happens through the process. I click Edit link and a row becomes Editable. I click yet another Edit link and the first row goes back to being non-editable. The second row becomes Editable but then quickly goes back to being non-Editable. When I click any other Edit link I get the following error.
[code]
aData is null
https://www.domain.com/admin-assets/js/gsn.mktool.promotions.js
Line 93
[/code]
Line 93 is part of restoreRow and is below.
[code]
oTable.fnUpdate( aData[i], nRow, i, false );
[/code]
So with the problem explained here goes the code for the data table I will start with the HTML
[code]
Add New Promotion
Edit
Type
Name
Code
Start Date
End Date
Close Date
Amount
Total Awards
Total Max
Loading data from server
[/code]
and here is the FULL JS file which includes everything the datatable will need to do.
I was going to put the code here however when I tried to post it told me the body was 4000+ characters too long.
http://www.josephcrawford.com/code/gsn.mktool.promotions.js
Clicking on the add new promo link only makes the following request in my console
[code]
https://www.domain.com/admin/mktoolpromotionsajax/?sEcho=3&iColumns=10&sColumns=&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&mDataProp_2=2&mDataProp_3=3&mDataProp_4=4&mDataProp_5=5&mDataProp_6=6&mDataProp_7=7&mDataProp_8=8&mDataProp_9=9&iSortingCols=1&iSortCol_0=1&sSortDir_0=desc&bSortable_0=true&bSortable_1=true&bSortable_2=true&bSortable_3=true&bSortable_4=true&bSortable_5=true&bSortable_6=true&bSortable_7=true&bSortable_8=true&bSortable_9=true
[/code]
Any assistance in getting this to work would be appreciated it's the last and final step to get to the finished tool :)
I have a table of 10 columns one of which is the edit link column. During the edit process one column (Promo Code) is not editable so I had to work on the JS for editRow so that it would work. Saving the rows works fine. However the issue at hand comes when you have to have restoreRow called or when you add a new record.
I created a new function called addRow and have used this because when "Adding" a record you must edit ALL columns INCLUDING promo code.
Below is an explanation of the issues I am struggling with and also the full code for the data table.
ISSUE: When I click the add new promo link it reloads the table and no new row is inserted at the start of the table. Also when I click the edit link for one row and then go click it for another row things go crazy and I start to see errors like the following in my console. Here is exactly what happens through the process. I click Edit link and a row becomes Editable. I click yet another Edit link and the first row goes back to being non-editable. The second row becomes Editable but then quickly goes back to being non-Editable. When I click any other Edit link I get the following error.
[code]
aData is null
https://www.domain.com/admin-assets/js/gsn.mktool.promotions.js
Line 93
[/code]
Line 93 is part of restoreRow and is below.
[code]
oTable.fnUpdate( aData[i], nRow, i, false );
[/code]
So with the problem explained here goes the code for the data table I will start with the HTML
[code]
Add New Promotion
Edit
Type
Name
Code
Start Date
End Date
Close Date
Amount
Total Awards
Total Max
Loading data from server
[/code]
and here is the FULL JS file which includes everything the datatable will need to do.
I was going to put the code here however when I tried to post it told me the body was 4000+ characters too long.
http://www.josephcrawford.com/code/gsn.mktool.promotions.js
Clicking on the add new promo link only makes the following request in my console
[code]
https://www.domain.com/admin/mktoolpromotionsajax/?sEcho=3&iColumns=10&sColumns=&iDisplayStart=0&iDisplayLength=10&mDataProp_0=0&mDataProp_1=1&mDataProp_2=2&mDataProp_3=3&mDataProp_4=4&mDataProp_5=5&mDataProp_6=6&mDataProp_7=7&mDataProp_8=8&mDataProp_9=9&iSortingCols=1&iSortCol_0=1&sSortDir_0=desc&bSortable_0=true&bSortable_1=true&bSortable_2=true&bSortable_3=true&bSortable_4=true&bSortable_5=true&bSortable_6=true&bSortable_7=true&bSortable_8=true&bSortable_9=true
[/code]
Any assistance in getting this to work would be appreciated it's the last and final step to get to the finished tool :)
This discussion has been closed.
Replies
[code]
var aData = oTable.fnGetData(nRow);
[/code]
Any thoughts why this would happen?
Allan
When I load my table and I click Edit on the first row nRow gets set to tr#619.odd in my Watch Panel. When I click Edit on the second row it says tr#417.even
Is there a way I could console.log the columns for the tr to see what tr#417 contains?
One thing to keep in mind is the fact that I am using Server Side data.
Thanks,
Joseph Crawford
:-)
I don't think that server-side processing will have any issue with this, as long as the row is still in the DataTables cache. You can have a look at the cache using:
console.dir ( oTable.fnSettings().aoData );
The TR elements are called 'nTr' in the aoData array objects.
Allan
I was not quite sure how to copy the output so I took a screen shot of FireBug
I put the command as the first command in restoreRow(), just before the fnGetData call.
http://www.josephcrawford.com/pics/dt-cache.png
as you can see both records exist in the cache
I am going to try the same but for the editRow method, will report back soon.
Yep something happens to my data somehow somewhere between restoreRow and editRow because in this second attempt to dump out the cache but this time in the editRow method as the first command I get the following results.
http://www.josephcrawford.com/pics/dt-cache1.png
Notice the second record in the cache is all NULL. Thoughts?
Allan
The page loads and makes the initial ajax request to get data
I click Edit for the first row in the table and the form fields appear
I then click Edit on the 2nd row in the table and it restores the first row however
it then sets nEditable = nRow and calls editRow on that new row. This is where
it data is coming back null.
There is only one server request being made. As for drawing the table restoreRow updates the columns and then calls fnDraw so if fnDraw clears the cache that is the problem.
Thanks it took me a bit to grasp what you were saying lol. I removed the draw event and everything seems to be working perfect.
Upon clicking my Add New Promo link this code is triggered
[code]
$('#newPromo').click( function (e) {
e.preventDefault();
var aiNew = oTable.fnAddData( [
'Edit',
'', '', '', '', '', '', '', '', ''
] );
var nRow = oTable.fnGetNodes( aiNew[0] );
addRow( oTable, nRow );
nEditing = nRow;
} );
[/code]
However nRow is null in my debugger. aiNew in my debugger shows as the following
[code]
aiNew [ 10 ]
0 10
[/code]
Thoughts on why this would return null?
So in this case, you don't want to add a row like that, since it will do a redraw. You probably want to use appendChild() or something like that from the DOM to add the new row, and then when submitted to the server the redraw will add the new data in.
Allan
I should note that I did explicitly tell fnAddData not to redraw the table and it still was not working. I will attempt to use the DOM to get the job done. Thanks.
One more question about manipulating with the DOM. If I add a row using jquery for something like the following
[code]
$('#newPromo').click( function (e) {
e.preventDefault();
$('#promos tr:last').remove();
$('#promos > tbody > tr').eq(0).before('Edit');
var nRow = oTable.fnGetNodes( 0 );
addRow( oTable, nRow );
nEditing = nRow;
} );
[/code]
So I have gotten everything to work or so I thought. I am able to add a new row to the table, remove the last row so that the row counts remain the same in the table. However when nRow is set by getting the 0 node from the table it is actually the original first row in the table and NOT the new row I just added. Could you assist with what might be going on with that?
So in this case, just stick to using jQuery / DOM methods: nRow = $('#promos > tbody > tr:eq(0)')
Allan
unfortunately going the DOM route is going to make it so that I have to rewrite all methods for save, restore, edit, etc.
I have to do this because using jquery and the dom when edit/save/restore rows are called it has no idea of the data because fnGetData.
Thanks for the information I am going to be working on a rewrite for this that will not use the DT API. Unless it can be done using server side processing.
The one thing I am having a bit of trouble understanding is how I will restore the row since the data will not be stored in the DT internal data. Upon clicking Edit row I think I need to create an array of the real data, that way restore row has the "real" data to restore.