joeyzhao2018 / jquery-datatables-editable Goto Github PK

What steps will reproduce the problem?
1. Create a table where the first column is hidden (is the ID) and the second 
column is visible.
2. Use the add toolbar to add a new entry.


What is the expected output?
I should see the TR inserted with the ID corresponding to the data returned 
from the ajax call.

What do you see instead?
The data is returned from the server correctly. The oTable.fnAddData is called, 
however the first entry in the 'values' array is 'undefined'. The TR then gets 
its ID updated to be the value of the 'data' via properties.fnSetRowID. Then 
_fnSetDisplayStart comes behind it and undoes that and sets the TR ID to 
'undefined' because the data in oTable has 'undefined' for the first column.

What I think needs to happen is that we should be checking to see if the first 
column is visible. If not, then pass the value of the 'data' response as the 
first column since it is the hidden ID column.

What version of the product are you using? On what operating system?
jquery-datatables-editable: 1.1.8
jquery: 1.6.1
datatables: 1.7.6
Windows XP (Chrome, Firefox, doesn't matter).

What steps will reproduce the problem?
1. Create a DataTable from Ajax using mDataProp (JSON) for aoColumns.

What is the expected output?
The first column "id" of each "tr" attribute should be generated according to 
documentation.

What do you see instead?
The "id" attributes isn't generated.

What version of the product are you using? On what operating system?
jquery.dataTables.min.js - 1.8.1
jquery.dataTables.editable.js - 1.3
Linux - 2.6.39.3

Please provide any additional information below.
If instead I use a structure like that 
http://jquery-datatables-editable.googlecode.com/svn/trunk/ajax_source.js (just 
an array) everything works as expected.

Thanks for this great plugin.

I'm facing the requirement that when a cell is updated and sumbitted to a 
service, I need to add to that request a timestamp with the r
etrieval date of the original request of the the table. This is needed to do a 
server side staleness check of the metadata of the table
. I found no way to accomplish this except in a fnOnEditing function adding the 
timestamp to the submitted value as VALUE::1310741518719, but that gives me all 
sorts of headaches in both the client and the service. 
It would be nice if there would be a way of adding additional parameters to the 
form data that get submitted for an update.
Is there a way to do this?

I'm using version 1.3 of jquery.dataTables.editable.js with 1.8.1 of DataTables.

Paul

On the JEditable site is placed time picker custom editor see 
http://www.appelsiini.net/projects/jeditable/custom.html. This editor should be 
integrated into the plugin as a new editor type. 
It depends on the http://www.phpletter.com/Our-Projects/AjaxFileUpload/ plugin.

Check-box is not a standard JEditable type but it is implemented on the 
http://www.pastie.org/893364. This type should be integrated with DataTable 
Editable plugin.

What steps will reproduce the problem?
1. Create datatable using jeditable and ColVis
2. set up aoColumns element values for makeEditable
3. hide a column

What is the expected output? What do you see instead?
Instead of the edit attributes being re-indexed to the visible columns they are 
incorrectly assigned.

For example:

If I created a select pulldown for column A and then hid it, the next visible 
column would now have the select.

What version of the product are you using? On what operating system?


Please provide any additional information below.
I think you may have already identified this as an issue, but if you know of 
any workarounds I would appreciate it.

Leo

Initialising dataTable.makeEditable on a selector of a class rather than an id, 
e.g. '.foo', will make only the first table editable. I have attached a minimal 
example that shows this.

dataTable itself works on a class selector, datatables-editable should too.

I read 
http://jquery-datatables-editable.googlecode.com/svn/trunk/configure-dom.html - 
maybe the problem is in relation to the add/remove buttons. But in my use, I 
don't want to add/remove records, just edit the existing ones, so I have no 
buttons for those functions anyway. It shouldn't be assumed that people have 
the add/remove functionality, it works perfectly well for many purposes without 
it.

It would be good to enable developers to pass functions that will be called 
before/after add,delete,update methods are called. These functions should be:
On before adding
On after adding
On before editing
On after editing
On before deleting
On after deleting

I've had a ton of trouble trying to use this plugin in combination with row 
grouping, as copy-pasted from 
http://datatables.net/release-datatables/examples/advanced_init/row_grouping.htm
l . 

If I don't specify aoColumns it works fine, but if I use aoColumns, I can click 
on cells and it seems like I can edit them, but when I click away the text is 
not saved, and the sUpdateURL function is not performed.

See example file attached, where two tables have row grouping, one has 
makeEditable with no aoColumns, and one has aoColumns.

_fnOnRowDelete() should really not use a GET request, but rather a POST 
request, and possibly an option for using a DELETE method.

http://www.cs.tut.fi/~jkorpela/forms/methods.html has more details on the use 
of GET and POST.

What steps will reproduce the problem?
1. Click the add button to open the add form.
2. Leave a required field or fields blank.
3. Click the OK/Submit button to trigger the validation errors.
4. Click the cancel or close button to close the form.
5. Click the add button to re-open the form. The existing errors remain, 
instead of being cleared.

What version of the product are you using? 
1.2.5

It would be nice to be able to add a new row to the table without a dialog box, 
just by navigating to a new row on the datatable (click an "add" button, or nav 
to the last row etc.) much like you would add a new row in excel or other 
desktop grids.

hello,

don't know how to post a request for enhancement ... sorry for that.

my question is: could it possible to use the edit form for updating rows with a 
'modify' button that woulb be enabled when a row is selected 

I'm trying to do that but reusing add new row functions but the updatyed row si 
added to the table ... not the good way I think 

thanks 
Phil

Jovan, this is probably more an enhancement request than a question, I think:

Background:
I have a column (8) with lots of text that will mess up the look of datatables 
so it needs to be hidden. Datatables provide a way to display any column via 
row details i.e. call fnFormatDetails  to display the hidden column e.g. 
aData[8]

Question/Request is to be able to edit the info from aData[8] in 
the show row details form with your editables plugin?

Datatables row details doc:
http://www.datatables.net/examples/server_side/row_details.html

Similar request:
http://datatables.net/forums/comments.php?DiscussionID=4175


Thanks

What steps will reproduce the problem?
1. Editing inline Data is giving the below exception ::

Node cannot be inserted at the specified point in the hierarchy" code: "3 
Node cannot be inserted at the specified point in the hierarchy" code: "3
fragment.appendChild( ret[i] ); 

What is the expected output? What do you see instead?

Edit should have updated the data, but we see the error.

It worked fine with 
jQuery JavaScript Library v1.4.4

but giving error with 

jQuery JavaScript Library v1.5.1

and I'm using jquery.dataTables.editable.js Version 1.0.0

is there any way we can make this work in v1.5.1

What version of the product are you using? On what operating system?


Please provide any additional information below.

Just thought I'd post here for now, but here is an example of using this plugin:

http://www.modeltraintracker.com/sandbox/

Login with username 'testuser' and password 'testuser'.  Then you can see how 
you can add/modify/delete entries.  The popup window for editing is custom code 
that I wrote on top of the plugin. 

This works and looks best in Firefox.

Hello,

In your code sample I found a small issue : 

oAddNewRowCancelButtonOptions: { 
                label: "Close",
                                class: "back-class",
                                name: "action",
                                value: "cancel-add",
                                icons: { primary: 'ui-icon-close' }
                            },

class property is not accepted by IE (8)

Using the latest SVN, it would be nice to be able to pass in additional 
options, besides the id of the element, when deleting something.  

I have a common "delete.php" file that looks for a hidden var in the POST 
variable which guides it through the appropriate logic path dictating what is 
being deleted (item, manufacturer, etc).  

Enabling additional options for the deletion, maybe something along the lines 
of:
deleteOptions : { {"ref","item"} }

(where "ref" is the variable name and "item" is the value)

Would enable this functionality. The additional information could the be 
appended to the "data" variable in _fnDeleteRow.

What version of the product are you using? 
1.2.4

On the DataTables site there is a KeyTable plugin that allows you to
navigate through the table in the excel-like manner, and it can be
integrated with jEditable see
http://www.datatables.net/release-datatables/extras/KeyTable/editing.html.
Key Table in the current version cannot be integrated with dataTables Editable. 
It would be good to add new initalization parameter oKeyTable so key table can 
be associated to the plugin. Proposed method:

1. Add new parameter oKeyTable and pass key table instance to makeEditable call:

    var oTable = $('#example').dataTable();

    var keys = new KeyTable( {
        "table": document.getElementById('example'),
        "datatable": oTable
    } );

    oTable.makeEditable({ oKeyTable: keys});

2. If possible it would be good to have some compact/inline call syntax, e.g.:

     $('#example').dataTable().makeEditable({ 

                oKeyTable: new KeyTable( {
                    "table": document.getElementById('example'),
                    "datatable": oTable
            } );
     })

When inspecting (using FireBug) the example at:

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

The table key fields aren't populated via JSON. Is this a bug, or am I just 
unable to find the documentation on how to structure the JSON so the table rows 
get ID values that correspond with the database key fields?

What steps will reproduce the problem?
1. Don't specify 'rel' attributes in the AddRow form
2. Outside of the form, add html like this - <tr><td>&nbsp;</td></tr>
3. Bring up an Add Row dialog, click ok.

What is the expected output? What do you see instead?

I expected the row to be added, but you'll see "Unexpected call to method or 
property access" instead.

What version of the product are you using? On what operating system?

1.3, IE8, Windows XP

Please provide any additional information below.

It's not clear that the 'rel' attribute is very important to Add Row.  When I 
didn't specify it, your code at line: 283 didn't find any input elements.  This 
caused 'oTRAdded' at line 303 to be null, and this was passed to applyEditable, 
and at line 222 then looks for ALL "td" elements in the HTML (parent object is 
NULL), and then when it hit my invalid <Tr><td> above, it then said "Unexpected 
call to method or property access".

So I have a request ;)

Either update your documentation page to indicate that 'rel' is a required 
attribute and MUST be specified.
Or change your code to warn if no inputs with a 'rel' attribute were found.

What steps will reproduce the problem?
1. Use add/delete toolbar.
2. Click 'add'
3. Enter some data in the form and hit the enter key

What is the expected output? What do you see instead?
I would expect that the 'ok' button click would be triggered. Or at a minimum I 
would expect that the enter key to be ignored.
Instead, the form disappears and the page appears to refresh. 


What version of the product are you using? On what operating system?
jquery.datatables.editable: 1.2.1
jquery: 1.6.1
jquery-ui: 1.8.13

Please provide any additional information below.
Base jquery-ui dialog doesn't seem to have this issue (can even verify that 
looking at the jquery-ui demo page).

I haven't been able yet to pinpoint what is happening when hitting enter.
It doesn't appear to be hitting any of the functions inside this plugin (like 
_fnOnCancelRowAdding).

Can you please add fnOnCancel?

I modify the text in a cell before I display it but I remove the decorations 
before I edit it. If I change the cell all is well, but if I cancel then if 
reverts back to the un-decorated state and there are no triggers that I can use 
to put it back.

Since "onreset" (in jeditable) occurs before the reset it is no good.

Hopefully this makes sense.

Leo

What steps will reproduce the problem?
1. make editable a datatable
2. specify parameter "aoColumns"
3. use callback parameter in a column (like in jeditable page)

What is the expected output? What do you see instead?
The callback parameter should return value and settings vars, but it doesn´t 
works

What version of the product are you using? On what operating system?
The last one, recently download :). Windows Vista SO

Please provide any additional information below.

i don´t know if is an error or there is a reason to avoid the use of 
"callback" in a specify column.

By default the oConfirmRowAddingButton and oCancelRowAddingButton are added 
directly to the oAddNewRowForm.  I have made a minor customization that will 
now add these buttons by default to the form dialog instead.

This change allows for a much cleaner form and also allows for better jquery ui 
theming 

I have also added two additional options sAddNewRowOkButtonText & 
sAddNewRowCancelButtonText which will allow a developer to override the default 
"Ok" and "Cancel" button text.


I have attached the updated code to this issue.

Hi, 
after a problem, adding a comment on the following lines let me close the 
dialog popup window:

         //Called when user cancels adding new record in the popup dialog
        function _fnOnCancelRowAdding(event) {
            //Close the dialog
            oAddNewRowForm.dialog('close');
//            $(oAddNewRowForm)[0].reset();
            $(".error", $(oAddNewRowForm)).html("");
            event.stopPropagation();
            event.preventDefault();
        }
if not, IE and FireFox issue an error (inexistent method on the object).

is that a bad work around , what is the purpous of this code ? 
thanks and sorry for noise 

Would it make more sense to dismiss the add dialog when the form is submitted?

It seems a bit odd (especially with bProcessing=true) that the dialog is still 
visible, yet in the background you see the processing box show up.

With the recent changes to accomodate the custom delete dialogs, it seems to 
operate more like what I would expect.

If an error happens, perhaps the box could then be re-displayed, etc.. 

What version of the product are you using? On what operating system?
1.2.4

Date time columns should be edited via JQuery UI calendar editor. This editor 
should be integrated into the plugin.

Hello,

I'm trying to use your script to add a record into a mysql base.

With the last version (1.2.8.) it's impossible to validate the form (Ok and 
cancel buton don't make any action)(the dialog box is still visible).

With an older version of the script, I can validate the form, but the optional 
Add page (sAddURL) is not use. The page (no XHR transaction).
The page is reloaded (like a $_SERVER['PHP_SELF'] )with this url
mypage.php?input1=value1&input2=value2

I don't have any problem with update fonction.

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
    $('#table_edit').dataTable({
            "sPaginationType": "full_numbers",
            "bJQueryUI": true,
            "aaSorting": [ [0,'asc'], [1,'asc'] ],
            "oLanguage": {"sUrl": "javascript/datetable_langFR.txt" }           
        }); 
    $('#table_edit').dataTable().makeEditable({
                            sUpdateURL: "script/updatedata.php",
                            sAddURL: "script/adddata.php",
                            });     
});
</script>   

 <form id="formAddNewRow" action="" title="Add">
        <label for="input1">ID</label><br />
    <input type="text" name="input1" id="input1" class="required" rel="0" />
        <br />
        <label for="input2">Text </label><br />
    <input type="text" name="input2" id="input2" rel="1" />
        <br />
</form>     

I must say - great work!
1) It would be nice if you could add an additional parameter for SQL table 
name. This parameter will allow plugging in any SQL table without modification 
of server side scripts for add/update or delete.

I did a tiny modification of your code to accept something like this:

oTable.makeEditable({
sSqlTableName: "my_table",
sUpdateURL:  "UpdateRow.php",
etc...

The result is that various pages can use different table names, but all use the 
same UpdateRow.php (which is capable to find a primary key and column name from 
table name and column number).


2) Also, I would not force having input form when adding a new row. At the 
moment: no form - no Add button:-). One might choose to add a new, empty row 
and populate it with data later. In SQL this is done simply by:
INSERT INTO my_table DEFAULT VALUES

Alex

What steps will reproduce the problem?
1. Create an editable datatable
2. Attempt to define a custom fnOnCellUpdated to modify the value of a cell 
other than the one just updated...
3. There is no easy way to do this because rowId is not passed to 
fnOnCellUpdated.

I've modified my local copy of jquery.dataTable.editable.js to fix this as 
follows:

Changed this line:
   settings.fnOnCellUpdated(status, sValue, settings);
to
   settings.fnOnCellUpdated(status, sValue, aPos[0], settings);

If you can tell me a way to do what I need to without making this change, that 
would be even better, but after hours on the web looking for examples of people 
doing this, I could find no easy way.

The reasoning in my specific case is this: I have a row that includes an Author 
name. The Author name should change to the current user when any editable cell 
in the row is changed.

Thanks,
-Dave

The server side validation is compatible with this plugin ?
If field is empty return a empty value and the server save a empty value 
without control.

My code to official forum of datatables.net

http://datatables.net/forums/comments.php?DiscussionID=4742&page=1#Item_1

Plugin in version 1.0 can use only POST AJAX request for adding new record. In 
the configuration should be added parameter that will enable GET request too.

What steps will reproduce the problem?
1. Initialize table
2. Create new form, enter data and click on submit --> Data successfully added
3. Choose a row and click on delete

What is the expected output? What do you see instead?
Expected output is the row would be deleted, but I see the id send to the 
deleteData.php is the returned value form AddData.php, no row was deleted

What version of the product are you using? On what operating system?
I'm using DataTables Version 1.7.6, and DataTables Editable 1.3

Please provide any additional information below.

On the JEditable site is placed time picker custom editor see 
http://www.appelsiini.net/projects/jeditable/custom.html. This editor should be 
integrated into the plugin as a new editor type. 
It depends on the http://plugins.jquery.com/project/timepicker plugin

What steps will reproduce the problem?
1.if I have defined 'aoColumns' but use read_only class in cells - disable edit 
does not work.

What is the expected output? What do you see instead?
usage of aoColumns does not crash disabling cell editing.


What version of the product are you using? On what operating system?
1.3

Please provide any additional information below.
this works: row 222
cells = $("td:nth-child(" + (i + 1) + "):not(." + properties.sReadOnlyCellClass 
+ ")", aoNodes); // PN bugfix

What steps will reproduce the problem?
1. Create two editable data tables each different column counts
2. Add new row to second table created

What is the expected output? What do you see instead?
Expected: new row is added to table
Instead: Receive errors referencing # of values and # of columns

What version of the product are you using? On what operating system?
1.1.7 Windows 7

Attached is the v1.1.7 of the file with the proposed fix.

It would be good if the plugin would enable validation of the cells while they 
are edited. This would be used in the following scenario:
1. In the setup it should be possible to define validation rules for individual 
columns while they are in the edit mode.
2. If a validation rule for any cell that is edited is not satisfied, error 
label should be shown, and update AJAX request should be stopped.
3. Error label should be shown when validation rule is satified or when user 
cancels editing.

What steps will reproduce the problem?
-have a column that is editable and provide with a list of data as an option to 
make a selection 

What is the expected output? What do you see instead?
-Allow the user to select from drop down but also to type the new text

What version of the product are you using? On what operating system?
-Version 1.3, Firefox, xp sp3

Please provide any additional information below.
-combo box functionality

What steps will reproduce the problem?
1. Set up dataTable using default settings
2. Import the following css and scripts:

--css
<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
@import "css/themes/base/jquery-ui.css";
@import "css/themes/smoothness/jquery-ui-1.7.2.custom.css";
</style>

--scripts
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="js/jquery.jeditable.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.dataTables.editable.js" type="text/javascript"></script>

3. Double click on editable cell

What is the expected output?
-Cell is fully editable (size same)

What do you see instead?
Cell shrinks in size, half of height

What version of the product are you using? On what operating system?
Current version, from download:
JQuery-DataTables-Editable.example.1.0.0.zip, Win XP ,SP3

Please provide any additional information below.
Seems like a configuration issue on my end, may be missing style/library?
See attached screenshot, seen in IE7 and Firefox environments.  Deploying to 
local Tomcat using Eclipse.

What steps will reproduce the problem?
1. use real server side script (php)
2. update the database in server based on the inline value edited
3. database is updated
4. value in the table is not updated
5. only after refresh it is updated

What is the expected output? What do you see instead?
i expect the value to be updated immediately without any need for refresh the 
browser, as being done in your example

What version of the product are you using? On what operating system?
WinXP SP3, latest version

Please provide any additional information below.
[email protected]

What steps will reproduce the problem?
1. Add a new row
2. See that the row was added
3. Add another new row
4. Each additional row added does not show up


What is the expected output? What do you see instead?

Expected output: The table should at least refresh each time a row is added. 
Right now, the table is refreshed only the first time a row is added and no 
additional added rows will show up after that.

What version of the product are you using? On what operating system?
The latest version on Windows XP.

Please provide any additional information below.

I tried to test if your examples work in IE8 but I ended up getting javascript 
errors.

1. Go to any page (e.g. second or third page) using paging navigation.
2. Add, edit or delete any element in the table.

Current page should be retained after the table is redrawn. Instead page is 
positioned to to first page and user need to navigate back to the page using 
navigation buttons.

What steps will reproduce the problem?
1. add new elt form with multiple select 
2. modify selected values
3. displayed values not pretty

What is the expected output? What do you see instead?
each value separated by comma

What version of the product are you using? On what operating system?
1.3

Please provide any additional information below.

proposed solution:

function _fnOnRowAdded(data) {
...
if (this.nodeName.toLowerCase() == "select" || this.tagName.toLowerCase() == 
"select") {
// HACK for select values 
 sCellValue = 
$.map(
 $.makeArray($("option:selected", this)), 
 function(n, i){
      return $(n).text();
 }).join(",");
}
...

                        } 

Using the plugin with dataTables bProcessing set to true, and bServerSide set 
to false (for ajax data sources), breaks it.

_fnAppyEditable gets called immediately, instead of being pushed onto the 
aoDrawCallback stack.

Fixed by changing line #406:
BEFORE:
if (oTable.fnSettings().oFeatures.bServerSide) {

AFTER:
if (oTable.fnSettings().oFeatures.bProcessing) {

What steps will reproduce the problem?
1. Create two tables editables
2. Add "add button"
3. Use differents sAddURLs
4. Submit the first form in DOM

What is the expected output? What do you see instead?
Each table should have different add url

What version of the product are you using? On what operating system?
SVN version : 1.3.2

Please provide any additional information below.
No idea of additional info is needed.

When using the adding new row feature, the data added to the table should be 
loaded from returned json.

The add new row form could not have the same number of fields and not the sames 
values that there is in the table.

The default way to confirm the deletion of a row is to pop up the 'confirm' 
dialog (which is synchronous, blocks the rest of the page).
This looks like poo.

We could try to pop a jquery dialog instead of the 'confirm' dialog, but that 
won't work because the jquery dialog is asynchronous.

The way we got around the issue is to copy the events away from your delete 
button to a hidden button, pop up a jquery ok/cancel dialog and if ok was 
clicked, then call .click() on the hidden button.
This will then send your plugin into action.
We also just do a return true for fnOnDeleting (since we have already asked the 
user to confirm/deny).

That works, but seems to be quite a bit of hacking.
It also has a fairly serious drawback.
We would like to populate the jquery dialog with information from an ajax call. 
That will notify users about what other data is about to be affected. In order 
to make that call we need the ID of the item about to be deleted. The only 
place you provide that ID is during fnOnDeleting (which is too late).

So I'm asking for an enhancement.
I can think of a couple of options.
1) Just like for add dialog, can we get a custom delete dialog. This dialog can 
then have a callback to actually start the deleting process (_fnOnRowDelete) 
when the OK button is clicked.

2) Give us another method that will be called even before the fnOnDeleting().
It can still give us the row ID that we can then store in a hidden field.  This 
one is more 'hackish' to me.. but the easiest for you to implement.

What version of the product are you using? On what operating system?
jquery.datatables.editable: 1.2.1
jquery: 1.6.1

So far, I'm loving the functions here, but would like to have the ability to 
use a 3rd party validation plugin for addition and modification of records.  Is 
it possible to either strip out the validation plugin you provide, or to enable 
another plugin via some configuration option?

What version of the product are you using? 
1.2.4

Setu
1. Setup the datatable in the server-side processing mode
2. Edit and change any cell
3. UpdateData request will be sent to the server-side, but current page will be 
reloaded because DataTables do not know is the position of the edited cell same 
(it should be reordered on the server side and moved if needed)

It would be good to prevent this in some cases:
1. When cell that is edited is not placed in the column that is used in current 
ordering table should not be reloaded
2. If cell content is change so it is still in the correct order (compare it 
with previous and the following cell)

If second condition is to hard to check first should be good enought. In the 
second condition should be considered various types of comparation that can be 
applied (plain text, html, etc) so default DataTables sorting would not be 
broken.