Seperate div id for multiple instances of plugin element

Plugin builders
1

Hi,

I am building a plugin that inserts an object before newDiv div, like according to this piece of code:

var newDiv= $('<div id="newDiv"></div>');
instance.canvas.append(newDiv);
mynewobject.create(newDiv, {.....etc etc

However this works fine, it doesn’t work for multilple instances of this element, because they will all try to insert the object before newDiv. As a solution I am trying to get hte canvas’s div name to set as the newDiv name. Does one of you know how to get this? Or even a better solution to handle multiple instances of a plugin element?

Thanks in advance for your help!

2

You should give each newDiv a unique id. Which means each instance of the plugin element’s newDiv will be unique.

3

Thanks, but how do I achieve that? I tried to get the element’s name (i.e. Element Name A, Element Name B and so on) or some other specific id per element, but I got trouble retrieving a unique identifier for the elements. Any ideas on how to achieve that? Thanks again.

4

You can create a unique ID and use this. There are a few examples online that show how to do this.

5

Hi @emmanuel and others,

I am still struggling with this. A new div ID is created for every instance of the element following this code:

function(instance, context) {

var divid = Math.random().toString(36).substr(2, 9);
var  newDiv = $('<div id="'+divid+'"></div>');
instance.canvas.append(newDiv);
mynewobject.create(newDiv, {.....etc etc

This works fine, except when the element is placed in a group, then it’s not inserted and the debug console throws a TypeError: Cannot read property ‘myobject’ of undefined.

Any idea why this fails within a group element?

Thanks for your help in advance, much appreciated!!!

6

Make sure your page has finished loading before instantiating your objects.

7

Thanks for your suggestion @seanhoots. What’s the best way to ensure the page has finished loading before instantiating the plugin’s element? Is there a way to configure that in the plugin or do you know a JS snippet to achieve this? Thanks again.

8

Still can’t get it to work. Here’s a test page for the plugin on which I am trying to load two seperate text editors: One in the shadow box (group) and one above. The one placed in a group never loads, while the other does without issues.

This is the current initialize function:

function(instance, context) {

    var divid = 'editor_'+ Math.random().toString(36).substr(2, 9);
  	var  newDiv = $('<div id="'+divid+'"></div>');
    instance.canvas.append(newDiv);
  	var textarea = document.getElementById(divid);

  $(textarea).ready(  
    function loadeditor(){  
      console.log("ready");  
      sceditor.create(textarea, {
      format: 'bbcode'
      }); 
    }  
  );
}

Any suggestions are welcome for which I thank you in advance!

9

You should be checking document ready not textarea

10

Thanks again @seanhoots, I changed

$(textarea).ready(

to

$(document).ready(

However the problem persists. Did I make a mistake here or might something else be causing this problem? Thanks a lot in advance again!

11

The DOM might not be ready (especially a group) by the time you’re making this call.
So move this statement inside document ready

12

This should get you what your after,

initialize:

$(function () {
    var textArea = $('<textarea>');
    textArea.css({ width: '100%', height: '100%' });
    instance.canvas.append(textArea);
    instance.data.textArea = textArea;
})

update:

function(instance, properties, context) {
    $(function () {
        var textArea = instance.data.textArea;
        var inst = sceditor.create($(textArea)[0], {
            format: 'bbcode',
            width: '100%',
            height: '100%',
            style: 'https://www.sceditor.comminified/themes/content/default.min.css' //leave this property out if you have the style in the pages head.
        });

          //This is a quick fix I made to make sure they can be dragged/expanded without being cut off. 
        $(textArea).parents()    
            .find('.sceditor-container')
            .parents()
            .css('overflow', 'visible');

        $(textArea).parents()
            .css({
                height: inst.height(),
                width: inst.width()
            })

        instance.data.textArea = textArea;
    })
}

Well me lie if I didn’t say that was a fun little element to play with.

premier_code_full
ko-fi

13

Thank you very much @PWC!! This solved the issue! :ok_hand:

Also many many thanks to @seanhoots, also very much appreciate our help! :raised_hands:

1 Like