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

[pinggg]

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!

[kamlesh_vaghela]

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) {

[pinggg]

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.

[rjoller]

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