How to grab reference to Editor instance

How to grab reference to Editor instance

rldean1rldean1 Posts: 141Questions: 66Answers: 1

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?

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • rldean1rldean1 Posts: 141Questions: 66Answers: 1

    @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;
    
  • allanallan Posts: 61,443Questions: 1Answers: 10,053 Site admin
    Answer ✓

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

    return {
      table: dashboard,
      editor: editor
    };
    

    then:

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

    Allan

Sign In or Register to comment.