topic Read content of popup after opening in ArcGIS JavaScript Maps SDK Questions

Read content of popup after opening

samitalebi — Wed, 26 Jul 2023 02:02:02 GMT

I'm working with Arcgis version 4.27 and want to set click function for the content of the popup after opening the popup. As I understand, the best way is "reactiveUtils" but doesn't work properly and the length of the "$(".tblInfoWindow").find("img.Question")" is zero.

The code is:

reactiveUtils.watch(
() => mainView.popup.visible,
(visible) => {
if (visible) {
console.log($(".tblInfoWindow").find("img.Question").length);
$(".tblInfoWindow").find("img.Question").click(function () {
var layerID = $(this).attr("id").replace("question_layer", "");
var layerName = $.trim($(this).parent().text());

OpenQuestionLink(layerID, layerName);
});
}
}
);

How can I set click function for the content of the popup after opening that? Seems visible=true before opening the popup!

Re: Read content of popup after opening

LaurenBoyd — Wed, 26 Jul 2023 17:42:39 GMT

Hi @samitalebi -

You can try to watch when the view.popup.selectedFeature changes using reactiveUtils:

reactiveUtils.when(() => view.popup?.selectedFeature, () => { console.log(view.popup.selectedFeature) });

Here is an example CodePen shows how to access that: https://codepen.io/laurenb14/pen/yLQRgGM?editors=1000

If that doesn't work, could you please send a CodePen with an example of what you are trying to achieve?

Re: Read content of popup after opening

JoelBennett — Wed, 26 Jul 2023 18:13:38 GMT

The issue appears to be that just because the visible property changes to true, it doesn't mean the content has yet been added to the popup, and therefore queryable through the DOM. Since the popup doesn't have the equivalent of a "content-ready" event, we have to be a little more creative. I recommend something like the following:

new MutationObserver(function() { if (popup.visible) { var button = document.querySelector("myButtonSelector"); if ((button) && (button.dataset.addedclick != "true")) { button.dataset.addedclick = "true"; //flag to indicate we've set the handler, so action doesn't get repeated unnecessarily button.onclick = function() { //do something }; } } }).observe(popup.container, {childList:true,subtree:true});