topic Re: How do I load local jquery and jquery-ui library for a dashboard? in Dashboards & Visualizations

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

aa70627 — Fri, 08 Jul 2022 20:35:57 GMT

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>

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

VatsalJagani — Sat, 09 Jul 2022 14:03:42 GMT

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

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

aa70627a — Mon, 11 Jul 2022 18:40:51 GMT

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

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

VatsalJagani — Mon, 11 Jul 2022 19:10:11 GMT

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

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

aa70627 — Tue, 12 Jul 2022 12:39:11 GMT

@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