Dashboards & Visualizations

How to include jquery in newly created app

josefa123
Explorer

I have created a new app called sample using the splunk web. I made a simple JS file that look like this and uploaded it.

require(['jquery'], function($){
    $(window).load(function(){
        console.log("Lets try this one more time!")
    })
});

Jquery doesn't seem to run because I have tried removing the jquery codes and the console.log() run perfectly. How can I include different framework in my app? Thanks in advance

0 Karma
1 Solution

jeffland
SplunkTrust
SplunkTrust

You don't need to do anything specific with jquery unless you want that functionality:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"], 
function($){
    console.log("Let's change something in the DOM...");
    $(".dashboard-header").find("h2").append('<h2>Hooray!</h2>');
});

View solution in original post

jeffland
SplunkTrust
SplunkTrust

You don't need to do anything specific with jquery unless you want that functionality:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"], 
function($){
    console.log("Let's change something in the DOM...");
    $(".dashboard-header").find("h2").append('<h2>Hooray!</h2>');
});

josefa123
Explorer

I need to add some library on my app so I am trying to include jquery for testing. can I ask why do I need splunkjs ready!? and why do you change $(window).load() to some other jquery code? I tried to use windows.load but it doesnt work. It is really weird.

also, if I want to use lodash.js how can I add it on splunk? Thanks

0 Karma

jeffland
SplunkTrust
SplunkTrust

The question is, why do you want to use $(window).load()? It does nothing you need to do.
The javascript code I gave you is all you need in your file to see how to use jquery on a dashboard, there is no need for anything more (unless you want to use further elements such as a searchmanager, which would als have to be required and placed in the function brackets). Requiring ready! signals splunk to work when the page is ready.

If you want to use lodash.js, you just place it in the same folder you placed your initital .js in (appname/appserver/static), add it to your Simple XML like this:

<form script="your_js.js, lodash.js">
    ...

and that's it. Remember to restart your splunk to pick up new files.

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