topic Re: additional function in infotemplate hyperlink in ArcGIS JavaScript Maps SDK Questions

additional function in infotemplate hyperlink

PeggyCorey — Wed, 15 Jul 2015 13:20:40 GMT

Can anyone share an example of firing an additional function inside an onClick of a hyperlink inside an InfoTemplate?

I already have the InfoTemplate setup, and the hyperlink in place and working, but I would like to fire an additional function when the hyperlink is clicked.

I attempted inserting an onClick event in the anchor tag, as shown below, but I got an error saying the function I referred to was undefined. I had a feeling that would not work, but I'm not quite sure how to do it.

var template = new InfoTemplate(result.layerName + " <a href='http://myserver/street_view.htm' onClick='create_child();' target=_blank>Street View</a>");

Any help is apprecited... thanks!

Re: additional function in infotemplate hyperlink

ChrisSmith7 — Wed, 15 Jul 2015 13:38:09 GMT

Peggy,

I had some issues with hyperlinks discussed here:

InfoWindow fields - URLs automatically add "_blank" as target

I got it working correctly - I also added some onClick handling... let me dig-up that code...

Re: additional function in infotemplate hyperlink

ChrisSmith7 — Sat, 11 Dec 2021 16:02:40 GMT

Here's the code:

contextPopupTemplate.setContent("<div><strong>Foo: ${foo}</strong></div>" +
                                            "<hr>" +
                                            "<strong>Bar: </strong> ${bar}<br />" +
                                            "<strong>Bat: </strong> <a href=\"#\" onclick=\"window._contextPopup._initPopup(\'" + batLink + "\', 2);\">Bat</a>")

In my case, I'm calling this from within a module, so I needed the onclick event to be global. I also had to escape chars for it to render correctly on the page.

Re: additional function in infotemplate hyperlink

ReneRubalcava — Sat, 11 Dec 2021 16:02:43 GMT

There's a couple of ways you could do this.

1. You can create a DOM element and add a listen.

You can use dojo/dom-construct and dojo/on.

// Compose elements for infoTemplate
var stuff = domConstruct.create(/*something*/);
var anchor = domConstruct.create('a', { href: 'link' }, something); // look at docs on how to place
var template = new InfoTemplate(stuff);
on(anchor, 'click', function() {/*magic!!*/});

2. Listen for clicks via class name

Using dojo/on, assume your map was placed in a div with id of 'mapDiv'

var template = new InfoTemplate(result.layerName + "<br/><a class='clickMe' href='something' target=_blank>Street View</a></br>");
on(document.getElementById('mapDiv'), '.clickMe:click', function() {/*magic*/});

This method is good, because it will catch events on that class during the lifetime of the page. You could also use dojo/query, but it will end up looking a lot like using option 2 above anyway.

Re: additional function in infotemplate hyperlink

PeggyCorey — Wed, 15 Jul 2015 14:21:43 GMT

Thanks to all for the replies I tried Rene's option #2, and it worked perfectly... and so simple too!

Re: additional function in infotemplate hyperlink

CraigLinn — Fri, 21 Aug 2015 13:36:17 GMT

I am seeking the a way to show a hyperlink if a link is provided and not show if one is not provided. Thanks for any assistance.

var template =new InfoTemplate( "${NAME}","Address: ${Match_addr} Phone: ${PHONE} Website:${WEBSITE} <a target='_blank' href='${WEBSITE}' >Webpage</a>