Custom Pop-up, onClick is not rendering

948
4
Jump to solution
01-30-2023 07:58 AM
UgurcanErkal
New Contributor II

Hi guys,

I'm creating a custom pop-up, and the content is pure HTML. On that HTML content, I'm trying to put onClick but it is not rendering. 

 

    } else {
        if (filteredProductList[i].productType == 'Permit') {
            popUpContent += "<a class='slds-button slds-button_brand'  href='#' onClick='return false;'>Sold Out</a>";
        } else {
            popUpContent += "<a class='slds-button slds-button_brand' href='#' onClick='notifyMe('TEST')'>Notify Me</a>";
            popUpContent += "<input type='button' class='slds-button slds-button_brand' onClick='notifyMe('TEST')'>Notify Me</input>";
        }
    }
}

view.popup.open({
title: popUpTitle,
location: m_event.mapPoint,
content: popUpContent
});

 

But when I check the created pop up I'm not able to see this onClick rendered.

UgurcanErkal_0-1675094238128.png

 

Is it forbidden by Esri to create an element with onClick?

 

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
JoelBennett
MVP Regular Contributor

Yes, in version 4.14, ESRI added the HTML sanitizer which, among other things, prevents you from adding event handlers in your popup content.  See the final breaking change listed here.

Fortunately, if you prefer to decide for yourself what is and isn't permissible in your applications, it's fairly easy to bypass.  You'd just need to add the following somewhere near where your application starts up.

require(["esri/widgets/support/widgetUtils"], function(widgetUtils) {
	var sanitize = widgetUtils.renderingSanitizer.sanitize;

	widgetUtils.renderingSanitizer.sanitize = function(b, c) {
		return ((typeof b == "string") ? b : sanitize.call(this, b, c));
	};
});

View solution in original post

0 Kudos
4 Replies
KenBuja
MVP Esteemed Contributor

Try using template strings instead. I can get an alert using this syntax

`<a class='slds-button slds-button_brand' href='#' onClick='alert("Sold Out");'>Sold Out</a>`

 

0 Kudos
JoelBennett
MVP Regular Contributor

Yes, in version 4.14, ESRI added the HTML sanitizer which, among other things, prevents you from adding event handlers in your popup content.  See the final breaking change listed here.

Fortunately, if you prefer to decide for yourself what is and isn't permissible in your applications, it's fairly easy to bypass.  You'd just need to add the following somewhere near where your application starts up.

require(["esri/widgets/support/widgetUtils"], function(widgetUtils) {
	var sanitize = widgetUtils.renderingSanitizer.sanitize;

	widgetUtils.renderingSanitizer.sanitize = function(b, c) {
		return ((typeof b == "string") ? b : sanitize.call(this, b, c));
	};
});
0 Kudos
UgurcanErkal
New Contributor II

Thank you, this works as expected!

0 Kudos
ReneRubalcava
Frequent Contributor

You can manually create the DOM elements and add them to the custom content of your popup, which would be the recommended way to do something like this.

 https://developers.arcgis.com/javascript/latest/api-reference/esri-PopupTemplate.html#content

popupTemplate: {
  title: "{name}",
  content: [
    {
      type: "custom",
      outFields: ["*"],
      creator(event) {
        const elem = document.createElement("div");
        const btn = document.createElement("button");
        btn.innerText = event.graphic.attributes.name;
        btn.addEventListener("click", () => {
          alert(event.graphic.attributes.description);
        });
        elem.appendChild(btn);
        return elem;
      }
    }
  ]
}

https://codepen.io/odoe/pen/QWBVKMM?editors=0010

 

0 Kudos