Dashboards & Visualizations

Why is Javascript not running until I click on "Edit" , and it runs twice after that?

pinggg
New Member

Hi All,

My Javascript is supposed to create a table with values, however it is not showing any results until I click on the "Edit" button then "Cancel".

The results will only show after I have done the steps above, however, the JS runs twice instead of once, which is seen by the repeated result values shown twice on my dashboard.

Below is my javascript code for reference:

    require(['splunkjs/ready!'], function () {
        require([
            'underscore',
            'jquery',
            'splunkjs/mvc',
            'splunkjs/mvc/tableview',
            'splunkjs/mvc/simplexml/ready!'
        ], function (_, $, mvc, TableView) {    
                var table_detail = [];
                var i = 0;
                //var j = 3;
                var k = 0;
                var a = 0; 

                var RangeMapIconRenderer = TableView.BaseCellRenderer.extend({
                    canRender: function (cell) {
                        // Only use the cell renderer for the range field
                        return _(['detail']).contains(cell.field);

                        //return cell.field === 'order_number';
                    },
                    render: function ($td, cell) {

                        /*
                        //newly added
                        if (currentRow < totalResults) {
                                currentRow++;
                        } else if (currentRow == totalResults) {
                            currentRow++;
                        */
                            if (cell.field == 'detail'){
                                console.log("yes it's detail table1");
                                //for (i; i<table_detail.length; i++){                            
                                var temp=[];
                                var j = 5;
                                temp = cell.value.split(',');        

                                if(temp[j] == 'ALL GREEN'){
                                    console.log("came into IF statement, going in loop");
                                        var parenttbl = document.getElementById("listdetail_0");
                                        var newtr = document.createElement('tr');  
                                        var newtd = document.createElement('td'); 

                                        newtd.setAttribute('class',"ok-all");
                                        newtd.setAttribute('align',"center");
                                        newtd.setAttribute('id',"newtd" +a);

                                        newtr.appendChild(newtd);
                                        parenttbl.appendChild(newtr);


                                        document.getElementById('newtd'+a).innerHTML = temp[j];

                                        a++;
                                }
                                else{    
                                    console.log("came into else statement, going in loop");

                                    for (j; j<(temp.length-1); j+=2){ 
                                        var parenttbl = document.getElementById("listdetail_0");
                                        var newtr = document.createElement('tr');  
                                        var newtr1 = document.createElement('tr');
                                        var newel = document.createElement('td'); 
                                        newtr1.setAttribute('id',"rowtr"+a);                       
                                        newel.setAttribute('class',"pad-0");
                                        //document.getElementById("col"+i).classList.add('pad-0');
                                        var newDiv = document.createElement('div');
                                        newDiv.setAttribute('id',"list_item_"+a);
                                        newDiv.setAttribute('class',"list-table");
                                        //document.getElementById("list_item_"+a).classList.add('list-table');
                                        var newDivIcon = document.createElement('div');
                                        k = j+1;
                                        newDivIcon.setAttribute('id',"icon_"+a);
                                        newDivIcon.setAttribute('class',temp[k] +"-img");
                                        //document.getElementById('icon_'+a).className = temp[k] +"-img";
                                        newel.appendChild(newDiv);
                                        newel.appendChild(newDivIcon);
                                        newtr.appendChild(newel);
                                        parenttbl.appendChild(newtr);
                                        parenttbl.appendChild(newtr1);
                                        document.getElementById('list_item_'+a).innerHTML = temp[j];

                                        //add separator                        
                                        document.getElementById("rowtr"+a).innerHTML='<td><div class="separators" style="padding-left: 10%"></div></td>';
                                        a++;
                                    }
                                }

                                document.getElementById('last_update_0').innerHTML = temp[(temp.length-1)];    
                                i++;                   
                                //} 
                                //table_detail.push(cell.value);
                                console.log(cell.value);    
                            }       
                        //}      
                    }
                });    

                const tableIds = ['detailMajor'];
                var totalResults = 0;
                var currentRow = 0;
                var interval = 1;

                tableIds.forEach((ID) => {
                        mvc.Components.get(ID).getVisualization(function (tableView) {
                                // Register custom cell renderer, the table will re-render automatically
                                totalResults = 1;
                                tableView.addCellRenderer(new RangeMapIconRenderer());
                        });
                })
        });       
    });     

Will really appreciate any help regarding this issue.

Thank you!

Tags (1)
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

Have tried by requiring 'splunkjs/ready!' with other js ?
Like

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

instead of

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

0 Karma

pinggg
New Member

Hi,

Thanks for your reply. I have tried it, however it does not work as it results in nothing printed at all even after "Edit" and "Cancel" button is clicked.

0 Karma

rjoller
Explorer

Hi Pinggg 

 

I'm facing the same issue and do not understand where the issue is.. Did you by any chance find a solution?

Thanks 1000!

 

Greetings

0 Karma
Get Updates on the Splunk Community!

.conf24 | Day 0

Hello Splunk Community! My name is Chris, and I'm based in Canberra, Australia's capital, and I travelled for ...

Enhance Security Visibility with Splunk Enterprise Security 7.1 through Threat ...

 (view in My Videos)Struggling with alert fatigue, lack of context, and prioritization around security ...

Troubleshooting the OpenTelemetry Collector

  In this tech talk, you’ll learn how to troubleshoot the OpenTelemetry collector - from checking the ...