Splunk Search

button "click" event isn't working

puet
Explorer

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.

Labels (1)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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
SplunkTrust
SplunkTrust

@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
Explorer

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!

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@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.

 

0 Karma

puet
Explorer

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

0 Karma
Get Updates on the Splunk Community!

Detecting Remote Code Executions With the Splunk Threat Research Team

WATCH NOWRemote code execution (RCE) vulnerabilities pose a significant risk to organizations. If exploited, ...

Enter the Splunk Community Dashboard Challenge for Your Chance to Win!

The Splunk Community Dashboard Challenge is underway! This is your chance to showcase your skills in creating ...

.conf24 | Session Scheduler is Live!!

.conf24 is happening June 11 - 14 in Las Vegas, and we are thrilled to announce that the conference catalog ...