Solved: Re: How do I add a listener to an HTML button that...

andrewtrobec · ‎11-07-2021

Hello!

My objective is to be able to use JavaScript to overlay buttons onto a Splunk table viz, listen for a click, and then do something upon clicking. I've managed to overlay the buttons but I'm not sure how to listen for a click. If I add buttons to the dashboard via an html tag then it seems that the listener gets added automatically. Below is a run anywhere dashboard + JavaScript containing:

An HTML table with two buttons added to the cells in dashboard XML
A Splunk table with two buttons added to the cells using JavaScript

All buttons have been assigned the class "html_button". The click listener that I associated to the "html_button" class only works with the HTML table.

How do I add a listener to the JavaScript overlay buttons?

Thank you and best regards,

Andrew

---------------------------------------

Dashboard

<dashboard script="overlayTable.js">
  <label>Buttons and Listeners</label>
  <row>
    <panel>
      <title>Buttons added to HTML table</title>
      <html>
          <table>
            <tr>
              <th>Button</th>
            </tr>
            <tr>
              <td>
              <button type="button" class="html_button">x</button>
            </td>
            </tr>
            <tr>
              <td>
              <button type="button" class="html_button">x</button>
            </td>
            </tr>
          </table>
      </html>
    </panel>
    <panel>
      <title>Buttons added to Splunk table using Javascript overlay</title>
      <table id="tableVizualization">
        <search id="searchObject">
          <query>| makeresults 
|  eval Button = "x"
          | append [| makeresults 
    | eval Button = "x"]
          | table Button</query>
          <earliest>0</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="count">20</option>
        <option name="dataOverlayMode">none</option>
        <option name="drilldown">none</option>
        <option name="percentagesRow">false</option>
        <option name="refresh.display">progressbar</option>
        <option name="rowNumbers">false</option>
        <option name="totalsRow">false</option>
        <option name="wrap">true</option>
      </table>
    </panel>
  </row>
</dashboard>

overlayTable.js

require([
     'underscore',
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/tableview',
     'splunkjs/mvc/simplexml/ready!'
 ], function(_, $, mvc, TableView) {

     // Add overlay buttons to table
     var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
         canRender: function(cell) {
             return _(["Button"]).contains(cell.field);
         },
         render: function($td, cell) {
            var strCellValue = cell.value;

             if (cell.field === "Button") {
                var strHtmlInput="<button type='button' class='html_button'>x</button>"
                $td.append(strHtmlInput);
             }
         }
     });

    // Render table
     mvc.Components.get('tableVizualization').getVisualization(function(tableView) {
         tableView.addCellRenderer(new CustomRangeRenderer());
     });

	// Listener for html_button class
	$('.html_button').on("click", function (e) {
        alert("Button clicked!")
	});

 });

kamlesh_vaghela · ‎11-08-2021

@andrewtrobec

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    // Add overlay buttons to table
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(["Button"]).contains(cell.field);
        },
        render: function($td, cell) {
            var strCellValue = cell.value;

            if (cell.field === "Button") {
                var strHtmlInput = "<button type='button' class='html_button'>x</button>"
                $td.append(strHtmlInput).on("click", function(e) {
                    callLogincOnButtonClick()
                });
            }
        }
    });

    // Render table
    mvc.Components.get('tableVizualization').getVisualization(function(tableView) {
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

    // Listener for html_button class
    $(document).ready(function() {
        $('.html_button').on("click", function(e) {
            callLogincOnButtonClick()
        });
    })

    function callLogincOnButtonClick() {
        console.log("Button clicked!")
    }
});

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela · ‎11-08-2021

@andrewtrobec

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc, TableView) {

    // Add overlay buttons to table
    var CustomRangeRenderer = TableView.BaseCellRenderer.extend({
        canRender: function(cell) {
            return _(["Button"]).contains(cell.field);
        },
        render: function($td, cell) {
            var strCellValue = cell.value;

            if (cell.field === "Button") {
                var strHtmlInput = "<button type='button' class='html_button'>x</button>"
                $td.append(strHtmlInput).on("click", function(e) {
                    callLogincOnButtonClick()
                });
            }
        }
    });

    // Render table
    mvc.Components.get('tableVizualization').getVisualization(function(tableView) {
        tableView.addCellRenderer(new CustomRangeRenderer());
    });

    // Listener for html_button class
    $(document).ready(function() {
        $('.html_button').on("click", function(e) {
            callLogincOnButtonClick()
        });
    })

    function callLogincOnButtonClick() {
        console.log("Button clicked!")
    }
});

I hope this will help you.

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

andrewtrobec · ‎11-08-2021

@kamlesh_vaghela Thank you for your reply. I tried as suggested but this does not solve the issue. The HTML buttons continue to work, but the JavaScript buttons do not. Did this code work for you? Do you have any other suggestions? Thanks!

kamlesh_vaghela · ‎11-08-2021

@andrewtrobec

Yes.. It is working for me. Try this.

function callLogincOnButtonClick() {
        alert("Button clicked!")
    }

andrewtrobec · ‎11-09-2021

@kamlesh_vaghela Just to be sure I recopied your original post and it works! I must have done it incorrectly, sorry for the false negative 😞 Thank you so much for your support, I really appreciate i!

How do I add a listener to an HTML button that was added to a Splunk table viz using JavaScript?

javascript

panel

table

Introducing the 2024 SplunkTrust!

Introducing the 2024 Splunk MVPs!

Splunk Custom Visualizations App End of Life