AnsweredAssumed Answered

Add functionality to <button> tag embedded in an InfoWindow

Question asked by jonczerniak on Sep 24, 2015
Latest reply on Sep 30, 2015 by jonczerniak

Like • Show 0 Likes0
Comment • 7

Hola everybody,

I've successfully added an html button within an InfoWindow. However, I am having trouble calling functionality when the button is clicked. I've tried onClick within the html tag, using the 'on' event listener, and querying for the button class and listening for the 'click' event. If someone could point me in the right direction that would be great. Thanks for your time.

var sources = search.sources;

sources.push({

featureLayer: layer,

placeholder: "L0400409",

enableLabel: false,

searchFields: ["NUMBER_KEY"],

displayField: "NUMBER_KEY",

exactMatch: false,

outFields: ["*"],

//Create an InfoTemplate

infoTemplate: new InfoTemplate("Casefile Info", "<a href= ${CASE_NUM} target=_blank ;'>Additional Info</a></br></br>NumberKey: ${NUMBER_KEY}</br>TLNO: ${TLNO}</br><button type='button' id='infoBtn' class='infoBtn';'>Click Me</button>")

});

//Add functionality to the infoBtn here

odoe Sep 29, 2015 2:23 PM

Correct Answer

This could get tricky as the button and event listener would get generated each time the content is created, leading to memory leaks in your application.

A simple approach may be to add the button as normal, but give it a class name of say "btn-action" or similar.

Then you can use dojo/on to do this somewhere in your app:

on(document.body, ".btn-action:click", function(e) {
  // do something on button click
});

You can look at the Event Delegation section of the docs for details.

See the reply in context

Attachments

dojo_SearchCasefile.html.zip1.9 KB

No one else had this question

Outcomes

danielri Sep 24, 2015 3:25 PM

Have you tried:

<button type='button' id='infoBtn' class='infoButn' onclick="myFunction()'>Click Me</button>

with the function in a <script> tag in <head> area of the page.

function myFunction()

{

'do stuff

}

</script>

Actions

jonczerniak @ danielri on Sep 24, 2015 3:47 PM

Hi Richard,

I have tried this approach as the call to the infoTemplate is already nested within a <script> tag which is in the <head> tag. I realized that I should have included the whole code so I attached the entire code to the original message for reference. Thanks!

Actions

processing... Sep 25, 2015 8:05 AM

Are you using IE? IE sometimes does not like the button element. And, depending on the rest of your application (ie: if it's .NET), the button element is going to do a full postback. I would try again but use the input type=button element just for giggles. It might not be the solution, but it's worth a try. I avoid the button element b/c of inconsistencies.

Actions

jacobsj Sep 28, 2015 10:25 AM

Another approach would be to use a function instead of a template string. (See Using Custom Functions section here.) Inside of the function, use document.createElement and element.appendChild to construct your DOM elements. After you've used created your Button element, use addEventListener to set the button's "click" event.

1 person found this helpful

Actions

jonczerniak @ jacobsj on Sep 29, 2015 2:09 PM

Hi Jeff,

You wouldn't happen to have an example of how to use the document.createElement and element.appendChild would you? I've tried a couple things and this is as far as I can get.

Here is the code that produces this result. I left out the element.appendChild because I'm not sure to which element I append the object. Thanks!

function getTextContent(graphic){

var names = graphic.attributes.x_coord;

var y_coord = graphic.attributes.y_coord

var commName = names;

var btn = document.createElement("BUTTON");

btn.innerHTML = 'click me';

if(commName === ""){

commName = names[0];

}

return "<b>" + commName + "</b><br /><p >" + y_coord +"</p><br /><button>" + btn +"</button>";

Actions

odoe @ jonczerniak on Sep 29, 2015 2:23 PM

This could get tricky as the button and event listener would get generated each time the content is created, leading to memory leaks in your application.

A simple approach may be to add the button as normal, but give it a class name of say "btn-action" or similar.

Then you can use dojo/on to do this somewhere in your app:

on(document.body, ".btn-action:click", function(e) {
  // do something on button click
});

You can look at the Event Delegation section of the docs for details.

Actions

jonczerniak @ odoe on Sep 30, 2015 9:12 AM

That worked great! Thank you, Rene!

Actions

7 Replies

danielri Sep 24, 2015 3:25 PM
Mark Correct
Correct Answer
Have you tried:

<button type='button' id='infoBtn' class='infoButn' onclick="myFunction()'>Click Me</button>

with the function in a <script> tag in <head> area of the page.

<script language="javascript">
function myFunction()
{
'do stuff
}
</script>
Like • Show 0 Likes0
Actions
- jonczerniak @ danielri on Sep 24, 2015 3:47 PM
  Mark Correct
  Correct Answer
  Hi Richard,
  
  I have tried this approach as the call to the infoTemplate is already nested within a <script> tag which is in the <head> tag. I realized that I should have included the whole code so I attached the entire code to the original message for reference. Thanks!
  Like • Show 0 Likes0
  Actions
processing... Sep 25, 2015 8:05 AM
Mark Correct
Correct Answer
Are you using IE? IE sometimes does not like the button element. And, depending on the rest of your application (ie: if it's .NET), the button element is going to do a full postback. I would try again but use the input type=button element just for giggles. It might not be the solution, but it's worth a try. I avoid the button element b/c of inconsistencies.
Like • Show 0 Likes0
Actions
jacobsj Sep 28, 2015 10:25 AM
Mark Correct
Correct Answer
Another approach would be to use a function instead of a template string. (See Using Custom Functions section here.) Inside of the function, use document.createElement and element.appendChild to construct your DOM elements. After you've used created your Button element, use addEventListener to set the button's "click" event.
1 person found this helpful
Like • Show 1 Like1
Actions
- jonczerniak @ jacobsj on Sep 29, 2015 2:09 PM
  Mark Correct
  Correct Answer
  Hi Jeff,
  
  You wouldn't happen to have an example of how to use the document.createElement and element.appendChild would you? I've tried a couple things and this is as far as I can get.
  
  Here is the code that produces this result. I left out the element.appendChild because I'm not sure to which element I append the object. Thanks!
  
  Cz
  
  function getTextContent(graphic){
          var names = graphic.attributes.x_coord;
          var y_coord = graphic.attributes.y_coord
          var commName = names;
  
          var btn = document.createElement("BUTTON");
          btn.innerHTML = 'click me';
  
          if(commName === ""){
            commName = names[0];
          }
          return "<b>" + commName + "</b><br /><p >" + y_coord +"</p><br /><button>" + btn +"</button>";
  Like • Show 0 Likes0
  Actions
  - odoe @ jonczerniak on Sep 29, 2015 2:23 PM
    Unmark Correct
    Correct Answer
    This could get tricky as the button and event listener would get generated each time the content is created, leading to memory leaks in your application.
    
    A simple approach may be to add the button as normal, but give it a class name of say "btn-action" or similar.
    
    Then you can use dojo/on to do this somewhere in your app:
    
    on(document.body, ".btn-action:click", function(e) { // do something on button click });
    
    You can look at the Event Delegation section of the docs for details.
    Like • Show 0 Likes0
    Actions
    - jonczerniak @ odoe on Sep 30, 2015 9:12 AM
      Mark Correct
      Correct Answer
      That worked great! Thank you, Rene!
      Like • Show 0 Likes0
      Actions

GeoNet

The Esri Community

Add functionality to <button> tag embedded in an InfoWindow

Attachments

Outcomes

Related Content

Recommended Content