JavaScript executing two times--why?

[analiaeg]

Hi every one.

I'm using a JavaScript in my dashboards to paint some icons on a table resulting of a search, depending of values of this search.

I have referenced the JavaScript like this:

<form stylesheet="application.css, styles.css, home.css" script="application_new.js">

Javascript runs and icons are painted correctly, but a millisecond later they are removed.

I have put one and only one text track on my JavaScript, and I have checked in the console of Google Chrome inspector that this trace appears two times.

That is the reason because I suspect that JavaScript is executing two times, and the second time, icons are removed, but I don't know why.

This only occurs in my local machine, with Chrome and Internet Explorer. Executing the same app in the server, with the same navigators, icons are painted without being removed early later.

I appreciate any type of help or ideas. Thank you very much in advance.

[analiaeg]

Hello everyone.

We have found the solution to our problem.

Definitely, our Javascript was and is only running once.

The problem with the icons that were painted and deleted immediately seems to be the rendering of the table. We have added the following sentence at the end of the javascript code:

tableView.table.render();

And now the icons are painted but not deleted later.

We suspect that the reason because this problem with icons only happened in our local machines could be Splunk version, which is 6.6.1 and 6.6.2 on local machines (where icons were deleted) and version 6.5.0 and 6.5.3 on servers (where icons were not deleted after being painted, without the new sentence explained previously).

Do you know something more about the differences between versions, related with icons painted using Javascript?

Thanks you for help.

[efika]

Thanks, I had the same issue and adding that line solved it !

[jdajpowell]

Yes, sorry about that. I thought we were looking at the same thing to start with.

[jdajpowell]

My issue is actually a little different. I'm using the code from the dashboard examples to highlight table rows based on values in certain cells. This has worked fine in the past, but we have since upgraded to 6.6.2 and moved from a single server to a distributed configuration. I'm not sure which one caused the issue. In any case, the table loads and you briefly see the highlighted rows, then the page seems to refresh and the highlights are gone. We have several form inputs that are set to search on change. If you select any of these, the page will then render as expected with the highlighted rows.

[analiaeg]

@jdapowell try to use the next sentence at the end:

tableView.table.render();

It solved our problem with the icons.

[richgalloway]

@jdapowell if your issue is different then you should post a different question. That way your different answer doesn't get mixed up with the original poster's answer.

[jeffland]

Have you tried setting a breakpoint where it should set your icons? From there you could step through the rest of your code.
You could also paste your code here. I've never seen code run twice except when I made a mistake.

[analiaeg]

Thanks jeffland.

I put a breakpoint and code executed. Icons are setted fine, but later, they are reseted.

This is the code of my javascript:

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

    mvc.Components.get('kpi_table').getVisualization(function(tableView) {
        tableView.on('rendered', function() {
            console.log("AEG - aiam-kpi-reporting-ui-airbus - application_new.js");
            var values = $("#kpi_table").find("td");
            values.find(".multivalue-subcell").each(function() { $(this).css("padding","3px"); });

            for(var i = 0; i < values.length; i++) {

                if($(values[i]).find(".multivalue-subcell").length==0)
                    $(values[i]).css("vertical-align", "middle");

                if(parseInt($(values[i]).attr("data-cell-index"))>3 && $(values[i]).find(".multivalue-subcell").length>0) {

                    var kpi = $(values[i].parentNode).find("td:nth-child(2)")[0].innerText;

                    var target = parseInt($(values[i].parentNode).find("td:nth-child(3)")[0].innerText.replace("%",""));
                    var cur_cell = $(values[i]).find(".multivalue-subcell")[0];
                    var cur_value = parseInt(cur_cell.innerText.replace("%",""));

                    if(kpi.trim() == "Quality of resolution ratio")
                    {

                        if(cur_value <= target) 
                            $(cur_cell).append("<span class=\"MetKPI\"></span>");                       

                        else
                            $(cur_cell).append("<span class=\"NotMetKPI\"></span>");
                    }
                    else
                    {

                        if(cur_value >= target) 
                        $(cur_cell).append("<span class=\"MetKPI\"></span>");                   

                        else
                        $(cur_cell).append("<span class=\"NotMetKPI\"></span>");                        

                        }
                }
            }
        });
    });
});

[analiaeg]

My text track "AEG - aiam-kpi-reporting-ui-airbus - application_new.js" is written twice at Chrome console...

[jdajpowell]

We are seeing the same issue. Have you been able to come up with a solution?

[analiaeg]

Hi jdajpowell.

No I don't, t at the moment, but I suspect it is related with the Splunk version on my Local and the Splunk version on the server...

[DalJeanis]

The key to solving this kind of bug, I believe, is to think about, if you wanted to create this behavior, how could you do it?

PARANOIA FIRST

But, before trying to outthink the bug, I'd probably verify that you don't have any .css in your personal machine's concatenation that is overriding the stylesheets used by the server. If you can't find any, then copy the ones from the server, so that you are sure they are in the concatenation before everything else, and see if the problem persists. If you want to be totally paranoid, and I usually do if I have no bright ideas, then change a font color in the local version and make sure the same font color changes during your test.

Now that you've eliminated the css from consideration and your problem is still present, you can move on to the next item.... and the next...

THEN DEBUG

Assuming you have eliminated all chances of a code difference, the next steps are going to be based on your specific javascript architecture/framework (react/ember/angular/ etc). I haven't had a chance to play with many of them, and don't know who in this board has.

We'd at least have to know which framework you are using to give any useful feedback, and, I could be wrong - I do that at least once a day to keep in practice - but to me it seems likely to be a Stack Overflow question rather than a Splunk Answers one.

If you'd like to proceed here, then, we'd need to see at least the call code and the section of code that paints the icons, along with any logic around it that controls the execution. What we'd be looking for is anything that might operate differently server-side from your personal machine.

[analiaeg]

We have put more text tracks in the javascript code, like this:

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

    mvc.Components.get('kpi_table').getVisualization(function(tableView) {
        console.log("AEG - aiam-kpi-reporting-ui-airbus - application_new.js - 1");

        tableView.on('rendered', function() {
            console.log("AEG - aiam-kpi-reporting-ui-airbus - application_new.js - 2");

            var values = $("#kpi_table").find("td");
            values.find(".multivalue-subcell").each(function() { $(this).css("padding","3px"); });

            for(var i = 0; i < values.length; i++) {
                console.log("AEG - aiam-kpi-reporting-ui-airbus - application_new.js - 3");
                if($(values[i]).find(".multivalue-subcell").length==0)
                    $(values[i]).css("vertical-align", "middle");

                if(parseInt($(values[i]).attr("data-cell-index"))>3 && $(values[i]).find(".multivalue-subcell").length>0) {

                    var kpi = $(values[i].parentNode).find("td:nth-child(2)")[0].innerText;

                    var target = parseInt($(values[i].parentNode).find("td:nth-child(3)")[0].innerText.replace("%",""));
                    var cur_cell = $(values[i]).find(".multivalue-subcell")[0];
                    var cur_value = parseInt(cur_cell.innerText.replace("%",""));

                    if(kpi.trim() == "Quality of resolution ratio")
                    {

                        if(cur_value <= target) 
                            $(cur_cell).append("<span class=\"MetKPI\"></span>");                       

                        else
                            $(cur_cell).append("<span class=\"NotMetKPI\"></span>");
                    }
                    else
                    {

                        if(cur_value >= target) 
                        $(cur_cell).append("<span class=\"MetKPI\"></span>");                   

                        else
                        $(cur_cell).append("<span class=\"NotMetKPI\"></span>");                        

                        }
                }
            }
        });
    });
});

And we have discovered that the text track written twice is: "AEG - aiam-kpi-reporting-ui-airbus - application_new.js - 2"

So, we think that "kpi_table" is rendered twice, but we have not yet discovered the reason. We keep investigating.