topic Re: Jquery function overriding not working in Dashboards & Visualizations

Jquery function overriding not working

ankitarath2011g — Tue, 11 May 2021 10:07:00 GMT

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

Re: Jquery function overriding not working

kamlesh_vaghela — Tue, 11 May 2021 09:48:03 GMT

@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

Re: Jquery function overriding not working

ankitarath2011g — Tue, 11 May 2021 10:20:32 GMT

@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

Re: Jquery function overriding not working

kamlesh_vaghela — Tue, 11 May 2021 10:36:37 GMT

@ankitarath2011g

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

Re: Jquery function overriding not working

ankitarath2011g — Tue, 11 May 2021 11:02:57 GMT

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

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

Re: Jquery function overriding not working

kamlesh_vaghela — Tue, 11 May 2021 11:14:12 GMT

@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

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.

Re: Jquery function overriding not working

ankitarath2011g — Tue, 11 May 2021 11:44:04 GMT

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>  </form>

Re: Jquery function overriding not working

kamlesh_vaghela — Tue, 11 May 2021 12:16:36 GMT

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

Re: Jquery function overriding not working

ankitarath2011g — Tue, 11 May 2021 18:09:04 GMT

@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

Re: Jquery function overriding not working

kamlesh_vaghela — Wed, 12 May 2021 05:00:21 GMT

@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

Re: Jquery function overriding not working

ankitarath2011g — Wed, 12 May 2021 06:01:25 GMT

Thanks a ton @kamlesh_vaghela

Re: Jquery function overriding not working

kamlesh_vaghela — Wed, 12 May 2021 06:06:27 GMT

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