Dynamic Content in Popuptemplate

MikeV

I'm displaying popups with images that also have some JavaScript events associated with them (onmouseover, omouseout events). In order to get the JavaScript events through the sanitizer in v4.23, I dynamically create a DOM element for my content like this:

popuptemplate.content = function(){

var div = document.createElement("div");
div.innerHTML = { my dynamic content, including the image URL, goes here };
return div;

}

While this method outputs the events, it also preloads all of my images when the page loads (over 1000 images). I only want to load the image when the popup is clicked and still be able to keep my events associated with the image. How can I accomplish this?

ReneRubalcava

Is the "myCustomData" based on information from the feature? Based on the attributes? You could have that method be the content and create the elements when the popup opens. That would be the recommended way.

You can tweak that getDynamicContent method if you really need to

 

function getDynamicContent(content) {
  return () => {
    const div = document.createElement("div");
    div.innerHTML = content;
    return div;
  }
}