Dashboards & Visualizations

Jquery function overriding not working

ankitarath2011g
Explorer

I have added 2 JS file in my dashboard XML. Want to override a on click(button) function defined in JS-1 in JS-2 and want the dashboard to call the overridden function. The first JS is common one used by many apps, so can not change that one.  I am basically setting the time picker token in both functions with different token value.

On clicking it is calling  both functions as it is printing both "In JS1" and "In JS2". But timepicker token is set to the first JS value. Have tried the following to override.
JS1

In JS1

 

 

$(".a-btn").click(function () {
console.log("In def JS 1");
// Code for setting time picker token to -30m
}

 

 

 In JS2

 

 

var tmp_fun = $.fn.a-btn;  // Have tried without this as well
$(".a-btn").click(function () {
console.log("In def JS 2");
// Code for setting the time picker token to -60m
}

 

 

 Please suggest

Labels (2)
0 Karma
1 Solution

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

No need to modify A1.js. Just update below code I A2.js

 

$('.spanclass').off('click').on('click', function() {
        console.log("This is from A2. Setting up time token with last 24 hrs.");
        default_token_model.set("form.my_time_token.earliest", "-24h");
        default_token_model.set("form.my_time_token.latest", "now");
        submitted_tokens.set(default_token_model.toJSON());
    });

 

If this reply helps you, an upvote would be appreciated.

Thanks
Kamlesh Vaghela

 

View solution in original post

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

 

Can you please try below JS code in JS2?

    $(document).off('click', ".a-btn").on('click', ".a-btn", function() {
        console.log("In def JS 2");
    });

 

If this reply helps you, an upvote would be appreciated.

Thanks
Kamlesh Vaghela 

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

 

Is it possible to share sample XML of your code ?? Just replace searches and Confidential values with dummy one.

0 Karma

ankitarath2011g
Explorer

@kamlesh_vaghela button is getting added in first JS itself. Not in XML

 $(".spanclass").prepend("<a class='btn a-btn' >Click this</a>");
0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

I have tried this also. It is working. Please check my sample code and try in your local instance.

XML.

<form script="A1.js,A2.js">
  <label>JS Example</label>
  <row>
    <panel>
      <html>
        <div class="spanclass"></div>
      </html>
    </panel>
  </row>
</form>

 

A1.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    console.log("In A1");
    $(".spanclass").prepend("<a class='btn a-btn' >Click this</a>");

    $(document).on('click', ".a-btn", function() {
        console.log("This is from A1");
    });
});

 

A2.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {

    console.log("In A2");
    $(document).off('click', ".a-btn").on('click', ".a-btn", function() {
        console.log("This is from A2");
    });
});

 

Tip:  Bump js version using https://localhost:8000/en-US/_bump .

 

Thanks
Kamlesh Vaghela

If this reply helps you, an upvote would be appreciated.

ankitarath2011g
Explorer

This is my sample dashboard XML. I am trying to set this time token on click of that button in both JS.

<form refresh="360" stylesheet="a.css" script="mydir1:js/a1.js, mydir2:js/a2.js" hideFilters="true">
  <label>Test</label>
  <description>Tes</description>
  <fieldset submitButton="false" autoRun="false">
    <input type="time" token="my_time_token" searchWhenChanged="true">
      <label>Time Selection</label>
      <default>
        <earliest>-60m</earliest>
        <latest>now</latest>
      </default>
    </input>
   </fieldset>
<!-- other code here -->
   </form>

 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

 

Sharing new code as per your requirement. Can you please try this code?

 

XML.

<form script="A1.js,A2.js">
  <label>JS Example</label>
  <fieldset submitButton="false" autoRun="false">
    <input type="time" token="my_time_token" searchWhenChanged="true">
      <label>Time Selection</label>
      <default>
        <earliest>-60m</earliest>
        <latest>now</latest>
      </default>
    </input>
   </fieldset>
  <row>
    <panel>
      <html>
        <div class="spanclass"></div>
      </html>
    </panel>
  </row>
</form>

 

 

A1.js

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    console.log("In A1");
    $(".spanclass").prepend("<a class='btn a-btn' >Click this</a>");
    var default_token_model = mvc.Components.get("default");
    var submitted_tokens = mvc.Components.get("submitted");

    $(document).on('click', ".a-btn", function() {
        console.log("This is from A1. Setting up time token with all time.");
        default_token_model.set("form.my_time_token.earliest", "0");
        default_token_model.set("form.my_time_token.latest", "now");
        submitted_tokens.set(default_token_model.toJSON());
    });
});

 

A2.js

 

require([
    'underscore',
    'jquery',
    'splunkjs/mvc',
    'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
    console.log("In A2");
    var default_token_model = mvc.Components.get("default");
    var submitted_tokens = mvc.Components.get("submitted");
    $(document).off('click', ".a-btn").on('click', ".a-btn", function() {
        console.log("This is from A2. Setting up time token with last 24 hrs.");
        default_token_model.set("form.my_time_token.earliest", "-24h");
        default_token_model.set("form.my_time_token.latest", "now");
        submitted_tokens.set(default_token_model.toJSON());
    });
});

 

Thanks
Kamlesh Vaghela

 

If this reply helps you, an upvote would be appreciated.

ankitarath2011g
Explorer

@kamlesh_vaghela still not working 😞 

One point, I can not change anything in A1.js as it is common for all apps and managed by some other team.

In that JS on click function does not have $(document), in stead it is as follows 

 

 $(".spanclass").click(function () {
// Set time filter to all time
}

 

It is working when I am changing the on click function of A1.js with $(document) , the one you are suggesting. But, I can not modify anything in that file. Tried the following in A2.js to match that one, but that also didn't work

 

$(".spanclass").off('click', ".a-btn").on('click', ".a-btn", function() {
// set time token to 24 hr
}

 

 Can you suggest something on this

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust

@ankitarath2011g 

No need to modify A1.js. Just update below code I A2.js

 

$('.spanclass').off('click').on('click', function() {
        console.log("This is from A2. Setting up time token with last 24 hrs.");
        default_token_model.set("form.my_time_token.earliest", "-24h");
        default_token_model.set("form.my_time_token.latest", "now");
        submitted_tokens.set(default_token_model.toJSON());
    });

 

If this reply helps you, an upvote would be appreciated.

Thanks
Kamlesh Vaghela

 

View solution in original post

ankitarath2011g
Explorer

Thanks a ton @kamlesh_vaghela 

0 Karma

kamlesh_vaghela
SplunkTrust
SplunkTrust
Glad to help you. This is also first time for me to have such use case.So I took as challenge.


If you think ay of my comment help you to build your knowledge base, the upvote would be appreciated.
🙂

ankitarath2011g
Explorer

@kamlesh_vaghela  Thanks Kamlesh for the reply. Tried this but it is not working.  Have updated the main post/question. Can you please read again and suggest

0 Karma
Register for .conf21 Now! Go Vegas or Go Virtual!

How will you .conf21? You decide! Go in-person in Las Vegas, 10/18-10/21, or go online with .conf21 Virtual, 10/19-10/20.