Solved: button "click" event isn't working

puet · ‎09-13-2021

So I'm trying to change a token when i click a button.

Tried it like this:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function ( $,mvc,TableView) {
    var tokens = mvc.Components.get('default');
    var sub_tok = mvc.Components.get("submitted");

    $(document).on("click","#testbtn",function(){
        tokens.set("btnClick", "Click");
        sub_tok.set("btnClick", "Click");
    });
});

And like this:

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function ( $,mvc,TableView) {
    var tokens = mvc.Components.get('default');
    var sub_tok = mvc.Components.get("submitted");

    $("#testbtn").on("click",function(){
        tokens.set("btnClick", "Click");
        sub_tok.set("btnClick", "Click");
    });
});

But its not working. When i try the code in jsFiddle it works as intended. (leaving out the splunk stuff)
It's just a jQuery click event, so I don't know what I'm doing wrong.

Further more when I try the whole think with a slider, it works.

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/tableview',
    'splunkjs/mvc/simplexml/ready!'
], function ( $,mvc,TableView) {
    var tokens = mvc.Components.get('default');
    var sub_tok = mvc.Components.get("submitted");

   $("#slider-range").on("input change", function () {
        tokens.set("slider_value", $(this).val());
        sub_tok.set("slider_value", $(this).val());
    });
});

Here ist the xml code:

<dashboard script="testscript.js" theme="dark">
  <label></label>
  <fieldset submitButton="false">
    <html>
            <label>Slider</label>
            <input type="range" id="slider_input" value="10" min="0" max="20" step="1"/>
            <button id="testbtn">ghfhfhfhfh</button>
        </html>
  </fieldset>
  <row>
    <panel>
      <title>$slider_value$____$btnClick$</title>
      <table>
        <search>
          <query>|makeresults | eval slider_value=$slider_value$</query>
          <earliest>-1h@h</earliest>
          <latest>now</latest>
        </search>
        <option name="refresh.display">progressbar</option>
      </table>
    </panel>
  </row>
</dashboard>

I there is a simple solution to this and thanks in advance.

kamlesh_vaghela · ‎09-13-2021

@puet

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    var tokens = mvc.Components.get("default");
    var submitted_tokens = mvc.Components.get("submitted");
    $(document).on("click", "#testbtn", function() {
        tokens.set("sliderval", $('#slider_input').val());
        tokens.set("slider_value", $('#slider_input').val());
        tokens.set("btnClick", "Click");
        submitted_tokens.set(tokens.toJSON());
    });
});

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

View solution in original post

kamlesh_vaghela · ‎09-13-2021

@puet

Can you please try this?

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    var tokens = mvc.Components.get("default");
    var submitted_tokens = mvc.Components.get("submitted");
    $(document).on("click", "#testbtn", function() {
        tokens.set("sliderval", $('#slider_input').val());
        tokens.set("slider_value", $('#slider_input').val());
        tokens.set("btnClick", "Click");
        submitted_tokens.set(tokens.toJSON());
    });
});

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

puet · ‎09-13-2021

Thanks it works now.
Do i guess you always need "underscore" for it to work.
I thought I already tried this but maybe I messed up the order or sth.

Thanks again!

kamlesh_vaghela · ‎09-13-2021

@puet

underscore is just extra you can remove it.

like

require([
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function($, mvc) {
    var tokens = mvc.Components.get("default");
    var submitted_tokens = mvc.Components.get("submitted");
    $(document).on("click", "#testbtn", function() {
        tokens.set("sliderval", $('#slider_input').val());
        tokens.set("slider_value", $('#slider_input').val());
        tokens.set("btnClick", "Click");
        submitted_tokens.set(tokens.toJSON());
    });
});

It only need when you use inn your JS code. 🙂

Thanks
KV
▄︻̷̿┻̿═━一 😉

If any of my reply helps you to solve the problem Or gain knowledge, an upvote would be appreciated.

puet · ‎09-13-2021

I had exactly the same code without it working. But i guess now that it works i shouldn't complain.

button "click" event isn't working

other

Introducing the Splunk Community Dashboard Challenge!

Built-in Service Level Objectives Management to Bridge the Gap Between Service & ...

Get Your Exclusive Splunk Certified Cybersecurity Defense Engineer Certification at ...