I am trying to add a div as the content for the popup template which contains only a photo. I have been using this kind of method in the past but now I can't get it to work for some reason.
var photoContentHtml = "";
photoContentHtml = "<img onerror='this.onerror=null;this.src=\'/layerimages/noimage.jpg\'' src='http://app.org/layerimages/{photo}' width='200px' height='150px'>";
and this has always yielded results. I am able to create the div and assign it to a variable as a string and then use the variable as a content for the popup template. For some reason it doesn't work in this scenario so now I am doing it this way, slightly modified.
var disLayer;
var photoContent = "";
var photoContentHtml = "";
var photoId;
var photo;
// Get the screen point from the view's click event
view.on("click", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
let graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === disLayer;
})[0].graphic;
photoId = graphic.attributes.objectid;
$.get(getBaseUrl() + "enterprises/GetEnterprisePhoto?id=" + photoId, function (data, status) {
if (data == null) {
photoContent = "<img src='http://app.org/layerimages/noimage.jpg' width='200px' height='150px'>";
photoContentHtml = photoContent;
}
else {
photo = data;
photoContent = "<img src='http://app.org/layerimages/" + photo + "' width='200px' height='150px'>";
photoContentHtml = photoContent;
}
});
}
});
});
//Check is the layer is queryable
if (restService.label.includes("*")) {
disLayer = new FeatureLayer({
title: restService.label,
url: restService.restServiceLink,
outFields: ["*"], // Return all fields so it can be queried client-side
popupTemplate: { // Enable a popup
title: "<b>" + restService.label + ": {" + restService.searchAndPopupFieldName + "} </b>",
content: photoContentHtml
}
});
}
but this doesn't even show the div inside the popup template. Any pointers on how to proceed for this desperate person? 🙂
I decided to change a few things so here is take two 🙂
I am using a function to create a simple node and display it in the popup template content as instructed here
disLayer = new FeatureLayer({
title: restService.label,
url: restService.restServiceLink,
outFields: ["*"], // Return all fields so it can be queried client-side
popupTemplate: { // Enable a popup
title: "<b>" + restService.label + ": {" + restService.searchAndPopupFieldName + "} </b>",
content: setContentInfo
}
});
function setContentInfo() {
let node = domConstruct.create("div", { innerHTML: "test test test" });
return node;
}
but this also doesn't insert a the "test" string as a content in the popup template.
Works fine if you pass an element like so:
// rest of your code above
//Check is the layer is queryable
if (restService.label.includes("*")) {
disLayer = new FeatureLayer({
title: restService.label,
url: restService.restServiceLink,
outFields: ["*"], // Return all fields so it can be queried client-side
popupTemplate: { // Enable a popup
title: "<b>" + restService.label + ": {" + restService.searchAndPopupFieldName + "} </b>",
content: setContentInfo
}
});
}
function setContentInfo() {
let div = document.createElement("div");
div.innerHTML = "test test test";
return div;
}
I tried to create the element in a function then return it, but it returns [object HTMLDivElement]
function returnElement(href) {
var node = document.createElement("div", { innerHTML: "Vai all'evento"});
node.setAttribute("class", "Arcgis-Map-Popup-GoTo-Button");
node.setAttribute("onclick", "window.location.href = " + href);
return node;
};
// Setta il template per i popup dei punti evento
var popup_event_template = {
title: "{Name}",
content: "{Description}<br>" + returnElement("{href}")
}
These are the parameters i set
var attributes = {
Name: "Graphic",
Description: "I am a point",
Href: "nevent.one"
}