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

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25

Are you a member of the Splunk Community?

button "click" event isn't working

Can’t make it to .conf25? Join us online!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Unlock What’s Next: The Splunk Cloud Platform at .conf25