additional function in infotemplate hyperlink

[PeggyCorey]

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 + "<br/><a href='http://myserver/street_view.htm' onClick='create_child();' target=_blank>Street View</a></br>");

Any help is apprecited... thanks!

[ChrisSmith7]

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...

[ChrisSmith7]

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.

[ReneRubalcava · Accepted solution]

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.

[PeggyCorey]

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

[CraigLinn]

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( "<b>${NAME}</b>","<b>Address:</b> ${Match_addr}<br><br/><b>Phone:</b> ${PHONE} <br/><br/><b>Website:</b>${WEBSITE} <br><a target='_blank' href='${WEBSITE}' >Webpage</a><br><br/>