Plugin doesn't work inside a group

Hi,

I am creating a visual JS plugin where the element simply displays an image from the Internet.

Everything works when I draw the element onto a page… but if I drag the element into a group, then the element stops working.

Is there something needed to get a visual JS plugin element to work inside of a Group on a page?

Here is my plugin code:

(Initialize Function)
function(instance, context) {

// setup HTML for chart
var div;

div = 	$('<div id="imageHolder">this is where the image will show</div>');

instance.canvas.append(div);

}

(Update Function)
function(instance, properties, context) {

document.getElementById(“imageHolder”).innerHTML=“”;

}

Thank you

One followup comment, is that the plugin also works in a group if the group and page are NOT fixed width…

If it is put into any group that has a fixed width then it doesn’t work anymore

Hoping there is a simple fix to this

thanks

Moved this to “plugin builders” – “Plugins” category is for discussing existing plugins. Since your question is about development of plugins, you are more likely to find help in “builders” category. FYI, to other plugin builders. Thanks.

We figured this out on own but thought would post the solution for others who may have this problem.

The narrative to the solution is that a visual plugin element in bubble needs to have a unique DOM (i.e. place to put the visual element on the page).

Here is the code:

(Initialize Function)
function(instance, context) {

var div;

var elementid = ‘dp’+(Math.random() * Math.pow(2, 54)).toString(18);
div = $(‘

’);
instance.canvas.append(div);

instance.data.elementid = elementid;

}

(Update Function)
function(instance, properties, context) {

$(function (){

var uniqueid = instance.data.elementid
var page = instance.canvas.find(‘#’ + uniqueid)[0]
var div = $(page)

var classid = (Math.random() * Math.pow(2, 54)).toString(18);
var imgtag = ‘’;
$(page).append(imgtag)

});

}

So this issue is closed

:slight_smile:

1 Like