topic Re: jQuery issue in Dashboards & Visualizations

jQuery issue

slr — Fri, 03 Jul 2015 10:53:01 GMT

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.

Re: jQuery issue

alacercogitatus — Fri, 03 Jul 2015 16:15:22 GMT

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

Re: jQuery issue

slr — Mon, 06 Jul 2015 08:15:09 GMT

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.

Re: jQuery issue

alacercogitatus — Mon, 06 Jul 2015 11:53:51 GMT

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");
});

Re: jQuery issue

slr — Mon, 06 Jul 2015 12:23:19 GMT

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.

Re: jQuery issue

alacercogitatus — Mon, 06 Jul 2015 22:13:49 GMT

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