How to access elements created in "initialize" in "update"?

Plugin builders
1

I’ve been following these excellent tutorials on building plugin elements.

Making progress, but struggling to figure out how to access elements I’ve created in the “initialize” function in the “update” function.

My initalize function

function(instance, context) {
    
    // create an ID
    const getID = () => {return Math.random().toString(36).substr(2,9)},
          id = 'searchabledropdown' + getID();
    
    console.log ('html id: ' + id);
    
    // add dropdown element to canvas
    $(instance.canvas).append(`<select id="${id}" class="slim-dropdown"></select>`)
    
    // apply SlimSelect
    instance.data.select = new SlimSelect({
        select: `#${id}`});
    
}

I now want to apply a font color style by using the .css() function. @doug.burden has helpfully pointed out that I should be using something like:

newDiv.css({
‘color’: properties.font_color,:
});

But I can’t figure out how to reference the “select” element I created in the “initialize” function rather than the “newDiv” that’s in the example above.

If anyone has any ideas I would really appreciate it.

2

It’s saved in your instance.data.select. That object contains the SlimSelect you just created. You can access in any of the actions of that element.

(I think I recognize that code as @eli’s code. Hat-tip to that fedora-wearing nerd :nerd:)

2 Likes
3

His tutorials are the best out there! Thanks @rico.trevisan

1 Like