Dynamic data inside plugin element code?

lantzgould · 2020-05-29T02:49:00.016Z

Hey @jacobgershkovich, how would this look?

(Thanks in advance, I’m still new to the visual element side of things)

jacobgershkovich · 2020-05-29T03:04:01.492Z

Check this link out: https://www.dyn-web.com/tutorials/iframes/dyn-gen/

In the initialize function, you could create and store the iframe:

(using vanilla javascript)

instance.data.iframe = document.createElement(‘iframe’);

Then, assuming you’re trying to use some dynamic data that the user is going to give you, in the “update” function, you access the properties object:

var iframe = instance.data.iframe
iframe.setAttribute(‘src’, properties.yourDynamicData)

jacobgershkovich · 2020-05-29T03:06:17.318Z

Also, here is a great series on YouTube on manipulating the dom using vanilla javascript. Helped me tremendously.

lantzgould · 2020-05-29T03:20:30.415Z

Thank you! This video is great.

I think I’m almost there, but it doesn’t seem to catch:

sudsy · 2020-05-29T04:13:42.264Z

lantzgould:

All I’m trying to accomplish is to append dynamic field to the end of this iframe which lays inside the element code of a visual element.

Hi Lantz,

I don’t think the iframe belongs in the headers section. One approach would be to create the iframe in the element’s initialize() method and append it to instance.canvas. That can be done using jQuery. (instance.canvas is, after all, a jQuery object itself.) So, your initialize() method might look something like the following:

const $ = context.jQuery;

/* Create iframe with desired attributes
 * and styling, and store a reference to it.
 */
//instance.data.iframe = $('iframe').attr({ <-- incorrect
instance.data.iframe = $('<iframe>').attr({
   name : 'myiFrame',
   scrolling : 'no',
   frameborder : '0',
   marginwidth : '0',
   marginheight : '0',
   width : '700',
   height : '700'
}).css({
   border : "0px #ffffff none;"
});

/* Add iframe to the DOM by appending it
 * to the Bubble element container.
 */
//instance.canvas.append( iframe ); <-- incorrect
instance.canvas.append( instance.data.iframe );

Then (assuming “something” is a property specified in the Bubble editor), in the element’s update() method, add the src attribute with the dynamic value:

instance.data.iframe.attr({
   src : 'https://some.url' + properties.something
});

Then, whenever the element’s property changes, the URL will be updated. (The code’s untested but hopefully close.)

Also FWIW, I don’t think frameborder, marginwidth, and marginheight are valid HTML5. You could use CSS border and padding instead.

lantzgould · 2020-05-29T04:34:52.306Z

Hey @sudsy! Thank you so much for this.

I definitely am getting closer. Your code worked for the most part, as there aren’t any errors in the debugger. But, it doesn’t seem to want to render on page load… Any troubleshooting ideas?

sudsy · 2020-05-29T05:04:40.728Z

Yeah, I think I see an oversight. Try putting angle brackets around the string “iframe” so that it’s “<iframe>” (when it’s created using jQuery).

lantzgould · 2020-05-29T16:27:47.766Z

No dice on this one

exception-rambler · 2020-05-29T16:39:03.097Z

you need to append instance.data.iframe, not just iframe

sudsy · 2020-05-29T16:42:34.502Z

exception-rambler:

you need to append instance.data.iframe , not just iframe

You beat me to it!

(Just tested it out and discovered that.)

lantzgould · 2020-05-29T16:51:09.295Z

Thanks @exception-rambler, does this go directly underneath the canvas append? No errors in the debugger, but doesn’t render. Maybe my syntax is off. (I clearly need to up my reading on plugin dev lol)

Thanks for being patient with me guys!

exception-rambler · 2020-05-29T16:54:06.944Z

No problem.

instance.canvas.append(iframe);
should be
instance.canvas.append(instance.data.iframe);

This is because there is no iframe variable defined, instead you have created an ‘iframe’ key of the instance.data object

sudsy · 2020-05-29T17:03:27.460Z

Just to be clear, there were 2 issues:

The angle brackets are indeed needed.
The iframe reference is stored in the instance.data object - not a local variable - so replace the line as @exception-rambler indicated.

lantzgould · 2020-05-29T17:06:54.818Z

I see… For some reason this still doesn’t want to render.

If this is just me writing the iframe in brackets incorrectly I think I’m going to need a new monitor

sudsy · 2020-05-29T17:10:19.170Z

lantzgould:

For some reason this still doesn’t want to render.

What do you see when you inspect the element with the dev tools on the rendered page?

lantzgould · 2020-05-29T17:14:02.913Z

I can see the element is visible on page load, but the contents of the iframe, in this example is just google.com for testing, isn’t:

image1914×703 77.2 KB

Jici · 2020-05-29T17:34:15.884Z

When I look at your screenshot, it seem that you have removed the “function” already there when you create an element.

function(instance, properties, context) {

}

If for the “update” part

function(instance, context) {

}

If for initialize

sudsy · 2020-05-29T17:34:37.007Z

When you do get it to “work”, you should see the iframe element in the DOM, but the external site content might not display, because many sites set the X-Frame-Options response header to deny.

lantzgould · 2020-05-29T17:39:15.290Z

@Jici - I forgot I deleted this haha…

Working now, thanks everyone for your help! Very much appreciated.

giphy

sudsy · 2020-05-29T17:40:32.373Z

Good eye, @Jici!

Yeah, the function declaration (keyword, arguments, parentheses, brackets) must remain intact.