topic Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object in ArcGIS JavaScript Maps SDK Questions

ArcGIS Javascript API v3.21 : I can't display the content of InfoTemplate using deferred object when I am clicking on a Graphic

KostasPapakonstantinou — Fri, 10 Dec 2021 20:37:15 GMT

Hello,

I use "arcgis for javascript 3.21" and I have created a map with some graphics (points). The problem is that I can't display the content of infowindow because I get an error message.

...

var getPopupTemplate = function(target) {
    var towerId = target.attributes.id;

    var requestObj = {
   url: "http://...",
   content: {
      ...
   },
   handleAs: "json"
};
 var markerInfoResponseSuccess = function(response) {
 console.log(response);
 var markerInfo = response.markerInfo;
 var html = "<a href=" + markerInfo.url + ">" + markerInfo.title + "</a>";
 
 return html;
 };
 
 var markerInfoResponseError = function(error){
 console.log("There was an error on 'get marker info' request: ", error);
 };

 return esriRequest(requestObj).then(
 markerInfoResponseSuccess,
 markerInfoResponseError
 );
};

var pt = new InfoTemplate({
    content: getPopupTemplate
});

var markerSymbol = new PictureMarkerSymbol({
    "url"   : "http://...",
    "width" : 10,
    "height": 10
});

var point = new Point({
    longitude: ...,
    latitude: ...
});

var pointAtt = {
    title: "myTitile",
    id: 100
};

// Create a graphic and add the point geometry and pin(symbol) to it
var pointGraphic = new Graphic( point, markerSymbol, pointAtt, pt);

....

When I click on the point I can see the response on console but I get the following error, and the content on the infowindow is empty. If I use :

var pt = new InfoTemplate({
    content: "my text"
});

then everything is OK. What's the problem?

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at Object.b.place (init.js:208)
    at Object.place (init.js:1184)
    at Object.setContent (init.js:1149)
    at Object._updateWindow (init.js:1157)
    at Object._featureSelected (init.js:1157)
    at Object.<anonymous> (init.js:63)
    at Object.c [as onSelectionChange] (init.js:119)
    at Object.select (init.js:1191)
    at Object._updateFeatures (init.js:1197)
    at init.js:62 "TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at Object.b.place (https://js.arcgis.com/3.21/init.js:208:402)
    at Object.place (https://js.arcgis.com/3.21/init.js:1184:263)
    at Object.setContent (https://js.arcgis.com/3.21/init.js:1149:278)
    at Object._updateWindow (https://js.arcgis.com/3.21/init.js:1157:500)
    at Object._featureSelected (https://js.arcgis.com/3.21/init.js:1157:254)
    at Object.<anonymous> (https://js.arcgis.com/3.21/init.js:63:277)
    at Object.c [as onSelectionChange] (https://js.arcgis.com/3.21/init.js:119:193)
    at Object.select (https://js.arcgis.com/3.21/init.js:1191:258)
    at Object._updateFeatures (https://js.arcgis.com/3.21/init.js:1197:246)
    at https://js.arcgis.com/3.21/init.js:62:468"

thank you,

Kostas

Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object

ThomasSolow — Fri, 10 Dec 2021 20:37:18 GMT

At this point in your code:

var pt = new InfoTemplate({
    content: getPopupTemplate
});‍‍‍

You're setting the content equal to the result of getPopupTemplate, which is a promise (or a deferred object). You need to reformulate things roughly like this:

getPopupTemplate(target).then(function(html){
  var pt = new InfoTemplate({
    content: html
  });
});‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object

ThomasSolow — Fri, 10 Dec 2021 20:37:21 GMT

To give a little more details, it does seem that you can set an InfoTemplate's content to a function, but it's not clear to me that that function can return a deferred object. This example doesn't work:

function giveString(){
  return new Promise(fulfill => {
    setTimeout(()=>fulfill('content'),500);
  });
}

// throws error
let template = new InfoTemplate({
  content: giveString
});

‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object

KostasPapakonstantinou — Fri, 10 Dec 2021 20:37:24 GMT

There is an example in Format info window content | Guide | ArcGIS API for JavaScript 3.21

under "Deferred Object" :

("In some cases, the content you want to display is not immediately available. It may be content that you need to download from a server using esri/request, which returns an instance of dojo/Deferred...")


function getTextContent(graphic) {
  var geometry = webMercatorUtils.webMercatorToGeographic(graphic.geometry);
  soeParams.InputPolyline = JSON.stringify(geometry.toJson());
  var def =  esriRequest({
    url: soeURL,
    content: soeParams,
    callbackParamName: "callback",
    load: function(fset) {
      return "<img src='" + fset.profileImageUrl + "'/>";
    }
  });
  return def;
}

So, I wrote my code like this :

function getPopupTemplate2(target) {
      var towerId = target.attributes.id;
      var requestObj = {
          url: ...,
          content: {
            ...
          },
          callbackParamName: "callback",
          handleAs: "json",
          load: function(response) {
               console.log(response);
               var markerInfo = response.markerInfo;
               var html = "<a href=" + markerInfo.url + ">" + markerInfo.title + "</a>";
       
               return html;
          }
      };
      var def =  esriRequest(requestObj);

      return def;
}

...

var pt = new InfoTemplate({
    content: getPopupTemplate2
});

...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

var pointGraphic = new Graphic( point, markerSymbol, pointAtt, pt);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

but again I get the same error

Any thoughts?

P.S : The example ArcGIS API for JavaScript Sandbox doesn't seem to work.

Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object

KenBuja — Thu, 24 Aug 2017 23:22:43 GMT

The sandbox version of the sample may not be working since it involves a proxy. The description in the sample does need updating, since it refers to "dojo.Deferred", "deferred.callback", and "deferred.errback", none of which actually appear in the script.

However, the live version does work properly: Info window with deferred object

Re: ArcGIS Javascript API v3.21 : I can't display the content of infowindow using deferred object

KostasPapakonstantinou — Fri, 10 Dec 2021 20:37:26 GMT

I use the following code as it is descripted here Info window with deferred object | ArcGIS API for JavaScript 3.21 , too. Again the same error

function getPopupTemplate3(target) {
     var deferred = new dojo.Deferred();
     var towerId = target.attributes.id;

     var requestObj = {
          url: ...,
          content: {...},
          callbackParamName: "callback",
          handleAs: "json",
          load: function(response) {
               var markerInfo = response.markerInfo;
               deferred.callback("<a href=" + markerInfo.url + ">" + markerInfo.title + "</a>");
          },
          error: function(error) {
               deferred.errback("Error occurred...");
          }
     };
     esri.request(requestObj);

     return deferred;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: ArcGIS Javascript API v3.21 : I can't display the content of InfoTemplate using deferred object when I am clicking on a Graphic

ThomasSolow — Mon, 28 Aug 2017 15:37:13 GMT

After playing with it for a bit I got this sample to work: JS Bin - Collaborative JavaScript Debugging

That fetches some html from the feature service and parses that into a dom node and uses that node as the content for the infoTemplate.

Re: ArcGIS Javascript API v3.21 : I can't display the content of InfoTemplate using deferred object when I am clicking on a Graphic

KostasPapakonstantinou — Fri, 10 Dec 2021 20:37:29 GMT

What I'm trying to do is to add some points on the map. I get these points with ajax request from a server where I have wrote the code and I use the default GraphicsLayer (and not a featureLayer) to add these points on the map

var pointGraphic = new Graphic( point, markerSymbol, pointAtt, pt);

self.map.graphics.add(pointGraphic);

I get the content of infowindow from a server where I have wrote the code (and not from a third party) with ajax request, again

I used your idea like that :

var pt = new InfoTemplate({
    content: getPopupTemplate2
});

function getPopupTemplate2(target) {
    var towerId = target.attributes.id;

    var def = request({
        url: "....myServerFile.php",
        content: {
                 ...
        },
        handleAs: 'json',
        callbackParamName: 'callback',
        load: resp => {
            var markerInfo = resp.markerInfo;
            var html = "<a href=" + markerInfo.url + ">" + markerInfo.title + "</a>";
            console.log(html);

            return domConstruct.toDom(html);
        }
    });
}

....
self.map.on("load", init);
function init() {
...   
   var infoWindow = new InfoWindow({}, domConstruct.create("div", null, this.root));
   infoWindow.startup();
   this.setInfoWindow(infoWindow);
   this.infoWindow.resize(625, 240);

}

When I click the point , the infoWindow is shown but only for time. The next time I click on the point, the infoWindow 
is not shown