Difficulty installing Editor (in a localhost Ruby on Rails project during development)

BobWalsh

Summary:

After installing Editor (I think), restarting my local server, I'm getting the following error initializing DataTable Editor [valid trial]:

[from console]:application.js:156 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
    at myAlert (application.js:156)
    at application.js:64

So after much searching I found out how to do the next step after
npm install datatables.net-editor.

1.I copied the Editor-1.9.6.zip file to the folder created by datatables.net-editor' and renamed itEditor.zip`

2.I then ran the install.js code:

output:

bobwalsh@iMac2021 FreelancerCashFlow2020 % node node_modules/datatables.net-editor/install.js node_modules/datatables.net-editor/Editor.zip
**Editor NPM install script
  Installing node_modules/datatables.net-editor/js/dataTables.editor.min.js
  Installing node_modules/datatables.net-editor/js/dataTables.editor.js
Done**

so, so far it looks good.

In my javascript/packs/application.js file I initialize jQuery, several other js libraries, and Datatables. so far, so good:

code to initialize Datatables (run from a timeout function after window loads)

let monthlies = $('#money_expenses').DataTable({
    paging: false,
    bFilter: false,
    searching: false,
    info: false,
    order: [[6, 'asc']],
    rowGroup: {
      dataSrc: 2,
    },
    columnDefs: [
      {
        targets: [0],
        orderable: false,
        className: 'select-checkbox',
      },
      {
        targets: [1],
        visible: false,
        searchable: false,
      },
      {
        targets: [6],
        visible: false,
      },
    ],
    select: {
      style: 'os',
      selector: 'td:first-child',
      style: 'multi',
    },
  })

Now all this works. Wonderful.

The problem is that while I do a require('datatables.net-editor') right after loading require('datatables.net-dt'), I still can't get DataTable Editor to initialize.

My code:

var editor = new $.fn.dataTable.Editor({
    ajax: '/api/staff',
    table: '#money_expenses',
    fields: [
      { label: 'First name', name: 'first_name' },
      { label: 'Last name', name: 'last_name' },
      // etc
    ],
  })

Results:

application.js:156 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
    at myAlert (application.js:156)
    at application.js:64'

I've tried running the code before my DataTables code, and after: the same message. What am I doing wrong?

BobWalsh

I've also tried changing

require('datatables.net-editor')

to

require('datatables.net-editor/js/dataTables.editor.js')

no change.

allan

Hi Bob,

What bundler are you using that will complete the require lines for the client-side? Is it all being dumped into application.js - if so, try opening that file on its own and check that Editor is actually in there. Is it?

Also, is your bundler doing any minification? We've found cases before where the obfuscated code from the trial can be broken by minifiers.

Regards,
Allan

BobWalsh

1. I see the files - dataTables.editor.js and dataTables.editor.min.js being created by your routine and being added to the datatables.net-editor folder in my npm modules. Can I move them elsewhere in the project, specifically the [old way of doing js] asset pipeline?
2. the files currently are being required in the lavascript/packs/application.js file, just as datatables is.

allan

Yes absolutely, you can absolutely move the files elsewhere. They should resolve from where they are placed into the node_modules directory from require('datatables.net-editor') though. If you look in the application.js file - are the files being combined into there?

What is creating the application.js file? Apologies, I don't know Rails, so I'm sort of presuming it is something built into it?

Allan

BobWalsh

Well, made progress.

1. I assume if I see "DataTables Editor trial info - 5 days remaining dataTables.editor.js:21" in the Chrome console, Editor is loading.

2. The next problem is this error: "Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11"

3. I've read tn/11 several times and have tried both EditField solutions and the Method Call solution: no effect.

Here's my HTML for the table. Yes it is Rails:

<table id="money_expenses" class="min-w-full px-4 py-4 my-1 mb-1 ml-1" style="width: 1000px;">
        <thead>
      <th></th>
      <th>Active</th>
            <th>Category</th>
            <th>Expense</th>
            <th>Amount</th>
            <th>Pay on </th>
      <th>Position </th>

        </thead>
        <tbody>
            <% @monthlyexpenses.each do |item| %>
        <tr DT_RowId="<%= item.id %>">
          <td></td>
          <td><%= item.is_active %></td>
          <td><%= item.monthly_category %></td>
          <td class="font-bold"><%= item.name %></td>
          <td><%= number_to_currency(item.me_amt_in_cents/100) %></td>
          <td><%= item.day_of_month %></td>
          <td><%= item.position %></td>
        </tr>
      <% end%>
        </tbody>
    </table>

Note: I'm trying to force row identification as per "https://datatables.net/manual/tech-notes/14".

And here's the very messy JS code that I hope to get the editor doing inline editing with:

var editor = new $.fn.dataTable.Editor({
    table: '#money_expenses',
    idSrc: 'id',
    fields: [
      {
        label: 'Active',
        name: 'active',
      },
      {
        label: 'Monthly category',
        name: 'monthly_category',
      },
      {
        label: 'Name',
        name: 'name',
      },
      {
        label: 'me_amt_in_cents',
        name: 'me_amt_in_cents',
      },
      {
        label: 'Day of Month',
        name: 'day-of-month',
      },
      {
        label: 'Position',
        name: 'position',
      },
    ],
  })
  let monthlies = $('#money_expenses').DataTable({
    paging: false,
    bFilter: false,
    searching: false,
    info: false,
    order: [[6, 'asc']],
    rowGroup: {
      dataSrc: 2,
    },
    fields: [
      {
        label: 'Active',
        name: 'active',
      },
      {
        label: 'Monthly category',
        name: 'monthly_category',
      },
      {
        label: 'Name',
        name: 'name',
      },
      {
        label: 'me_amt_in_cents',
        name: 'me_amt_in_cents',
        render: $.fn.dataTable.render.number(',', '.', 0, '$'),
      },
      {
        label: 'Day of Month',
        name: 'day-of-month',
      },
      {
        label: 'Position',
        name: 'position',
      },
    ],
    columns: [
      { data: 'active' },
      { data: 'monthly_category' },
      { data: 'me_amt_in_cents' },
      { data: 'day-of-month' },
      { data: 'position' },
    ],
    columnDefs: [
      {
        targets: [0],
        orderable: false,
        className: 'select-checkbox',
      },
      {
        targets: [1],
        visible: false,
        searchable: false,
        editField: 'monthly_category',
      },
      {
        targets: [6],
        visible: false,
      },
    ],
    select: {
      style: 'os',
      selector: 'td:first-child',
      style: 'multi',
    },
  })

And here is an image of what the table looks like:

How do I fix this?

allan

I assume if I see "DataTables Editor trial info - 5 days remaining dataTables.editor.js:21" in the Chrome console, Editor is loading.

Yes indeed! What did you do to make it load in the end?

I've read tn/11 several times and have tried both EditField solutions and the Method Call solution: no effect.

Are you triggering inline editing somewhere? If so, can you show me that code please? What you have above looks okay (although you can remove the fields array from your DataTables initialisation - that isn't required).

Regards,
Allan

BobWalsh

$('#money_expenses').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this)
  })

(this code is just before

var editor = new $.fn.dataTable.Editor({
    table: '#money_expenses',
    idSrc: 'id',
  . . .

Re getting DataTables.Editor to install, it took going old, old school:
1. moved the editor file to the Public directory - this is the directory that is accessable to the Rails app when it is running.
2. <script type="text/javascript" src="dataTables.editor.js"></script> in the HEAD.

Still getting,
```
"Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11" error in Console and the Editor does not work.

Can you help me get just one field to be inline editable? I can do the rest.

kthorngren

Doesn't look like you have your columns.data defined correctly. Datatables is going to assign

    columns: [
      { data: 'active' },

To the first column which looks like you want to contain a select checkbox. Replace your columns and columnDefs with this:

    columns: [
      { data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
      },
      { data: 'active' },
      { data: 'monthly_category',  
        visible: false,
        searchable: false,
      },
      { data: 'name' },
      { data: 'me_amt_in_cents' },
      { data: 'day-of-month' },
      { data: 'position',
        visible: false,
      },
    ],

This will define all the columns you have in your HTML table including the select checkbox. You will need columns.defaultContent to display an empty string when using data: null.

Kevin

BobWalsh

added the columns code: no help. Still does not inline edit.

Code as of now:

function myAlert() {
  $('#money_expenses').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this)
  })

  var editor = new $.fn.dataTable.Editor({
    table: '#money_expenses',
    idSrc: 'id',
    fields: [
      {
        label: 'Active',
        name: 'active',
      },
      {
        label: 'Monthly category',
        name: 'monthly_category',
      },
      {
        label: 'Name',
        name: 'name',
      },
      {
        label: 'me_amt_in_cents',
        name: 'me_amt_in_cents',
      },
      {
        label: 'Day of Month',
        name: 'day-of-month',
      },
      {
        label: 'Position',
        name: 'position',
      },
    ],
  })
  let monthlies = $('#money_expenses').DataTable({
    paging: false,
    bFilter: false,
    searching: false,
    info: false,
    order: [[6, 'asc']],
    rowGroup: {
      dataSrc: 2,
    },
    columns: [
      {
        data: null,
        defaultContent: '',
        orderable: false,
        className: 'select-checkbox',
      },
      { data: 'active' },
      { data: 'monthly_category', visible: false, searchable: false },
      { data: 'name' },
      { data: 'me_amt_in_cents' },
      { data: 'day-of-month' },
      { data: 'position', visible: false },
    ],
    columnDefs: [
      {
        targets: [0],
        orderable: false,
        className: 'select-checkbox',
      },
      {
        targets: [1],
        visible: false,
        searchable: false,
        editField: 'monthly_category',
      },
      {
        targets: [6],
        visible: false,
      },
    ],
    select: {
      style: 'os',
      selector: 'td:first-child',
      style: 'multi',
    },
  })

What am I doing wrong? Why doesnt Editor engage?

kthorngren

You may want to remove the columnDefs since you moved all of that configuration to the columns option. Also for the editField: 'monthly_category' you have targets: [1] which is the { data: 'active' }, column.

But as Allan said your config looks good, there is nothing else obvious as to the problem. Can you post a link to your page for debugging?

You can use this base Editor example to try and recreate your problem:
http://live.datatables.net/guwafemu/151/edit

At this point without seeing the problem its hard to say what is worng.

Kevin

allan

Also, does the error happen when you click on all columns in the table, or just a specific one?

But yes, I think we are going to need to be able to see the page to be able to diagnose this one. I don’t see why that error would happen from the code above.

Allan

BobWalsh

I get clicking cells 0-6

Unable to find row identifier For more information, please refer to https://datatables.net/tn/14

and this message on the last cell:
dataTables.editor.js:21 Uncaught Unable to automatically determine field from source. Please specify the field name. For more information, please refer to https://datatables.net/tn/11

Allen, this is a commercial project - how do I private message you a URL?

kthorngren

At the top right of this page is a button Ask a Private Question. You can send Allan the link this way.

Kevin