How do I load local jquery and jquery-ui library f...

aa70627 · ‎07-08-2022

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>

VatsalJagani · ‎07-09-2022

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

aa70627a · ‎07-11-2022

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

VatsalJagani · ‎07-11-2022

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

aa70627 · ‎07-12-2022

@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

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

javascript

Continuing Innovation & New Integrations Unlock Full Stack Observability For Your ...

Monitoring Amazon Elastic Kubernetes Service (EKS)

Cloud Platform & Enterprise: Classic Dashboard Export Feature Deprecation