Dashboards & Visualizations

How to include jquery in newly created app

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

Champion

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

Champion

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

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

Champion

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
Don’t Miss Global Splunk
User Groups Week!

Free LIVE events worldwide 2/8-2/12
Connect, learn, and collect rad prizes and swag!