Dashboards & Visualizations

Using js for button "on click" event

wmw
Explorer

I'm struggling to effectively use a minor amount of javascript which is intended to facilitate some in-dashboard help pages, and hoping that someone might be able to help me out.

 

Given this javascript (in <app>/appserver/static/js/help.js):

require([
    'jquery',
    'splunkjs/mvc/simplexml/ready!'
], function($) {
    $('#help-btn').on( 'click', function() {
      $('#help').toggle();
    });

    $('#help-close').on( 'click', function() {
      $('#help').toggle();
    });
});

 

And this dashboard which adds a "Dashboard Help" button (next to Edit), the idea would be that simply clicking the button will toggle() the #help id, which is the panel. In "Edit" mode, I can see my overview.html panel as well as the "Dashboard Help" button, and clicking it will perform the correct action. I've used this on live dashboards as well, successfully on some and not so much on others. I imagine there's some sort of timing condition with dynamic loading and whatnot that I'm running into. Can anyone advise?

<form version="1.1" script="common_ui_util:/js/help.js">
  <label>TEST</label>
  <row>
    <panel>
      <html>
        <div>
          <input id="help-btn" type="button" value="Dashboard Help" style="top: -40px;" class="btn default"></input>
        </div>
      </html>
    </panel>
  </row>
  <row depends="$HIDEME$">
    <panel id="help">
      <html>
        <button id="help-close" class="help-close close close_btn"/>
      </html>
      <html src="html_docs/overview.html"></html>
    </panel>
  </row>
</form>

 

Labels (1)
0 Karma
1 Solution

wmw
Explorer

I've managed to solve this with an ugly hack based on this post: 

https://community.splunk.com/t5/All-Apps-and-Add-ons/Why-doesn-t-this-JavaScript-work-to-apply-a-cli... 

 

Basically, I've just wrapped the entire javascript snippet with a setTimeout()...

View solution in original post

0 Karma

wmw
Explorer

I've managed to solve this with an ugly hack based on this post: 

https://community.splunk.com/t5/All-Apps-and-Add-ons/Why-doesn-t-this-JavaScript-work-to-apply-a-cli... 

 

Basically, I've just wrapped the entire javascript snippet with a setTimeout()...

0 Karma

fredclown
Builder

When I come up on these kinds of situations I typically use a MutationObserver as opposed to setTimeout. With setTimeout you are just hoping the element exists when the JS is run. With the MutationObserver you can be certain your JS will not run until the element exists.

0 Karma

wmw
Explorer

I don't see how to edit my post, so I'll make a correction here. The "$HIDEME$" token appears to need to be at the panel level, not the row.

<row>
    <panel id="help" depends="$HIDEME$">

 

There is no issue with using that token otherwise, and I have dashboards where this will work until it just stops working. My feeling is that it functions properly early in the dashboard loading process, but then stops once it's complete. My troubleshooting leads me to believe that it might be the case that using <done> conditions to set tokens on search completion is the culprit, e.g.

          ...
          <query>
            ...
          </query>
          <earliest>0</earliest>
          <latest></latest>
          <done>
            <condition match="$job.resultCount$ &gt; 0">
               <set token="has_notables">true</set>
             </condition>
             <condition>
               <unset token="has_notables"></unset>
             </condition>
           </done>
        </search>

 

0 Karma

fredclown
Builder

I'm not seeing how the $HIDEME$ token is ever set. Without that being set the whole row will stay hidden as it depends on that token.

0 Karma

wmw
Explorer

It's purposely never set. The javascript is responsible for displaying the panel instead. However, I do believe that my placement in my example was incorrect and the depends clause should be bound to the panel rather than the row.

0 Karma
Get Updates on the Splunk Community!

How to Monitor Google Kubernetes Engine (GKE)

We’ve looked at how to integrate Kubernetes environments with Splunk Observability Cloud, but what about ...

Index This | How can you make 45 using only 4?

October 2024 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this ...

Splunk Education Goes to Washington | Splunk GovSummit 2024

If you’re in the Washington, D.C. area, this is your opportunity to take your career and Splunk skills to the ...