Adding a div to the popup template

800
3
10-15-2021 12:26 AM
by Anonymous User
Not applicable

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

0 Kudos
3 Replies
by Anonymous User
Not applicable

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.

0 Kudos
RyanGatchell1
New Contributor III

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

 

 

 

LorenzoMara
New Contributor

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"
        }
0 Kudos