Dashboards & Visualizations

Token update disables JS function for button?

hmaschki
New Member

Hello everyone,

i have some buttons on my page which i want label dynamically depending on a token the user picks from a dropdown menu.
The corresponding labels are saved in a lookup file which i access through javascript. Upon clicking on the buttons a search should be started to write in a kv store.

To this point, everything works just fine.
As soon as i change the token from the dropdown menu, the buttons stop working until i refresh the whole page.
Everything in my js file but the button clicking is still working after the changing of the token.

Here is the code for the buttons I'm using (i also tried "document.getElementById("quickChange0").addEventListener("click"..." but that did not solve the problem) :

$('#quickChange0').click(function () {
            var selected = tokens.get("selected");          
            var doQuickChange1 = "really long search";              

            console.log(doQuickChange1);
            service.search(doQuickChange1);
            setTimeout(function(){location.reload()},1000);             
        });

Does anyone know why this is or has an idea how to do this in a different way?
Thanks in advance!

0 Karma
1 Solution

niketn
Legend

@hmaschki, even if you have created a button in Simple XML code, it should work with Simple XML JS extension where you handle click event in JavaScript. Refer to @jconger 's blog: https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html

Instead of $('#quickChange0').click(function () can you try the following:

$(document).on('click','#quickChange0',function(){
      console.log('quickChange0 Clicked');
       ...
       ...

});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

View solution in original post

0 Karma

niketn
Legend

@hmaschki, even if you have created a button in Simple XML code, it should work with Simple XML JS extension where you handle click event in JavaScript. Refer to @jconger 's blog: https://www.splunk.com/blog/2016/09/21/using-html5-input-types-on-splunk-forms.html

Instead of $('#quickChange0').click(function () can you try the following:

$(document).on('click','#quickChange0',function(){
      console.log('quickChange0 Clicked');
       ...
       ...

});
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma

hmaschki
New Member

That works aswell! So you can either use .on('click'...) or define the buttons in js. I would prefer your solution. Thanks!

0 Karma

hmaschki
New Member

The the problem was, that i defined my buttons inside the xml of my dashboard.
Everything is working fine when i use JS to define the buttons.

Problably there is a problem with the way splunk handels IDs when reloading the page upon changing tokens.

0 Karma
Get Updates on the Splunk Community!

CX Day is Coming!

Customer Experience (CX) Day is on October 7th!! We're so excited to bring back another day full of wonderful ...

Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!

The Big One: Splunk 10 is Here!  The moment many of you have been waiting for has arrived! We are thrilled to ...

Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console

Today, we’re excited to announce the release of a brand new AI assistant usage dashboard in Cloud Monitoring ...