Hello everyone!
I'm trying to create a dashboard and set some tokens through javascript.
I have some html text inputs and I want that, on the click of a button, they set the corresponding tokens to the inputted value.
However, when I try to click again the button, the click event doesn't trigger. Can you help me?
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function (_, $, mvc) {
function setToken(name, value) {
mvc.Components.get("default").set(name, value);
mvc.Components.get('submitted', {create: true}).set(name, value);
}
/* ----------------------- */
let prefix = mvc.Components.get("default").get('personal_input_prefix') ?? "personal_";
// Setting tokens for Inputs with prefix ${prefix}
$('#personal_submit').on('click', function(e){
e.preventDefault();
console.log("CLICKED");
let input_text = $("input[type=text]");
for (let element of input_text) {
let id = element.id;
if (id !== undefined && id.startsWith(prefix)){
let value = element.value;
setToken(`${id}_token`, value); // <---
document.getElementById(`${id}_token_id`).innerHTML = value;
// Set token ${id}_token to value ${value}
}
}
});
});
DASHBOARD EXAMPLE:
<form version="1.1" theme="light" script="test.js">
<label>Dashboard test</label>
<row>
<panel>
<html>
<input id="personal_valueA" type="text"/>
<input id="personal_valueB" type="text"/>
<button id="personal_submit" class="primary-btn">Click</button>
<br/>
Show:
<p id="personal_valueA_token_id">$personal_valueA_token$</p>
<p id="personal_valueA_token_id">$personal_valueB_token$</p>
</html>
</panel>
</row>
</form>
Do you get the CLICKED message in the console log or any other message? I assume you've looked at the dashboard examples for setting tokens on buttons, as your code is similar.
If you add logging to the base code, does anything get logged at all.
No, the second time i click on the button it does not log "CLICKED" nor anything at all. It is as if I'm not clicking the button, and it doesn't print errors nor warnings
Other than debugging the JS, I can only question if you need to do this in JS - Splunk inputs do this out of the box. Are you using JS for a specific reason that the out of the box stuff does not handle?
I am using JS because I need to embed the input in an html section to perform further customizations, and Splunk input doesn't allow me to do them.
Regarding the JS, the problem has something to do with the button and the setToken function: if i comment the line
setToken(`${id}_token`, value); // <---
the button responds to each click without problems, but when I decomment the line it triggers only on the first button click and then no more. I cannot understand why
In Developer tools you posted example gives this
Thanks for the observation. The problem is that, even if I comment the highlighted row, the event of clicking the submit button works only the first time I click, the following times it doesn't event print "CLICKED". I'm more interested in solving that issue, because I don't understand why it is working like that.
Interesting - I see now - yes, you can see that at the start there are event listeners for the button
but once the first call to set(name, value) in SetToken is called, it will remove the event listener, when this trigger() function is called as the value changes. Don't know why, but it doesn't get reset, so there is no longer an event listener
Seems like your problem is that the ID in your XML is wrong - you have duplicated
<p id="personal_valueA_token_id">$personal_valueA_token$</p>
<p id="personal_valueB_token_id">$personal_valueB_token$</p>
Your original duplicates the personal_valueA_token_id
<p id="personal_valueA_token_id">$personal_valueA_token$</p>
<p id="personal_valueA_token_id">$personal_valueB_token$</p>