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

pinggg — Fri, 13 Jul 2018 10:33:16 GMT

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!

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

kamlesh_vaghela — Fri, 13 Jul 2018 15:33:31 GMT

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

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

pinggg — Mon, 16 Jul 2018 02:30:14 GMT

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.

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

rjoller — Thu, 28 Dec 2023 09:11:37 GMT

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

topic Why is Javascript not running until I click on "Edit" , and it runs twice after that? in Dashboards & Visualizations

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

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

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

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