Link to Popup

818
35
Jump to solution
11-30-2018 10:33 AM
jaykapalczynski
Frequent Contributor

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>");     
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Jay,

  OK this is what I got working on my end:

    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'>description</td><td id='tblSubline2'> " + graphic.attributes.descriptio + " </td></tr>" +
        "<tr><td id='tblSubline2' colspan='2'><img src= " + graphic.attributes.image_url + "?t=" + new Date().getTime() + " /></td></tr>" +
        //Notice my little time stamp change to the url above
        "</table><hr>";
    }

    function onLayerUpdateEnd(){
      //when the layer is refereshed if the popup has a selected feature then
      //force the popup to get the content again
      if(map.infoWindow.count > 0){
        var graphic = map.infoWindow.getSelectedFeature();
        map.infoWindow.setFeatures([graphic]);
      }
    }

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

    HighwayCameras.on('update-end', onLayerUpdateEnd);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

0 Kudos
35 Replies
jaykapalczynski
Frequent Contributor

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>." +
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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>");
jaykapalczynski
Frequent Contributor

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>." +
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
jaykapalczynski
Frequent Contributor

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.  

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
jaykapalczynski
Frequent Contributor

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...", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: false,
opacity: .5,
outFields:["*"],
infoTemplate: infoHighwayCameras
});
legendLayers3.push({ layer: HighwayCameras, title: 'Highway Cameras' });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
jaykapalczynski
Frequent Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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