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!

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...