Solved: Splunk Javascript: Why did the Javascript stopped ...

garenilla · ‎02-27-2018

Hello splunkers!

On my journey in creating a library for my team with the methods we are using on each app I have encountered a strange issue, I don't know if I have errors on my JavaScript but it's kinda weird because it "works".
In this case it's a test and I have a dashboard with 4 buttons, first one use the library and make an alert, second one use the library and set a token, third one use a library and unset a token and the last one make an alert (without using a library). When I click on the first button or on the last, it works nice but when I click on set/unset buttons it works but then all the buttons stop working. There are no error messages and I haven't seen anything weird in debug mode.

My dashboard it's pretty simple.

<dashboard script="main.js">
  <label>TestGabri1</label>
  <init>
    <set token="myToken">Change Value</set>
  </init>
  <row>
    <panel>
      <html>
      <body>
        <div id="myButtons">
          <button id="myButton0">Do Console</button>
          <button id="myButton1">Set Token</button>
          <button id="myButton2">Unset Token</button>
          <button id="myButton3">Test</button>
        </div>
        <div>
          <h2>$myToken$</h2>
        </div>
      </body>
    </html>
    </panel>
  </row>
</dashboard>

And the scripts are both on etc/apps/testApp/appserver/static
Main.js

require(["../app/testApp/appUtils",
        "splunkjs/mvc/simplexml/ready!"
    ], function (appUtils) {

    $(document).ready(function () {
        console.log("Document Ready!");
        console.log(appUtils);
        $("#myButton0").on("click",appUtils.doAlert);
        $("#myButton1").on("click",function(){
            appUtils.setToken("myToken","Value");
        });
        $("#myButton2").on("click",function(){
            appUtils.unsetToken("myToken");
        });
        $("#myButton3").on("click",function(){
            alert("This works too!");
        });
        console.log("Document Ready Done!");
    });

});

appUtils.js (the library)

define(function(require, exports, module) {
    var mvc = require("splunkjs/mvc");

    class AppUtils {
        constructor() {
            this.defaultTokenModel = mvc.Components.getInstance('default', {
                    create: true
                });
            this.submittedTokenModel = mvc.Components.getInstance('submitted', {
                    create: true
                });
        }

        doAlert() {
            //debugger;
            alert("It works!");
        }
        setToken(name, value) {
            //debugger;
            alert("Set Token " + name + " : " + value);
            this.defaultTokenModel.set(name, value);
            this.submittedTokenModel.set(name, value);
        }
        unsetToken(name) {
            //debugger;
            alert("Unset Token " + name);
            this.defaultTokenModel.unset(name);
            this.submittedTokenModel.unset(name);
        }
    }

    var appUtils = new AppUtils();
    return appUtils;
});

Can anyone give me a helping hand with this weird issue?
I'm sorry if I have misspelled something.

Thank you all!

garenilla · ‎04-09-2018

Hello splunkers!

i have managed to solve this problem and it was really simple. The problem is that when you have a token in an html inside a panel, when this token changes splunk rewrite all the code inside the html, so if you have events binded to elements these are destroyed. Knowing this the solution is bind the event to the panel and delegate to the elements.
First the xml.

 <dashboard script="main.js">
   <label>TestGabri1</label>
   <init>
     <set token="myToken">Change Value</set>
   </init>
   <row>
     <panel id="myPanel">
       <html>
       <body>
         <div id="myButtons">
           <button id="myButton0">Do Console</button>
           <button id="myButton1">Set Token</button>
           <button id="myButton2">Unset Token</button>
           <button id="myButton3">Test</button>
         </div>
         <div>
           <h2>$myToken$</h2>
         </div>
       </body>
     </html>
     </panel>
   </row>
 </dashboard>

and now the javascript

 require(["../app/testApp/appUtils",
         "splunkjs/mvc/simplexml/ready!"
     ], function (appUtils) {

     $(document).ready(function () {
         console.log("Document Ready!");
         console.log(appUtils);
         $("#myPanel").on("click","#myButton0",appUtils.doAlert);
         $("#myPanel").on("click","#myButton1",function(){
             appUtils.setToken("myToken","Value");
         });
         $("#myPanel").on("click","#myButton2",function(){
             appUtils.unsetToken("myToken");
         });
         $("#myPanel").on("click","#myButton3",function(){
             alert("This works too!");
         });
         console.log("Document Ready Done!");
     });

 });

With this change it works perfectly.
I hope this help you a little if you encounter a problem like this.

Best regards!

View solution in original post

garenilla · ‎04-09-2018

Hello splunkers!

i have managed to solve this problem and it was really simple. The problem is that when you have a token in an html inside a panel, when this token changes splunk rewrite all the code inside the html, so if you have events binded to elements these are destroyed. Knowing this the solution is bind the event to the panel and delegate to the elements.
First the xml.

 <dashboard script="main.js">
   <label>TestGabri1</label>
   <init>
     <set token="myToken">Change Value</set>
   </init>
   <row>
     <panel id="myPanel">
       <html>
       <body>
         <div id="myButtons">
           <button id="myButton0">Do Console</button>
           <button id="myButton1">Set Token</button>
           <button id="myButton2">Unset Token</button>
           <button id="myButton3">Test</button>
         </div>
         <div>
           <h2>$myToken$</h2>
         </div>
       </body>
     </html>
     </panel>
   </row>
 </dashboard>

and now the javascript

 require(["../app/testApp/appUtils",
         "splunkjs/mvc/simplexml/ready!"
     ], function (appUtils) {

     $(document).ready(function () {
         console.log("Document Ready!");
         console.log(appUtils);
         $("#myPanel").on("click","#myButton0",appUtils.doAlert);
         $("#myPanel").on("click","#myButton1",function(){
             appUtils.setToken("myToken","Value");
         });
         $("#myPanel").on("click","#myButton2",function(){
             appUtils.unsetToken("myToken");
         });
         $("#myPanel").on("click","#myButton3",function(){
             alert("This works too!");
         });
         console.log("Document Ready Done!");
     });

 });

With this change it works perfectly.
I hope this help you a little if you encounter a problem like this.

Best regards!

Splunk Javascript: Why did the Javascript stopped working after setting/unsetting a token in dashboard?

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

Are you a member of the Splunk Community?

Splunk Javascript: Why did the Javascript stopped working after setting/unsetting a token in dashboard?

Dashboards: Hiding charts while search is being executed and other uses for tokens

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

Brains, Bytes, and Boston: Learn from the Best at .conf25