Solved: Re: Jquery function overriding not working

ankitarath2011g · ‎05-11-2021

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

kamlesh_vaghela · ‎05-11-2021

@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 · ‎05-11-2021

@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 · ‎05-11-2021

@ankitarath2011g

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

ankitarath2011g · ‎05-11-2021

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

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

kamlesh_vaghela · ‎05-11-2021

@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 · ‎05-11-2021

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>

kamlesh_vaghela · ‎05-11-2021

@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 · ‎05-11-2021

@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

kamlesh_vaghela · ‎05-11-2021

@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

ankitarath2011g · ‎05-11-2021

Thanks a ton @kamlesh_vaghela

kamlesh_vaghela · ‎05-11-2021

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 · ‎05-11-2021

@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

Jquery function overriding not working

javascript

other

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation