Which editor version can I download?

pisisler

Hi.

I had purchased Editor long time ego. Since it has been quite some time, I don't know up to what version of Editor I can download. The version I am using now is 2.0.2. To be honest, my production site is very well functioning, so right now I don't have motivation to work on upgrading Editor to the newest version.

But I am also using DataTables on production and I wanted to test out the new features. I am trying to Upgrade to DataTables 2.0 now. I see that some files are missing (like jquery.dataTables.min.js) and I guess it is incompatible with my Editor version.

So the question is;

1- Are new files still being uploaded? Because clicking on some of them gives 404 error.

2- According to my old license (purchase date 31st of May, 2021), up to which version of Editor I can download and how? Because I can't find version specific downloads.

3- Will that version be compatible with DataTables 2.0?

allan

1) jquery.dataTables.min.js has been replaced with just dataTables.min.js. Same file - different name. I'm working on the upgrade notes to highlight this. Apologies for them not being ready just yet.

2) Editor 2.0.8 is the latest download available to your account at the moment. The full list of Editor version are available here. I'll look at making it easier to find which versions are available to an account!

3) Editor 2.3.0 and later are compatible with DataTables 2. The earlier versions used a private legacy API which has been removed in DT2.

Regards,
Allan

pisisler

3) Editor 2.3.0 and later are compatible with DataTables 2. The earlier versions used a private legacy API which has been removed in DT2.

That's a deal breaker for me then. But I gather that latest version of DT 1.x is compatible with Editor 2.0.8. Well, now I can't find the latest 1.x version

allan

Yes, DataTables 1.13.10 will work with Editor 2.0.8 (those specific versions weren't tested together, since the DT release is much more recent than that Editor release), but I can't think of anything that would stop them working together!

Allan

pisisler

Thank you Allan. One last question (I hope) regarding this issue; how to know which version of extensions are compatible with which version of DT and Editor? Now I am trying to upgrade my production site to DT 1.13.10 and Editor 2.0.8 but looks like new versions of extensions are not compatible with these DT and Editor versions. how to know which will be?

pisisler

To be more specific for example Select plugin gives this error:
Uncaught TypeError: _.type is not a function
Or:
Uncaught Warning: Buttons requires DataTables 2 or newer

allan

Select 2.0.0 requires DataTables 2+. Select 1.7.0 is the latest that works with DT1.

Other extensions that you'll need to use a legacy version of if you want to continue using DataTables 1 are Buttons, ColReorder, FixedHeader, FixedColumns, and Responsive. The legacy versions are all available on the CDN (click the "Previous releases" link for each piece of software.

Allan

pisisler

Yes, I tried that and found that the most up to date previous major versions seems to be compatible. Like this:

DataTables 1.13.10
Select 1.7.0
DateTime 1.5.2
FixedColumns 4.3.0
Buttons 2.4.2
Scroller 2.3.0
Responsive 2.5.0

These are "most up to date" compatible versions with most up to date DataTables 1x. I have also updated to Editor 2.0.8 and have seen no major problem so far. I will be thoroughly testing before taking it into production.

A problem I encountered is in the console, one informational and one as error like:

A form field element should have an id or name attribute
A form field element has neither an id nor a name attribute.

And:

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id.

By the way I have changed some column definitions for compatibility of upgrading from Editor 2.0.1 to 2.0.8. For example from:

{ data: 'link', type: 'html', className: 'noe', render: function (data, type, row) { return product_link(row, type); }},

To this:

{ name: 'link', type: 'html', className: 'noe', data: function (row, type) { return product_link(row, type); }},

That line was working fine with Editor 2.0.1 but after the upgrade, it complained about it like this:

DataTables warning: table id=products- Requested unknown parameter 'link' for row 1, column 9

Which meant it wasn't finding the corresponding data for the given columns. As you would guess, "link" is a pseudo column, it is not a data coming from data source. (Again, which was working pretty fine.) So (for the obvious compatibility issue) I changed it to name: "link" instead of data and changed render to data instead.

Now it is working fine (or at least it seems so). But the console errors are there nonetheless, both before and after the changes I have made to the col defs.

kthorngren

The column configuration changes you made are to the Datatables configuration not the Editor. You changed from columns.data to columns.name. I suggest reverting back to the original config.

If you want to make changes to the Editor's column config then that would be the fields option in the Editor's initialization code.

Maybe post your full Editor and Datatables init code so we can see if there are any obvious issues.

Kevin

pisisler

The first column config is my default config on production for years now. But after upgrading DT and all, it started complaining about pseudo columns' being not present in data object. (It never was.) So I can't revert back to the original config unless I can find a way to make it work with up to date DT.

I will post the init code when I am available but I think problem lies elsewhere.

kthorngren

In addition to the above please answer the following:

Do those errors occur when opening the Editor form?

Are you using Editor templates, like this example?

Kevin

pisisler

Yes, I am using custom templates. (Not one but two, on the same editor instance, with a custom button.)

Here is Editor initialization:

var editor;
$.products = $('#products');
var editTpl = $('#EditTemplate');
var altTpl = $('#altTpl');

editor = new $.fn.dataTable.Editor({
    formOptions: {
        main: {
            onBackground: 'none'
        },
        inline: {
            //drawType: 'none',
            submit: 'allIfChanged',
        }
    },
    ajax: {
        url: products.php,
        data: function (d) {
            if (editor.modifier() != null) {
                d.old_values = {};
                table.rows(editor.modifier()).data().each(function (row) {
                    d.old_values[row.id] = row;
                });
            }
        }
    },
    idSrc: 'id',
    table: "#products",
    template: "#EditTemplate",
    fields: fields
});

The fields JavaScript array is consisting of fields like this:

var fields = [
    { label: "Barcode:", name: "barcode" },
    { label: "Product Name:", name: "product_name" },
    ....
]

Here is DT initialization:

table = $.products.DataTable({
    pageLength:20,
    lengthMenu: [[20, 50, 100, 250, -1], ['20 Products', '50 Products', '100 Products', '250 Products', 'All']],
    fixedColumns: { leftColumns: 2 },
    autoWidth: true,
    scrollX: true,
    scrollY: "500px",
    deferRender: true,
    scrollCollapse: true,
    dom: '<"row"<"col-sm-9"B><"col-sm-3"f>>rt<"row"<"col-sm-7"i><"col-sm-5"p>>',
    responsive: false,
    ajax: {
        url: products.php,
    },
    language: { url: "/languages/en/datatables.en.json" },
    rowCallback: function(row, data) {
        $('td.overflow-hidden', row).css({'white-space': 'nowrap'});
        if (data.position === 'unpublished') {
            $(row).closest('tr').removeClass('odd even');
            $(row).closest('tr').addClass('unpublished');
        }
    },
    columns: products_columns,
    order: [ 1, 'asc' ],
    select: {
        style: 'os',
        selector: 'td.select-checkbox'
    },
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit", editor: editor },
        {
            extend: "remove", editor: editor,
            formMessage: function (editor, dt) {
                let products = dt.rows(editor.modifier()).data().pluck('product_name');
                return '<div class="alert alert-warning"><i class="fas fa-exclamation-triangle"></i> ' +
                    dt.i18n('editor.remove.confirm', null, products.count()) + dt.i18n('products.remove.noreturn') +
                    '</div><div class="alert alert-light"><ul><li>'+products.join('</li><li>')+'</li></ul></div>';
            }
        },
        {
            extend: "edit",  editor: editor,
            text: (dt) => dt.i18n('products.unpublish.button'),
            action: function (e, dt, node, config) {
                // First start in edit mode
                editor.edit(dt.rows({selected: true}).indexes(), false);
                let products = dt.rows({selected: true}).data().pluck('product_name');

                // Then start a remove to trick into edit at the end
                editor.remove(dt.rows({selected: true}).indexes()).
                    message(
                        '<div class="alert alert-warning">'+dt.i18n('products.unpublish.confirm')+'</div>'+
                        '<div class="alert alert-light"><ul><li>'+products.join('</li><li>')+'</li></ul></div>'
                    ).title('<h5><i class="icon fas fa-exclamation-triangle" style="margin-right: 10px"></i>'+dt.i18n('products.unpublish.title')+'</h5>').
                    val({ n11: 0, hb: 0, ty: 0, tsa: 0, ecom: 0, ept: 0, position: 'unpublished' }).
                    buttons({
                        text: dt.i18n('products.unpublish.button'),
                        className: 'btn-danger',
                        action: () => { editor.submit(); }
                    }).mode('edit');
            }
        },
        {
            extend: "edit", editor: editor,
            text: (dt) => dt.i18n('products.fixed_margin'),
            action: function (e, dt, node, config) {
                editor.template(smarjTpl);
                editor.edit(dt.rows({selected: true}).indexes(), {
                    title: dt.i18n('products.fixed_margin'),
                    buttons: {
                        text: dt.i18n('editor.edit.submit'),
                        className: 'btn-primary',
                        action: () => { editor.submit(); }
                    }
                }).message(
                    '<h5><i class="fas fa-info" style="margin-right: 10px"></i>'+
                    dt.i18n('products.notice.info.info') + '</h5>' + dt.i18n('products.fm_message')
                ).mode('edit');
            }
        },
        { extend: 'pageLength', editor: editor},
        {
            extend: "collection", editor: editor,
            text: (dt) => dt.i18n('products.export'),
            buttons: [
                'copyHtml5', 'print',
                { extend: 'pdfHtml5', download: 'open', orientation: 'landscape' },
                { extend: 'excelHtml5', filename: 'products', autoFilter: true },
                {
                    extend: 'csvHtml5', bom: true, filename: 'products',
                    fieldSeparator: ';', charset: 'utf-8', fieldBoundary: ''
                }
            ]
        },
    ],
});

The products_columns is again a JavaScript array as I posted above samples of.

I don't think it has anything to do with custom templates as my production site is working with that template for years now. The errors occur when saving anything inline (i.e. without any template interaction).

kthorngren

To make sure I understand correctly you see these errors when inline editing:

A form field element should have an id or name attribute
A form field element has neither an id nor a name attribute.

And

Incorrect use of <label for=FORM_ELEMENT>
The label's for attribute doesn't match any element id.

Do the errors appear for only certain columns or any cells that are inline edited?

Where is the label <label for=FORM_ELEMENT> found in your code?

You posted this code:

render: function (data, type, row) { return product_link(row, type); }}

Is this the column that produces the error when inline editing? If so what HTML does product_link() produce?

Can you post a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

pisisler

Thank you for your time. Actually I have a too heavy customization to make an example case.

Where is the label <label for=FORM_ELEMENT> found in your code?

That is the thing; I don't have it. I never had. My production version with the very same code, doesn't produce those errors. They started appearing after I updated editor files.

That product_link() function is something like this:

function product_link(product, marketplace, type) {
    let product_code = marketplace + 'code';
    if (type === 'sort' || type === 'filter') return product[product_code];
    if (product[product_code] == 0 || product[product_code] == '' || product[product_code] == null) return '';
    let link = marketplaces[marketplace].product.replace('%s', product[product_code]);
    return '<a target="_blank" class="fas fa-external-link-alt" href="' + link + '"></a>';
}

allan

Can you link to a page showing that error as Kevin requested? In this example the label elements have for attributes, pointing to their respective input elements, which have a matching id. That is correct and expected HTML.

Allan

pisisler

Allan, I don't see label tag with for attribute in the example link you gave? If you mean the label element of the fields object, I have that too, as I posted in my example above. But as for the for attribute, it doesn't exist in the example either.

allan

If you mean the label element of the fields object

Yes. And they do exist on the label elements for the fields:

<label data-dte-e="label" class="DTE_Label" for="DTE_Field_first_name">
  First name:
  <div data-dte-e="msg-label" class="DTE_Label_Info"></div>
</label>

Allan

pisisler

I don't see that code fragment neither in the source nor in the example code of that example instance. But nevertheless, I found the root cause and I am sorry I took your time for this. It turned out to be caused by an external library and my custom dialog.

When the errors occur, dev tools actually tells which nodes cause the problem but since inline editing is removing the form input elements from the DOM in a fraction of a second, clicking that "violating node" can not point to an element. This in fact falsely led me into thinking it must be caused by the editor. But actually it was the Sweetalert2 (swal) library which I am using to display custom info and warning messages after editor actions. Yes, that's a "disappear-after-x-seconds" notification which gets removed from the DOM too. That's why I have mistaken it for inline editing. No problem with the editor and DT upgrading so far.

Thank you again for your time and patience.

allan

No worries - good to hear you found the root issue.

Allan