topic Javascript - Splunk onclick function not working on second click in same row in Splunk Dev

Javascript - Splunk onclick function not working on second click in same row

kartm2020 — Sun, 07 Jun 2020 18:07:40 GMT

Hi,
It would be really helpful if someone help me to resolve the below problem.
We have wriitten a modal popup when click the any of the row in the table. It is working as expected but we are facing the below problem.
if I trying to click the any row for the first it is working but when we are trying to click the same row second modal popup is not triggering.
Below is the Javascript and XML:

Javascript &colon;

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

        var tokens = mvc.Components.get("default");

        function displayChart(i, searchId, chartType) {
            $('#modalPanel' + i).modal();
            var epoch = (new Date).getTime();
            var chartItem = new ChartView({
                id: "chart" + epoch,
                type: chartType,
                drilldown: "none",
                managerid: searchId,
                el: $("#modalChart" + i)
            })
            chartItem.render();
        }

        function displayTable(i, searchId) {
            $('#modalPanel' + i).modal();
            var epoch = (new Date).getTime();
            var tableItem = new TableView({
                id: "table" + count,
                pageSize: "10",
                drilldown: "none",
                managerid: searchId,
                el: $("#modalChart" + i)
            })


            tableItem.render();
            console.log(searchId);

        }

    function displayModal(i) {
            var checkAreaChart = mvc.Components.get("modalAreaChartSearch" + i);
            var checkBarChart = mvc.Components.get("modalBarChartSearch" + i);
            var checkColumnChart = mvc.Components.get("modalColumnChartSearch" + i);
            var checkLineChart = mvc.Components.get("modalLineChartSearch" + i);
            var checkTableChart = mvc.Components.get("modalTableChartSearch" + i);
            if (typeof (checkAreaChart) !== "undefined") {
                displayChart(i, "modalAreaChartSearch" + i, "area");
            } else if (typeof (checkBarChart) !== "undefined") {
                displayChart(i, "modalBarChartSearch" + i, "bar");
            } else if (typeof (checkColumnChart) !== "undefined") {
                displayChart(i, "modalColumnChartSearch" + i, "column");
            } else if (typeof (checkLineChart) !== "undefined") {
                displayChart(i, "modalLineChartSearch" + i, "line");
            } else if (typeof (checkTableChart) !== "undefined") {
                displayTable(i, "modalTableChartSearch" + i);
            } else {
            //console.log("i:"+i);
                displayTable(i, "modalSearch" + i);
            //console.log("clicked");
            }
        console.log("click");
        }

        tokens.on("change:modalToken1", function (model, value, options) {
            displayModal(1);
        });
        //tokens.off("change:modalToken1",function(model, value, options){
            //});
        tokens.on("change:modalToken2", function (model, value, options) {
            displayModal(2);
        });
        tokens.on("change:modalToken3", function (model, value, options) {
            displayModal(3);
            console.log("clicked");
        });
        tokens.on("change:modalToken4", function (model, value, options) {
            displayModal(4);
        });
        tokens.on("change:modalToken5", function (model, value, options) {
            displayModal(5);
        });
        tokens.on("change:modalToken6", function (model, value, options) {
            displayModal(6);
        });
});

XML:

<dashboard script="modalchart.js">
  <label>Modal Popup</label>
  <search id="modalAreaChartSearch1">
    <query>
      index=_internal sourcetype=$modalToken1$ | timechart count by sourcetype
    </query>
    <earliest>-24h</earliest>
    <latest>now</latest>
  </search>
  <search id="modalLineChartSearch2">
    <query>
      index=_internal source=$modalToken2$ | timechart count by sourcetype
    </query>
    <earliest>-24h</earliest>
    <latest>now</latest>
  </search>
  <search id="modalTableChartSearch3">
    <query>
      index=_internal sourcetype=$modalToken3$ | timechart span=1h count
    </query>
    <earliest>-24h</earliest>
    <latest>now</latest>
  </search>
  <row>
    <panel>
      <table>
        <title>$modalToken1$</title>
        <search>
          <query>index=_internal
            | dedup sourcetype
            | table index sourcetype source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="modalToken1">$row.sourcetype$</set>
        </drilldown>
      </table>
    </panel>
    <panel>
      <table>
        <title>$modalToken2$</title>
        <search>
          <query>index=_internal
            | dedup sourcetype
            | table index sourcetype source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="modalToken2">$row.source$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <table>
        <title>$modalToken3$</title>
        <search>
          <query>index=_internal | dedup sourcetype
            | table index sourcetype source</query>
          <earliest>-15m</earliest>
          <latest>now</latest>
          <sampleRatio>1</sampleRatio>
        </search>
        <option name="drilldown">row</option>
        <option name="refresh.display">progressbar</option>
        <drilldown>
          <set token="modalToken3">$row.sourcetype$</set>
        </drilldown>
      </table>
    </panel>
  </row>
  <row>
    <panel>
      <html>
      <div class="modal fade" id="modalPanel1" tabindex="-1" role="dialog" aria-labelledby="modalLabel1" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalLabel1">$modalToken1$</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
            </div>
            <div class="modal-body">
              <div id="modalChart1"/>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="modalPanel2" tabindex="-1" role="dialog" aria-labelledby="modalLabel2" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalLabel2">$modalToken2$</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
            </div>
            <div class="modal-body">
              <div id="modalChart2"/>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="modalPanel3" tabindex="-1" role="dialog" aria-labelledby="modalLabel3" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="modalLabel3">$modalToken3$</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
            </div>
            <div class="modal-body">
              <div id="modalChart3"/>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
      </html>
    </panel>
  </row>
</dashboard>

Re: Javascript - Splunk onclick function not working on second click in same row

kamlesh_vaghela — Mon, 01 Jun 2020 09:25:29 GMT

@kartm2020

This is because you are triggering your JS on change of the token. Eg tokens.on("change:modalToken1", . When you click 2nd time on the same row the token value will not change ( as per your below drill down logic) .

 <drilldown>
           <set token="modalToken1">$row.sourcetype$</set>
         </drilldown>

Here I suggest you trigger modalChart by managing table drill down in JS only. It will remove onchange dependecy of that token.,

Re: Javascript - Splunk onclick function not working on second click in same row

kartm2020 — Mon, 01 Jun 2020 09:39:44 GMT

Thank you for the Suggestion. It would be really helpful if you share how to manage the table drill-down in JS.

Re: Javascript - Splunk onclick function not working on second click in same row

kamlesh_vaghela — Mon, 01 Jun 2020 10:06:26 GMT

@kartm2020

JS something like this.

var CustomRenderer = TableView.BaseCellRenderer.extend({
    canRender: function(cell) {
        return _(['Status','field1','field2']).contains(cell.field);
    },
    render: function($td, cell) {
        //Put your
        //YOUR JS code
    }
});
mvc.Components.get('tableId').getVisualization(function(tableView) {
    tableView.addCellRenderer(new CustomRenderer());
});

https://dev.splunk.com/enterprise/docs/developapps/webframework/displaydataview/howtocustomizetablecells

Re: Javascript - Splunk onclick function not working on second click in same row

kartm2020 — Mon, 01 Jun 2020 10:18:16 GMT

Thank you for the link and example code. Let me try and let you know.
Thanks a lot.

Re: Javascript - Splunk onclick function not working on second click in same row

kartm2020 — Mon, 01 Jun 2020 13:29:22 GMT

Hi ,
I have tried with the code but it is asking about the tableID which you are referring..
Please find the updated code. Sorry, I am in learning phase of Javascript coding. Thats why i am asking doubts.
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/tableview',
'splunkjs/mvc/chartview',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc, TableView, ChartView) {

var CustomRenderer = TableView.BaseCellRenderer.extend({
     canRender: function(cell) {
         return _(['Status','field1','field2']).contains(cell.field);
     },
     render: function($td, cell) {
         var tokens = mvc.Components.get("default");

    function displayChart(i, searchId, chartType) {
        $('#modalPanel' + i).modal();
        var epoch = (new Date).getTime();
        var chartItem = new ChartView({
            id: "chart" + epoch,
            type: chartType,
            drilldown: "none",
            managerid: searchId,
            el: $("#modalChart" + i)
        })
        chartItem.render();
    }

    function displayTable(i, searchId) {
        $('#modalPanel' + i).modal();
        var epoch = (new Date).getTime();
        var tableItem = new TableView({
            id: "table" + count,
            pageSize: "10",
            drilldown: "none",
            managerid: searchId,
            el: $("#modalChart" + i)
        })


        tableItem.render();
        console.log(searchId);

    }

function displayModal(i) {
        var checkAreaChart = mvc.Components.get("modalAreaChartSearch" + i);
        var checkBarChart = mvc.Components.get("modalBarChartSearch" + i);
        var checkColumnChart = mvc.Components.get("modalColumnChartSearch" + i);
        var checkLineChart = mvc.Components.get("modalLineChartSearch" + i);
        var checkTableChart = mvc.Components.get("modalTableChartSearch" + i);
        if (typeof (checkAreaChart) !== "undefined") {
            displayChart(i, "modalAreaChartSearch" + i, "area");
        } else if (typeof (checkBarChart) !== "undefined") {
            displayChart(i, "modalBarChartSearch" + i, "bar");
        } else if (typeof (checkColumnChart) !== "undefined") {
            displayChart(i, "modalColumnChartSearch" + i, "column");
        } else if (typeof (checkLineChart) !== "undefined") {
            displayChart(i, "modalLineChartSearch" + i, "line");
        } else if (typeof (checkTableChart) !== "undefined") {
            displayTable(i, "modalTableChartSearch" + i);
        } else {
        //console.log("i:"+i);
            displayTable(i, "modalSearch" + i);
        //console.log("clicked");
        }
    console.log("click");
    }

    tokens.on("change:modalToken1", function (model, value, options) {
        displayModal(1);
    });
    //tokens.off("change:modalToken1",function(model, value, options){
        //});
    tokens.on("change:modalToken2", function (model, value, options) {
        displayModal(2);
    });
    tokens.on("change:modalToken3", function (model, value, options) {
        displayModal(3);
        console.log("clicked");
    });
    tokens.on("change:modalToken4", function (model, value, options) {
        displayModal(4);
    });
    tokens.on("change:modalToken5", function (model, value, options) {
        displayModal(5);
    });
    tokens.on("change:modalToken6", function (model, value, options) {
        displayModal(6);
    });
     }
 });
 mvc.Components.get('tableId').getVisualization(function(tableView) {
     tableView.addCellRenderer(new CustomRenderer());
 });
});

Re: Javascript - Splunk onclick function not working on second click in same row

kamlesh_vaghela — Mon, 01 Jun 2020 15:47:42 GMT

@kartm2020

Can you please try this?

<dashboard script="modalchart.js">
   <label>Modal Popup</label>
   <search id="modalAreaChartSearch1">
     <query>
       index=_internal sourcetype=$modalToken1$ | timechart count by sourcetype
     </query>
     <earliest>-24h</earliest>
     <latest>now</latest>
   </search>
   <search id="modalLineChartSearch2">
     <query>
       index=_internal source=$modalToken2$ | timechart count by sourcetype
     </query>
     <earliest>-24h</earliest>
     <latest>now</latest>
   </search>
   <search id="modalTableChartSearch3">
     <query>
       index=_internal sourcetype=$modalToken3$ | timechart span=1h count
     </query>
     <earliest>-24h</earliest>
     <latest>now</latest>
   </search>
   <row>
     <panel>
       <table id="tblModalToken1">
         <title>$modalToken1$</title>
         <search>
           <query>index=_internal
             | dedup sourcetype
             | table index sourcetype source</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="drilldown">row</option>
         <option name="refresh.display">progressbar</option>
         <drilldown>
           <set token="modalToken1">$row.sourcetype$</set>
         </drilldown>
       </table>
     </panel>
     <panel>
       <table id="tblModalToken2">
         <title>$modalToken2$</title>
         <search>
           <query>index=_internal
             | dedup sourcetype
             | table index sourcetype source</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="drilldown">row</option>
         <option name="refresh.display">progressbar</option>
         <drilldown>
           <set token="modalToken2">$row.source$</set>
         </drilldown>
       </table>
     </panel>
   </row>
   <row>
     <panel>
       <table id="tblModalToken3">
         <title>$modalToken3$</title>
         <search>
           <query>index=_internal | dedup sourcetype
             | table index sourcetype source</query>
           <earliest>-15m</earliest>
           <latest>now</latest>
           <sampleRatio>1</sampleRatio>
         </search>
         <option name="drilldown">row</option>
         <option name="refresh.display">progressbar</option>
         <drilldown>
           <set token="modalToken3">$row.sourcetype$</set>
         </drilldown>
       </table>
     </panel>
   </row>
   <row>
     <panel>
       <html>
       <div class="modal fade" id="modalPanel1" tabindex="-1" role="dialog" aria-labelledby="modalLabel1" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="modalLabel1">$modalToken1$</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
             </div>
             <div class="modal-body">
               <div id="modalChart1"/>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
       </div>
       <div class="modal fade" id="modalPanel2" tabindex="-1" role="dialog" aria-labelledby="modalLabel2" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="modalLabel2">$modalToken2$</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
             </div>
             <div class="modal-body">
               <div id="modalChart2"/>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
       </div>
       <div class="modal fade" id="modalPanel3" tabindex="-1" role="dialog" aria-labelledby="modalLabel3" aria-hidden="true">
         <div class="modal-dialog modal-lg" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title" id="modalLabel3">$modalToken3$</h5>
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"/></button>
             </div>
             <div class="modal-body">
               <div id="modalChart3"/>
             </div>
             <div class="modal-footer">
               <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
             </div>
           </div>
         </div>
       </div>
       </html>
     </panel>
   </row>
 </dashboard>

Javascript:

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

         var tokens = mvc.Components.get("default");

         function displayChart(i, searchId, chartType) {
            $("#modalChart" + i).html("");
             $('#modalPanel' + i).modal();
             var epoch = (new Date).getTime();
             var chartItem = new ChartView({
                 id: "chart" + epoch,
                 type: chartType,
                 drilldown: "none",
                 managerid: searchId,
                 el: $("#modalChart" + i)
             })
             chartItem.render();
        }
         function displayTable(i, searchId) {
             $('#modalPanel' + i).modal();
             var epoch = (new Date).getTime();
             var tableItem = new TableView({
                 id: "table" + count,
                 pageSize: "10",
                 drilldown: "none",
                 managerid: searchId,
                 el: $("#modalChart" + i)
             })
             tableItem.render();
             console.log(searchId);
         }

     function displayModal(i) {
             var checkAreaChart = mvc.Components.get("modalAreaChartSearch" + i);
             var checkBarChart = mvc.Components.get("modalBarChartSearch" + i);
             var checkColumnChart = mvc.Components.get("modalColumnChartSearch" + i);
             var checkLineChart = mvc.Components.get("modalLineChartSearch" + i);
             var checkTableChart = mvc.Components.get("modalTableChartSearch" + i);
             if (typeof (checkAreaChart) !== "undefined") {
                 displayChart(i, "modalAreaChartSearch" + i, "area");
             } else if (typeof (checkBarChart) !== "undefined") {
                 displayChart(i, "modalBarChartSearch" + i, "bar");
             } else if (typeof (checkColumnChart) !== "undefined") {
                 displayChart(i, "modalColumnChartSearch" + i, "column");
             } else if (typeof (checkLineChart) !== "undefined") {
                 displayChart(i, "modalLineChartSearch" + i, "line");
             } else if (typeof (checkTableChart) !== "undefined") {
                 displayTable(i, "modalTableChartSearch" + i);
             } else {
             //console.log("i:"+i);
                 displayTable(i, "modalSearch" + i);
             //console.log("clicked");
             }
         console.log("click");
         }

         // tokens.on("change:modalToken1", function (model, value, options) {
         //     displayModal(1);
         // });
         // //tokens.off("change:modalToken1",function(model, value, options){
         //     //});
        var tblModalToken1 = mvc.Components.get("tblModalToken1");
        tblModalToken1.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(1);
        });

         // tokens.on("change:modalToken2", function (model, value, options) {
         //     displayModal(2);
         // });
        var tblModalToken2 = mvc.Components.get("tblModalToken2");
        tblModalToken2.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(2);
        });

         // tokens.on("change:modalToken3", function (model, value, options) {
         //     displayModal(3);
         //     console.log("clicked");
         // });
        var tblModalToken3 = mvc.Components.get("tblModalToken3");
        tblModalToken3.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(3);
        });

         // tokens.on("change:modalToken4", function (model, value, options) {
         //     displayModal(4);
         // });


        /*var tblModalToken4 = mvc.Components.get("tblModalToken4");
        tblModalToken4.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(4);
        });*/

         // tokens.on("change:modalToken5", function (model, value, options) {
         //     displayModal(5);
         // });
        /*var tblModalToken5 = mvc.Components.get("tblModalToken5");
        tblModalToken5.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(5);
        });*/

         // tokens.on("change:modalToken6", function (model, value, options) {
         //     displayModal(6);
         // });
        /*var tblModalToken6 = mvc.Components.get("tblModalToken6");
        tblModalToken6.on("click", function(e) {
            // Bypass the default behavior
            e.preventDefault();
            displayModal(6);
        });*/

 });

Note: I have mentioned table Id in XML. There are only 3 tables in XML but 6 onchange mentioned in JS. So I have commented that code. You can enable that as per your requirement,. I have found a undeclared variable count on 29th line number in JS that you have to fix.

Re: Javascript - Splunk onclick function not working on second click in same row

kartm2020 — Tue, 02 Jun 2020 06:50:22 GMT

The below script is working as expected. Really thank you for your time on this. I made few changes in the script. Post that it is working fine.
Thanks again 🙂