- Find Answers
- :
- Using Splunk
- :
- Dashboards & Visualizations
- :
- Using js for button "on click" event
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I've managed to solve this with an ugly hack based on this post:
Basically, I've just wrapped the entire javascript snippet with a setTimeout()...
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I've managed to solve this with an ugly hack based on this post:
Basically, I've just wrapped the entire javascript snippet with a setTimeout()...
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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$ > 0">
<set token="has_notables">true</set>
</condition>
<condition>
<unset token="has_notables"></unset>
</condition>
</done>
</search>
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...
Monitoring Amazon Elastic Kubernetes Service (EKS)
Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation
