How to grab reference to Editor instance

rldean1

How do I get a reference to an Editor instance wherever I'm at in my application? Like, how do I grab the reference from the DOM, window, or document?

I'm experimenting with modules. I have a table/editor instance in its own "module" which I got from the Download Builder.

I can successfully pass the editor reference/instance around through functions like a hot potato. So, that's cool, and it works!

Example:

//this is a module with Editor and Table
//add button calls a function in another module

buttons: [
    {
        extend: "create",
        text: "Add",
        editor: editor,
        action: function (e, dt, node, config) {
            renderRetireeCreateModal(editor); //passing in a reference to the editor instance
        }
    },

//this module accepts the instance, and I can call .create()

function addRetireeListener(modalActual, editor) {
     ...

        editor
            .create(false)
            .set('EmployeeID', jsonRequest.EmployeeID)
            .submit();



}

I guess I could also assign a global variable, like var window.editor = new $.fn.dataTable.Editor, but I heard somewhere that it is considered uncouth to add a bunch of stuff to the global namespace.

Sooooo..... How do I grab the Editor instance from wherever I'm at?

allan

You basically have two options:

1. Pass it around functions as you have been, or
2. Have a globally (or otherwise high scoped) variable that you can access where you need it.

I don't know the structure of your code without being able to see it all, but you mention modules - I'm guessing those are ES6 modules, so you might export your addRetireeListener function and then import it wherever it is you need to call it and have the Editor licenser. That I think would be the best option, but it really depends upon the stack you are using?

Allan

rldean1

@allan

I'm using vanilla JavaScript.. You got me thinking...

I often use the Download Builder, but I modify the table.Tablename.js to fit my needs. (example below).

How would you recommend to properly export Editor and Table so that they could be used in other modules, but also take care of initializing the tables at startup?

If I could reference editor or table via the export functionality, that would be pretty darn cool!!

This is an example of what I do currently with the file provided by Download Builder. initRetireeDashboard() is called in my main module, which initializes the tables when the page loads...

import Webservice from './Webservice.js';
import { renderRetireeEditModal } from './editRetiree.js';
import { renderRetireeCreateModal } from './newRetiree.js';


function initRetireeDashboard() {

    const jsonRequest = {
        "action": "getDashboard",
        "SessionID": 1
    }


    var editor = new $.fn.dataTable.Editor({
        ajax: function (method, url, data, success, error) {
            Webservice.postData(data)
                .then(response => success(response));
        },
    });

    var dashboard = $('#Retirees').DataTable({
        ajax: function (data, callback, settings) {
            Webservice.postData(jsonRequest)
                .then(response => callback(response));
        },
        buttons: {
            // buttons array
            buttons: [
                {
                    extend: "create",
                    text: "Add",
                    editor: editor,
                    action: function (e, dt, node, config) {
                        renderRetireeCreateModal(editor); //passing in a reference to the editor instance
                    }
                },
                {
                    extend: "edit",
                    editor: editor,
                    action: function (e, dt, node, config) {

                        let rowData = dt.row({ selected: true }).data();
                        let { EmployeeID: retiree } = rowData;
                        renderRetireeEditModal(retiree);
                    }
                },
            ]
        },        
    });


};

export default initRetireeDashboard;

allan

You could return it from your initRetireeDashboard function - e.g:

return {
  table: dashboard,
  editor: editor
};

then:

let [table, editor] = initRetireeDashboard(); // uses destructuring

Allan