Dashboards & Visualizations

How do I load local jquery and jquery-ui library for a dashboard?

aa70627
Communicator

Please help me load jquery-ui into a dashboard xml

Also, can i load the jquery-ui css inside the require.conf? in the browser console, i'm getting this error: 

JQuery Version:
3.6.0
VM4289:50 Uncaught TypeError: Cannot read properties of undefined (reading 'ui')
at eval (eval at <anonymous> (dashboard.js:1276:187236), <anonymous>:50:20)
at Object.execCb (eval at module.exports (dashboard.js:632:662649), <anonymous>:1658:33)
at Module.check (eval at module.exports (dashboard.js:632:662649), <anonymous>:874:51)
at Module.eval (eval at module.exports (dashboard.js:632:662649), <anonymous>:1121:34)
at eval (eval at module.exports (dashboard.js:632:662649), <anonymous>:132:23)
at eval (eval at module.exports (dashboard.js:632:662649), <anonymous>:1164:21)
at each (eval at module.exports (dashboard.js:632:662649), <anonymous>:57:31)
at Module.emit (eval at module.exports (dashboard.js:632:662649), <anonymous>:1163:17)
at Module.check (eval at module.exports (dashboard.js:632:662649), <anonymous>:925:30)
at Module.enable (eval at module.exports (dashboard.js:632:662649), <anonymous>:1151:22)

 

 

 

require.config({
    waitSeconds: 0, 
    paths: {
      'localjquery':'/static/app/myapp/lib/jquery.min',
      'jqueryui':'/static/app/myapp/lib/jquery-ui.min'
    },
    shim: {
        'jqueryui': {
            deps: ['localjquery']
        }
    }
});

require([
//     'splunkjs/ready!',
     'underscore',
     'backbone',
     'localjquery',
     'splunkjs/mvc',
     'jqueryui',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_,Backbone, $,  mvc) {
     defaultTokenModel = mvc.Components.get("default");
     console.log("JQuery Version:");
     console.log(jQuery().jquery);
     console.log("JQuery-UI Version:");
     console.log($.ui.version);
});

 

 

 

Dashboard

 

 

<dashboard script="input_slider_range.js" stylesheet="lib/jquery-ui.min.css">
  <label>slider range</label>  
    <row>
      <panel>
        <html>
        SLIDER
        <p>
          <label for="amount">Price range:</label>
          <input type="text" id="amount" readonly="true" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider-range"></div>
        </html>        
      </panel>
    </row>
</dashboard>

 

 

 

Labels (1)
0 Karma

VatsalJagani
SplunkTrust
SplunkTrust

@aa70627 - Try below without require.config.

require([
     'underscore',
     'backbone',
     './lib/jquery.min',
     'splunkjs/mvc',
     './lib/jquery-ui.min',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_,Backbone, $,  mvc) {

 

I'm assuming below two files are present under your App:

  • $SPLUNK_HOME/etc/<your-app>/appserver/static/<this-javascript-file>.js
  • $SPLUNK_HOME/etc/<your-app>/appserver/static/lib/jquery.min.js
  • $SPLUNK_HOME/etc/<your-app>/appserver/static/lib/jquery-ui.min.js

 

I hope this helps!!!

0 Karma

aa70627a
Engager

@VatsalJagani  Thanks for replying back. Your assumptions are correct. I tried your recommendations but its returning the same error msg. 

 

  

0 Karma

VatsalJagani
SplunkTrust
SplunkTrust

Try below two options. One of them should work:

Option-1

require([
     'underscore',
     'backbone',
     '/static/app/<your-app-folder-name>/lib/jquery.min',
     'splunkjs/mvc',
     '/static/app/<your-app-folder-name>/lib/jquery-ui.min',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_,Backbone, $,  mvc) {

 

Option-2

require([
     'underscore',
     'backbone',
     '{{SPLUNKWEB_URL_PREFIX}}/static/app/<your-app-folder-name>/lib/jquery.min',
     'splunkjs/mvc',
     '{{SPLUNKWEB_URL_PREFIX}}/static/app/<your-app-folder-name>/lib/jquery-ui.min',
     'splunkjs/mvc/simplexml/ready!'
 ], function (_,Backbone, $,  mvc) {

 

I hope this helps!!!

0 Karma

aa70627
Communicator

@VatsalJagani  just an fyi, only option 2 will load up the js properly. Option #1 and the one from previous post wouldn't work because Js will complain about incorrect path.

Having said that, the issue here is that jquery ui has a dependency for jquery to load up first which is why require.conf is required with shim. I've also changed the waitTime from 0 to higher number but once the js is able to load both query and jqueryui, it throws the error noted from my first post

0 Karma
Get Updates on the Splunk Community!

Splunk Observability Cloud’s AI Assistant in Action Series: Analyzing and ...

This is the second post in our Splunk Observability Cloud’s AI Assistant in Action series, in which we look at ...

Elevate Your Organization with Splunk’s Next Platform Evolution

 Thursday, July 10, 2025  |  11AM PDT / 2PM EDT Whether you're managing complex deployments or looking to ...

Splunk Answers Content Calendar, June Edition

Get ready for this week’s post dedicated to Splunk Dashboards! We're celebrating the power of community by ...