topic Re: Setting text input with javascript in Dashboards & Visualizations

Setting text input with javascript

sassofrasso — Mon, 20 Jan 2025 09:47:08 GMT

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>

Re: Setting text input with javascript

bowesmana — Mon, 20 Jan 2025 22:37:46 GMT

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.

Re: Setting text input with javascript

sassofrasso — Tue, 21 Jan 2025 08:12:02 GMT

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

Re: Setting text input with javascript

bowesmana — Wed, 22 Jan 2025 07:20:28 GMT

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?

Re: Setting text input with javascript

sassofrasso — Wed, 22 Jan 2025 08:16:14 GMT

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

Re: Setting text input with javascript

bowesmana — Wed, 22 Jan 2025 20:43:40 GMT

In Developer tools you posted example gives this

Re: Setting text input with javascript

bowesmana — Wed, 22 Jan 2025 20:49:42 GMT

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>

Re: Setting text input with javascript

sassofrasso — Thu, 23 Jan 2025 09:50:52 GMT

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.

Re: Setting text input with javascript

bowesmana — Thu, 23 Jan 2025 23:04:03 GMT

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