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? 🙂