Dashboards & Visualizations

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

aa70627
Path Finder

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
Champion

@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
Champion

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
Path Finder

@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!

Happy CX Day to our Community Superheroes!

Happy 10th Birthday CX Day!What is CX Day? It’s a global celebration recognizing innovation and success in the ...

Check out This Month’s Brand new Splunk Lantern Articles

Splunk Lantern is a customer success center providing advice from Splunk experts on valuable data insights, ...

Routing Data to Different Splunk Indexes in the OpenTelemetry Collector

This blog post is part of an ongoing series on OpenTelemetry. The OpenTelemetry project is the second largest ...