- Splunk Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Splunk Javascript: Why did the Javascript stopped ...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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!
Introducing the 2024 SplunkTrust!
Introducing the 2024 Splunk MVPs!
Splunk Custom Visualizations App End of Life
