topic Re: Custom Pop-up, onClick is not rendering in ArcGIS JavaScript Maps SDK Questions

Custom Pop-up, onClick is not rendering

UgurcanErkal — Mon, 30 Jan 2023 15:58:33 GMT

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.

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

Re: Custom Pop-up, onClick is not rendering

KenBuja — Mon, 30 Jan 2023 16:54:19 GMT

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>`

Re: Custom Pop-up, onClick is not rendering

JoelBennett — Mon, 30 Jan 2023 17:03:56 GMT

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)); }; });

Re: Custom Pop-up, onClick is not rendering

ReneRubalcava — Mon, 30 Jan 2023 17:35:34 GMT

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

Re: Custom Pop-up, onClick is not rendering

UgurcanErkal — Mon, 13 Feb 2023 09:33:22 GMT

Thank you, this works as expected!

Re: Custom Pop-up, onClick is not rendering

emreaktas1 — Wed, 22 May 2024 11:39:29 GMT

@UgurcanErkal merhaba;
aynı sorunla karsılasıyorum. Popup içine bir html etiketi örneğin button eklemek istiyorum. Yardımcı olurmusun