Link to Popup

jaykapalczynski · ‎11-30-2018

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>");     ‍‍‍‍‍‍‍‍

RobertScheitlin__GISP · ‎12-03-2018

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

jaykapalczynski · ‎11-30-2018

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>." +‍

RobertScheitlin__GISP · ‎11-30-2018

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 · ‎11-30-2018

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>." +‍‍

RobertScheitlin__GISP · ‎11-30-2018

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.

jaykapalczynski · ‎11-30-2018

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.

RobertScheitlin__GISP · ‎11-30-2018

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.

jaykapalczynski · ‎11-30-2018

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' });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

jaykapalczynski · ‎11-30-2018

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

RobertScheitlin__GISP · ‎11-30-2018

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