Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question

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

aa70627
Communicator
‎07-08-2022 12:38 PM

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)
Labels
0 Karma
Reply

VatsalJagani
SplunkTrust
SplunkTrust
‎07-09-2022 07:03 AM

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

aa70627a
Engager
‎07-11-2022 11:40 AM

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

 

  

0 Karma
Reply

VatsalJagani
SplunkTrust
SplunkTrust
‎07-11-2022 12:10 PM

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
Reply

aa70627
Communicator
‎07-12-2022 05:39 AM

@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
Reply
Get Updates on the Splunk Community!

Dashboards: Hiding charts while search is being executed and other uses for tokens

There are a couple of features of SimpleXML / Classic dashboards that can be used to enhance the user ...

Splunk Observability Cloud's AI Assistant in Action Series: Explaining Metrics and ...

This is the fourth post in the Splunk Observability Cloud’s AI Assistant in Action series that digs into how ...

Brains, Bytes, and Boston: Learn from the Best at .conf25

When you think of Boston, you might picture colonial charm, world-class universities, or even the crack of a ...
Top