Editor 1.4 issues tracking

nguyenm9

Hi, wanted to start a topic on reporting various bugs/issues with Editor 1.4. Feel free to use this post so others can benefit.

Here's a few things I've seen so far:

1)
1a) Inline editing with jquery calendar. It seems the workaround specified here (https://datatables.net/forums/discussion/24565/dates-with-jquery-ui-datepicker-inline-editing) may have been broken in 1.4 (I didn't try with prior versions). I had to add a filter to get it to work.

editor.on('preBlur', function () {
            if ($('#ui-datepicker-div').filter(':visible').length) {
                return false;
            }
        });

1b) Not sure if this is my issue or not but when my form sends a row for editing that contains a date field (my format is MM YY), I always get "July 2020". Will need to debug a bit more..

2) In the examples, database.cs the sqlite provider is incorrect. It currently reads:

            else if (_DbType == "sqlite")
            {
                return "MySql.Data.SQLite";
            }
and should be
            else if (_DbType == "sqlite")
            {
                return "System.Data.SQLite";
            }

On another note, at least for .net, it would be good to support localdb since it provides the quickest way to get setup and running since no db needs to be configured/installed.

3) a reference to "calender.png" w/in the datatables.editor.js always wants to look for it in my rootdir at \images\calender.png even though the *.js are located several levels below under a \public... for me.

matt

allan

Excellent - thanks for opening this thread. I'll look into the issues in detail when I get back into the office and will be releasing a new beta shortly thereafter with these and a few other little issues addressed.

Regards,
Allan

nguyenm9

1b) Not sure if this is my issue or not but when my form sends a row for editing that contains a date field (my format is MM YY), I always get "July 2020". Will need to debug a bit more..

This does appear to be a bug since I can change the format to mm-dd-yy or MM dd, yy and it works. I imagine it's having a hard time parsing a date without a day specified.

Any ideas for a work around?

allan

Could you show me both the Javascript and PHP that you are using for that field please?

Allan

nguyenm9

Hey Allan, there is no js involved. I just set dateFormat on the editor to "MM yy" and do inline submits to the backend via ajax. The initial edit submit works (eg 'Jan 2014' is sent to server and returned to client as is and displayed correctly). However, on the next edit (it doesn't matter which field is editted), the datefield turns to "July 2020". I suspect when the editor goes to collect all the fields for that row, it must fail the conversion and default to 'July 2020'.

I do have a current work around by overriding the "render" option on the datefield and output the format I want. In this way, I keep dateFormat to something like 'M dd, yy' but only show Month Year on display.

btw- I use .net and my ajax calls all go to c# where I collect the parameters as (string action, ICollection<string,string> data, string id).

nguyenm9

Am seeing another issue with inline edits (btw- if you have some bug tracking software you would prefer that people use, please direct me to it).

Setup

I have a table that I'm editing via inline edits and submiting on blur via:

    $('#mytable').on('click', 'tbody td', function (e) {
        _editor.inline(this, {
            submitOnBlur: true
        
        })

this works as expected. I also have a button that I use to add a new row into the table via

var editor = _editor.create(false).submit();

this too works as expected. Here's where it fails. When I am editing something inline and my next action is to click on my button to add a new row, I would expect the blur to cause an 'edit' call to the server and a new row is created and inserted into the table. The 'edit' call occurs, however, the create/insert row fails. I can see that the add button click is trapped and the create invoked, but no row is added or create call to the server is issued. I believe this is only a problem when the 'false' parameter is passed to _editor.create(false) as if I pass in 'true', the edit form does appear (it also works in your demo at: http://editor.datatables.net/examples/inline-editing/options.html -- highlight a field, go into inline edit, click on the 'edit' toolbar button)

nguyenm9

Seeing another issue but just on IE (my version 11.0.9600.17501)

It is duplicable on your sample.

http://editor.datatables.net/examples/standalone/inline.html

If you click on any of the form elements ('State' for example) and click the 'Update' button, the field disappears until you refresh the page. Thus the initial submit appears to work but corrupts the element somehow (note if you don't submit, things seems to work).

allan

1b) I've just tried setting the dateFormat option in my Javascript example to be MM yy and it appears to submit the data as expected: data[registered_date]:January 2015. Are you using the Editor .NET libraries, or your own custom control for parsing that data?

2) SQLite error now fixed. Still needs proper support in the database drivers though. SQLite support isn't in the beta.

3) The calendar icon is relative to the HTML page because that is how the jQuery UI buttonImage option works. Its a bit frustrating, but until there is better support for input type="date" in browsers, we are a bit stuck with it.

4) " (it also works in your demo at: http://editor.datatables.net/examples/inline-editing/options.html -- highlight a field, go into inline edit, click on the 'edit' toolbar button)"

This appears to work okay for me. I select a row using the checkboxes in the first column - inline edit a cell and then click the "Edit" button. Is that correct?

5) "If you click on any of the form elements ('State' for example) and click the 'Update' button, the field disappears until you refresh the page."

Was tearing my hair out with this one until I remembered a similar problem in DataTables a little while back. Basically, if you write to the DOM overwriting elements in IE11, it will retain a Javascript reference to the overwritten nodes, so you don't get any errors, but it will incorrectly remove them from its display memory, so there is nothing to display! Very frustrating, but the fix is fairly simple. Before writing to the DOM just remove the child elements that you want to retain a reference to. I've put this fix in now and it will be in the next beta.

Thanks for your bug reports here!

Allan

nguyenm9

Thanks Allan!

1b) First submit will work but the subsequent submits (any field since the entire row is submitted) will cause it to fail. Perhaps if you alter your sample: http://editor.datatables.net/examples/inline-editing/simple.html to use jquery calendar and MM yy, I can test. I am not using the editor .net libraries.

4) Yes your sample works but it's not an inline edit. Convert that to inline edit and have the add button call

var editor = _editor.create(false).submit()

and it should fail to add the row if it is clicked while one of the fields is in 'edit' mode (e.g. has focus)

Would also like to put in a request:

Prevent update calls to the server for inline editing (submitOnBlur) if the text hasn't changed (e.g you're just tabbing through). Can't imagine a scenario when you would want to save a non dirty field (or make non dirty submits an option instead of default)

thx, matt

allan

1b) First submit will work but the subsequent submits (any field since the entire row is submitted) will cause it to fail. Perhaps if you alter your sample: http://editor.datatables.net/examples/inline-editing/simple.html to use jquery calendar and MM yy, I can test.

I've just tried this locally and if I update the PHP to expect the same format as submitted, then it appears to work as expected. Is your database getting updated correctly on submit?

4) Yes your sample works but it's not an inline edit. Convert that to inline edit and have the add button call ...

Thanks - I'll check this out tomorrow.

Prevent update calls to the server for inline editing (submitOnBlur) if the text hasn't changed (e.g you're just tabbing through)

Agreed! This is going to be a 1.5 change most likely though as it goes hand in hand with a number of other changes.

Allan

nguyenm9

Yeah we're doing it a little differently. I make an ajax call to the host where I pick up the raw data via

foo(string action, IDictionary<string, string> data, string id)

when it hits this call, the data array already has the 'July 2020' set, so it's definitely happening on the client side.

So the repro case is:

1) Setup as inline submitonblur
2) dateFormat = "MM yy", jquery uidatepicker
3) edit date field and set to a date to show month year in input box
4) click away to force submit
5) date field is submitted correctly to back end and returned correctly to field for display
6) select another field on the same row
7) click away to force submit
8) this time, the date field (that was correct on the initial submit), now submits July 2020 to the host, which returns to field as July 2020

I traced it a bit through the code and the value returned from

var baseFieldType = $.extend( true, {}, Editor.models.fieldType, {
    "get": function ( conf ) {
        return conf._input.val();
    },

is defintely July 2020 (oddly the dateFormat for this field is not "MM yy" but "D, d, m yy" but even if I set it manually in the debugger to "MM yy" it still doesn't work as the value remains at "July 2020".

I'll play with it some more tomorrow.

nguyenm9

I ended up using the bootstrap calendar plugin and it seems to work for me. The added plus is that it supports selection of month/year which is what I was looking for anyways.

Can you let me know about the "lost" click when you get a sec allan?

Thanks!

nguyenm9

Allan, unsure if you have a testing harness for editor 1.14 but I was seeing something that was working in the non-minified version of the .js but broken when I run the minified version.

It is around the "select" field type.

Unsure if this is the correct way to do it but, on setting a field type to "select", i define the editor option of that field type like so:

{
            name: "degree",
            type: "select",
            options:
            [
                  { label: "PHD", value: "0" },
                  { label: "Master", value: "1" },
                  { label: "Bachelor", value: "2" },
                  { label: "Associate", value: "3" },
                  { label: "Other", value: "4" }
            ]
        
}

and in the data table, I override the render as such:

            {
                data: "degree",
                render: function (data, type, row) {
                    if (data == "0") return "PHD";
                    else if (data == "1") return "Master";
                    else if (data == "2") return "Bachelor";
                    else if (data == "3") return "Associate";

                    return "Other";
                }
            }

and call set like: tbl.set('degree','2') to set it to "Bachelors" and so forth.

I do this b/c I want to speak via the value (e.g numeric) with my server but display the user friendly string on my table.

Anyways, if I use the minified version, this logic starts failing passing in an empty string for any select field.

The odd thing is that ASP.NET/MVC can minify the non-minified version and that seems to work fine so not sure if the minified is corrupted or what.

(btw if there's a better way to achieve what I'm trying to do above, please let me know.)

Thanks

allan

What you are doing should work okay, and I'm not aware of any issue with the minified version at the moment. I've used it in a number of places myself and not encountered any issues yet or had any similar reports. I am going to package up a new beta version soon though which will hopefully remove any issue you are seeing.

Allan

nguyenm9

Ok thanks. btw- I asked for a better way b/c It's kinda weird that I define the label (user friendly string) in the option and then have to do it again in the render. Is the label superfluous? I have a feeling I'm not understanding something...

allan

Normally what I would suggest is that the JSON data would contain both the value and the label. Then the DataTable can display the label, while Editor can operate on the value.

Since you don't have that information in your JSON here, then yes, this probably is the way to do it.

Allan