Enable clicks on Custom HTML Table using JavaScrip...

njohnson7 · ‎02-01-2021

All, Need some help in the following topic. II have defined a few html tables and I am populating the values of a column from the result token of my base search. I am trying to write a script which will enable the users to click on the first column values of those html tables and set a couple of other tokens based on the clicked value. 1) A tier_token based on the clicked texts, like Tier1, Tier2 etc. 2) a client_group token id of the table.

If I populate the table values with Static values like 10, 20 etc. . I am able to perform the clicks and set my tokens as I want. But when the values get populated from the result tokens($result.fieldName$) from the base search or let's say any token value get set in the table , the clicks don't work at all.
Could anyone please guide me, what am I doing wrong?

TABLE :

<row>
    <panel>
      <title>PRD</title>
      <html>
  <table id="PRD" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$client_group$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>10</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_PRD$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_PRD$</td>
  </tr>
  </table>
      </html>
    </panel>
    <panel>
      <html>
  <table id="HPS" class="table">
  <tr>
    <th>Tier</th>
    <th>Points</th>
    </tr>
    <tr>
    <td>Tier1</td>
    <td>$tier2_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier2</td>
    <td>$tier3_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier3</td>
    <td>$tier4_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier4</td>
    <td>$tier5_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier5</td>
    <td>$tier6_points_HPS$</td>
  </tr>
   <tr>
    <td>Tier Undefined</td>
    <td>$tier1_points_HPS$</td>
  </tr>
  </table>
      </html>
    </panel>
and so on....

JS:

var components = [
    "splunkjs/ready!",
    "underscore",
    "splunkjs/mvc/simplexml/ready!",
    "jquery"
];
// Require the components
require(components, function(
    mvc,
    _,
    ignored,
    $
) {
    console.log("Inside Custom Html Table Tokens JS");
      setTimeout(function(){ 
      //click only on first child(1st columns tds)
    $("table td:first-child").on("click", function() {
      console.log("Click Performed");
      var submitted_tokens = mvc.Components.get('submitted');
      var default_tokens = mvc.Components.get('default');
      console.log("Tier Token initial:" + default_tokens.get('tier_token') );
      console.log("ID Token initial:" + default_tokens.get('client_group') );
      var texts = $(this).text(); //get text of td which is clicked
      var ids = $(this).closest("table").attr('id');
      //get closest table where click event has taken place using the attribute `id` of table
      if ( ids == "PRD" || ids == "CMT" || ids == "HPS" || ids == "RES" || ids == "FS") {
        if (ids =="HPS") {
          ids = "H&PS";
        }
        console.log("TEXT " + texts + " ID " + ids);
        submitted_tokens.set('tier_token',texts);
        submitted_tokens.set('client_group',ids);
        default_tokens.set('tier_token',texts);
        default_tokens.set('client_group',ids);
        submitted_tokens.set('form.tier_token',texts);
        submitted_tokens.set('form.client_group',ids);
        default_tokens.set('form.tier_token',texts);
        default_tokens.set('form.client_group',ids);
        console.log("Tier Token newly set:" + default_tokens.get('tier_token') );
        console.log("ID Token newly set:" + default_tokens.get('client_group') );
      }
    })
     },100);
});

Enable clicks on Custom HTML Table using JavaScript

drilldown

javascript

table

token

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Think Like an Architect: Introducing the Splunk Certified Cybersecurity Defense ...

Index This | What has goals but no motivation?

Deep Dive: Accelerate threat investigation with Splunk’s AI Assistant in Security

Join the Conversation