Splunk Dev

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

kartm2020
Communicator

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 :

    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>
Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

kamlesh_vaghela
SplunkTrust
SplunkTrust

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

0 Karma

kartm2020
Communicator

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

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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/howtocustomizetablec...

0 Karma

kartm2020
Communicator

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

0 Karma

kartm2020
Communicator

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());
 });
});
0 Karma

kartm2020
Communicator

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 🙂

0 Karma
Get Updates on the Splunk Community!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

March 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with another ...

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...