Dashboards & Visualizations

jQuery issue

slr
Communicator

Hello.

I'm trying to change the background of some panels with jQuery+CSS when they have one value or another, but nothing happens. It's like the script is never executed. I put some alert() and the inside ones from $(document).ready never show up.

What am I missing?

Regards.

Tags (3)
0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

Single value is not a dashboard type. HTML or Simple XML are dashboard types. Single Value is a module (or panel) on a dashboard. I need to know first the dashboard type, and some example code you have in place.

You can use the range command to help build out what you are looking for.

<your_search>| range <myfield> 0-100=low 101-200=medium default=high

Then in your Single Value XML, place this option:

<option name="classField">range</option>

This will assign the results of the range command to your panel, and as long as low, medium, and high are CSS classes in your dashboard.css file, you should be able to see the color change.

===Update===

Ok, so based on that, add this code into change.js. Once added, Refresh the debug endpoint (https://yoursplunk/en-US/debug/refresh) and then click the button at https://yoursplunk/en-US/_bump.

require(['jquery'], function($){
    alert("ChangeMe");
});

slr
Communicator

Sorry about my misunderstanding.

I tried both (HTML and XML) with the same result. I am using the range command, but I want to change the panel's background dynamically when the value reach some limits by adding classes in **** . Actually, this is my XML dashboard:

<dashboard stylesheet="style.css" script="change.js">
<row>
            <single>
                <searchString>index=some_index filter="value" | stats count by filter | fields - filter | rangemap field=count none=0-1000 low=1001-2000 guarded=2001-3000 elevated=3001-5000 high=5001-8000 severe=8001-20000 default=none</searchString>
                <earliestTime>-2y</earliestTime>
                <latestTime>now</latestTime>
                <option name="classField">range</option>
                <option name="field">value</option>
            </single>
    </row>
</dashboard>

And the script change.js has alerts like this...

$(document).ready(function () {
        alert("Show me");
        });

...but they never show up, and that means that the $(document).ready doesn't run. I tried with $(document).ajaxSuccess and $(document).ajaxComplete, but nothing different happens.

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

You can also find me on IRC (#splunk on efnet.org) for a step-by-step troubleshooting.

0 Karma

alacercogitatus
SplunkTrust
SplunkTrust

You need to provide some context to your question. Where are you putting your javascript? What type of dashboard are you using?

slr
Communicator

What type of dashboard are you using?
I'm using a single value dashboard. I'm trying to change the background color with jquery+css when the **** has some value.

Where are you putting your javascript?
I tried with a JS file:
I tried with the embebed option, loading the original api from jquery:

<dashboard>
<html>
    <script src="jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="file.js" type="text/javascript"></script>
    <script>jQuery.noConflict();</script>
  </html>
</dashboard>

Thank you in advance, but ... what am I missing?

Regards.

0 Karma
Get Updates on the Splunk Community!

.conf24 | Registration Open!

Hello, hello! I come bearing good news: Registration for .conf24 is now open!   conf is Splunk’s rad annual ...

Splunk is officially part of Cisco

Revolutionizing how our customers build resilience across their entire digital footprint.   Splunk ...

Splunk APM & RUM | Planned Maintenance March 26 - March 28, 2024

There will be planned maintenance for Splunk APM and RUM between March 26, 2024 and March 28, 2024 as ...