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!

Index This | I am a number, but when you add ‘G’ to me, I go away. What number am I?

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

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...