topic Re: Link to Popup in ArcGIS JavaScript Maps SDK Questions

Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:28 GMT

I have an info template returning a link.

Right now with I click on it it opens to a new browser tab (_blank)

Looking for 2 options.

1. Display this in a DIV

2. Pop this up into a new floating popup

Any ideas

var infoHighwayCameras = new InfoTemplate();
     infoHighwayCameras.setTitle("Highway Cameras");        
     infoHighwayCameras.setContent("<table>" +
     "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
     "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
     "<tr><td></td><td></td></tr>" +
     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>For Camera Image <a href='${image_url}' target='_blank'><font color='0x84CCDA'>click here</font></a>."+     
     "</table><hr>");     ‍‍‍‍‍‍‍‍

Re: Link to Popup

jaykapalczynski — Fri, 30 Nov 2018 18:48:49 GMT

I tried this but it still pops up in a new tab

Do I need a new reference in JavaScript?

Missing the mark?

"<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>For Camera Image <a href='${image_url}' target='popup' onclick='window.open('${image_url}','popup','width=600,height=600'); return false;'>Open Link in Popup</a>." +‍

Re: Link to Popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:08:31 GMT

Jay,

See if this works:

var infoHighwayCameras = new InfoTemplate();
     infoHighwayCameras.setTitle("Highway Cameras");        
     infoHighwayCameras.setContent("<table>" +
     "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
     "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
     "<tr><td></td><td></td></tr>" +
     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src='${image_url}'/></td>"+     
     "</table><hr>");‍‍‍‍‍‍‍‍

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:33 GMT

Thank you and that does work....but my real-estate is a bit lacking

which is why I am also trying to get this link to display in a separate DIV

If I specify the URL in html it shows the image.

What i need to do is update this image when I click the link in the infotemplate

Maybe update the div1.innerHTML with the source? Obviously the below does not work

<div id="div1" style="margin: 0 auto; width:340px; height:300px;">
    <object type="text/html" 
      data="https://images.skyvdn.com/thumbs/RichmondCS064EB1790.flv.png"
      style="width:320px; height:290px; padding-left:6px;">
    </object>
</div>‍‍‍‍‍‍‍‍‍‍‍‍

"<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>For Camera Image <a onclick='div1.innerHTML = 'src= ${image_url}''); return false;'>Open Link in Popup</a>." +‍‍

Re: Link to Popup

RobertScheitlin__GISP — Fri, 30 Nov 2018 19:40:30 GMT

Jay,

Your onclick portion needs to call a global function in your code that can get a reference to the div1 in that code and update the innerHTML. The onclick function would need to pass the url too.

Re: Link to Popup

jaykapalczynski — Fri, 30 Nov 2018 19:53:35 GMT

My problem with simply setting the img src, which works, but it does not reload a new image when clicked again. These images refresh via the services. The only way to do this right now is to refresh the browser which I dont want to do.

Re: Link to Popup

RobertScheitlin__GISP — Fri, 30 Nov 2018 19:57:32 GMT

Jay,

Sorry what you are saying does not make sense. If the function is called from the infoWindow setContent method then it would be the new image url when you pass the new url in. As in many cases it would be best to provide a sample of your use case and code.

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:36 GMT

Test case 1 - set the source of the info template to the URL of the image. example value from this field (image_url) https://images.skyvdn.com/thumbs/RichmondCS064EB1790.flv.png

"<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src='${image_url}'/></td>"+

If I do this and click on the same feature it does not reload the image from the image source. I have to refresh my browser in order to see the new image. These are traffic cameras so there is a static image that gets added to the Rest End point every few minutes.

Test case 2 - call a function from the link to push a url to the div tag to refresh the image. RIGHT now I a, simply trying to get an alert fired in the function from the onvclick event. This is NOT working

I tired these 3 examples

I do not get the alerts....doing something wrong?

function inHrefFunction(test){
    alert("Here");
    alert(test); 
}

function onclickFunction(url) {
     alert(url);
}

function myFunction(name, work) {
     alert(name + " " + work);
}


var infoHighwayCameras = new InfoTemplate();
infoHighwayCameras.setTitle("Highway Cameras");

infoHighwayCameras.setContent("<table>" +
     "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
    "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
     "<tr><td></td><td></td></tr>" +

     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction('${image_url}')'>Click Me!</a>." +

     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST2 <a href='javascript:inHrefFunction('${image_url}')'>Click Me!</a>." +‍‍‍‍‍‍‍‍‍‍‍‍‍

      "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST2 <button onclick='myFunction('Harry Potter','Wizard')'>Try it</button>" + 

      "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src='${image_url}'/></td>"+  

"</table><hr>"); 
var HighwayCameras = new FeatureLayer("https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Camera_Location_VDOT/FeatureServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: false,
opacity: .5,
outFields:["*"],
infoTemplate: infoHighwayCameras
});
legendLayers3.push({ layer: HighwayCameras, title: 'Highway Cameras' });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

jaykapalczynski — Fri, 30 Nov 2018 21:13:48 GMT

copied all the code I am using for this....sorry for the confusion......appreciate your help

Re: Link to Popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:08:39 GMT

Jay,

OK, where we were disconnection is that you need to use a function to set the content and not just a string in the setContent method.

infoHighwayCameras.setContent(getTextContent);
function getTextContent(graphic) {
  return "<table>" +
    "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
    "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
    "<tr><td></td><td></td></tr>" +
    "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction(" + graphic.attributes.image_url + ")'>Click Me!</a>." +
    "</td></tr></table><hr>";
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:42 GMT

So I am testing this for 2 scenarios :

1. The image simply appears in the template

2. There is an onclick even that calls a function to update the Div or what ever location you are specifying in my app

I use the code below and it stops returning my attribute values for ${route} and ${status} nor does it find the ${image_url} to show the image in the template. So the image no longer appears in the template

When I click the link for the 2nd scenario nothing happens.

1. I don't get either alert boxes but rather an error: SyntaxError: missing ) after argument list

2. If I remove the " " in this (" + graphic.attributes.image_url + ") becomes this (' + graphic.attributes.image_url + ') i get Error: Unexpected end of input

Maybe your example is not designed for anything but a function call? Trying to get both scenarios working so I can ultimately decide which one to use but also a learning thing here. My question is can both scenarios work from within this Function? Or do I build the table and then create the function?

function onclickFunction(test){
     alert("Here");
     alert(test);     
}

var infoHighwayCameras = new InfoTemplate();
    infoHighwayCameras.setTitle("Highway Cameras");
    infoHighwayCameras.setContent(getTextContent);
     function getTextContent(graphic) {
     return "<table>" +
     "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
     "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
     "<tr><td></td><td></td></tr>" +
     "<tr><td id='tblMainline1'>route</td><td id='tblSubline2'>${route}</td></tr>" +
     "<tr><td id='tblMainline1'>status</td><td id='tblSubline2'>${status}</td></tr>" +
                         
     "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src='${image_url}'/></td>"+
     
"<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction(" + graphic.attributes.image_url + ")'>Click Me!</a>. </td></tr>" +
     "</table><hr>";
    }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

RobertScheitlin__GISP — Mon, 03 Dec 2018 13:51:28 GMT

Jay,

When using a function you have to convert all your ${field_names} to

graphic.attributes.field_names

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:44 GMT

Yea I am trying like your example but your example does not seem to work either...trying to look this up in help sections

Trying to find examples or documentation on Functions within an InfoTemplate.

infoHighwayCameras.setContent(getTextContent);
function getTextContent(graphic) {
  return "<table>" +
    "<tr><td id='tblTitle'>Highway Cameras</td><td id='tblTitle2'></td></tr>" +
    "<tr><td id='tblTitleLine'></td><td id='tblTitleLine2'></td></tr>" +
    "<tr><td></td><td></td></tr>" +
    "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction(" + graphic.attributes.image_url + ")'>Click Me!</a>." +
    "</td></tr></table><hr>";
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Im trying for:

one with simply attribute value
one with image in the src that will update the image every feature click
one with a click event to call a function to update a DIV or something with the image value

I thought the click of the link (3rd one below) would bring my to the outside function that I can simply alert from to show I was there.

Trying to get the syntax right...haven't found any documentation specific to this application of it yet.

function onclickFunction(test){
     alert("Here");
     alert(test);     
}

var infoHighwayCameras = new InfoTemplate();
  infoHighwayCameras.setTitle("Highway Cameras"); 
  infoHighwayCameras.setContent(getTextContent);
    function getTextContent(graphic) {
     return "<table>" +
       "<tr><td id='tblMainline1'>jurisdiction</td><td id='tblSubline2'> ${graphic.attributes.jurisdicti} </td></tr>" +

       "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src= ' + graphic.attributes.image_url + '/></td>"+

       "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction(' + graphic.attributes.image_url + ')'>Click Me!</a> </td></tr>" +

    "</table><hr>";‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

RobertScheitlin__GISP — Mon, 03 Dec 2018 14:49:43 GMT

Jay,

Sounds like you are looking for this thread then.

https://community.esri.com/thread/162144

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:47 GMT

I got the first two now working on the 3rd...created variables to set the values and then used that in the table

var infoHighwayCameras = new InfoTemplate();
     infoHighwayCameras.setTitle("Highway Cameras");          
     infoHighwayCameras.setContent(getTextContent);
          function getTextContent(graphic) {
               var Jurisdiction = graphic.attributes['jurisdicti']; 
               var Image = graphic.attributes['image_url'];
               return "<table>" +
                    "<tr><td id='tblMainline1'>jurisdiction</td><td id='tblSubline2'> " + Jurisdiction + "</td></tr>" +                              

                    "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src= " + Image + " /></td></tr>" +

                    "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction(' + graphic.attributes.image_url + ')'>Click Me!</a> </td></tr>" +
                              
                    "</table><hr>";
          }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

RobertScheitlin__GISP — Sun, 12 Dec 2021 08:08:50 GMT

Jay,

So what you had wrong in your previous code was syntax:

var infoHighwayCameras = new InfoTemplate();
  infoHighwayCameras.setTitle("Highway Cameras"); 
  infoHighwayCameras.setContent(getTextContent);
    function getTextContent(graphic) {
     return "<table>" +
       "<tr><td id='tblMainline1'>jurisdiction</td><td id='tblSubline2'>" + graphic.attributes.jurisdicti + "</td></tr>" +
       "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src= '" + graphic.attributes.image_url + "'/></td>"+
       "<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><i>TEST1 <a href='#' onclick='onclickFunction('" + graphic.attributes.image_url + "')'>Click Me!</a> </td></tr>" +
    "</table><hr>";‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Link to Popup

jaykapalczynski — Sun, 12 Dec 2021 08:08:53 GMT

So I can do this and it displays the image....I can forgo pushing to a new div or what ever using a function , but what I cannot get to work is a refresh of the image as these change every few seconds...

It seems to be caching the image and when I click on the same feature it does not refresh because the name is the same.

I tried to add a date time into the URL but thats not working either.

If I can find a way to clear the cache for the image that was already viewed I think that would work....but not sure.

The image in the InfoTemplate does not refresh

var Image = graphic.attributes['image_url'];
var newdate = new Date()
var Image2 = Image + "?" + newdate ‍‍‍

"<tr><td id='tblMainline1'>image_url</td><td id='tblSubline2'><img src= " + Image2 + " /></td></tr>" +

‍‍‍‍‍‍‍‍

Re: Link to Popup

RobertScheitlin__GISP — Mon, 03 Dec 2018 16:20:06 GMT

Jay,

Do you have a refreshInterval set on the FeatureLayer?

Re: Link to Popup

jaykapalczynski — Mon, 03 Dec 2018 16:33:17 GMT

No....do you set that along with the outfields and opacity? Not sure how this will effect the cached image as the image name does not change for a specific feature, this is why I was trying to put a date stamp at the end...hoping that it would reload the image. If I click another feature the image changes....but when I go back and click on the first image it still displays the original image.

If I do this in a popup it changes the image each time I click on it. But I have to keep closing to window it opens in ...I want this a bit more streamlined where it refreshes the image in the InfoTemplate itself...Seems the InfoTemplate is not refreshing the image ...that make sense?

I have been researching how to clear an image from the cache with a specific name in javascript so it forces it to reload a new image....no luck

Re: Link to Popup

jaykapalczynski — Mon, 03 Dec 2018 16:40:28 GMT

I put a refresh interval on the layer and its still not refreshing in the InfoTemplate

Still think its linked to the image being cached in the browser? So puzzled here...if I click a new feature the image changes but goes back to the original image on the first feature I clicked....it does not get updated in the InfoTemplate...but as I stated if I force to a popup and open a new window the image does refresh.

var HighwayCameras = new FeatureLayer("https://services.arcgis.com/DO4gTjwJVIJ7O9Ca/arcgis/rest/services/Camera_Location_VDOT/FeatureServer/0", {
      mode: FeatureLayer.MODE_ONDEMAND,
      visible: false,
      opacity: .5,
      outFields:["*"],
      infoTemplate: infoHighwayCameras
});
HighwayCameras.refreshInterval = 0.1;