I'm trying to get a small form (for adding comments) working in a popup. To do this, I'm trying to add a dom event listener when the popup is visible, but getElementById (aka byId) can't find the button element. This tries to add it whether the popup is visible or not, but you get the idea -
view.popup.watch("visible", function(visible) {
console.log("popup visible: ", visible);
var btn;
try {
//view.popup.renderNow(); // seems to do bupkis
btn = dom.byId("btnAddComment");
console.log("watch btn is ", btn);
on(dom.byId("btnAddComment"), "click", function() {
console.log("clicky");
});
} catch (err) {
console.log(btn, err);
}
});
The template is super simple, based on the popup intro example -
var template = { // autocasts as new PopupTemplate()
title: "Marriage in NY, Zip Code: {ZIP}",
content: "<button id='btnAddComment'>Add Comment</button>"
};
I've got a codepen of this if you want to see the rest of the code. Pretty sure I did something like this in 3.x, really not sure why it's not working here. Thanks!
The best solution would be to set the popupTemplate content to a function that returns a domNode instead of an HTML string. Since the Popup uses a virtual DOM, the node isn't guaranteed to be there when you're calling getElementByID(). If you create a function that returns a domNode you can isten to events on the domNode in the function.
something like the following
myFunction(graphic) {
var node = document.createElement("div");
node.onClick = doSomething();
return node
}
popupTemplate = {
content: myFunction
};