Archive

How to bundle and reference jquery-ui library in Splunk

Path Finder

I am trying to figure out how to load the jquery-ui library into my splunk app and reference it in my Splunk dashboard html. I am not trying to make a call to the jquery site to reference their code - I need to refer to it locally as I cannot make external calls from my server. I downloaded the zip jquery-ui, and I have unzipeed into /appserver/static folder.

I am pointing to the jquery-ui code in my dashboard html like such:

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Correlation Overview Clone_new_test HTML</title>
    <link rel="shortcut icon" href="/en-US/static/@4423A06D4EA5E64AEACE49570D027CE8170238F078939E98BA42D5F5CC20FDC4.103/img/favicon.ico" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/build/css/bootstrap-enterprise.css" />
    <link rel="stylesheet" type="text/css" href="{{SPLUNKWEB_URL_PREFIX}}/static/css/build/pages/dashboard-simple-bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1/jquery-ui.min.css" />
    <!--Or should it be: <link rel="stylesheet" type="text/css" href="appserver/static/jquery-ui-1.12.1/jquery-ui.css" /> -->
    <style>
        #accordionpanel { 
            background-color: inherit;
        }
    </style>
</head>

I have also pointed to my library here as well:

require.config({
    waitSeconds: 0, // Disable require.js load timeout
    // For this tutorial, download third-party libraries over the internet. 
    // In practice, it is recommended that you bundle dependencies with your app.
    paths: {
        'jquery-ui': 'jquery-ui.min'
    },
    shim: {
        'jquery-ui': {
            deps: ['jquery']
        }
    }
});

I get the following errors in my browser console:

GET https://------------:<port>/en-US/app/<blahh ballh>/jquery-ui-1.12.1/jquery-ui.min.css 500 (Internal Server Error)
VM98:1903 GET https://-----------:<port>/en-US/static/@59c8927def0f.103/js/jquery-ui.min.js 
req.load @ VM98:1903
load @ VM98:1647
load @ VM98:828
(anonymous) @ VM98:814
(anonymous) @ VM98:132
execCb @ VM98:1658
check @ VM98:874
enable @ VM98:1151
init @ VM98:782
(anonymous) @ VM98:1424
VM98:166 Uncaught Error: Script error for: jquery-ui
http://requirejs.org/docs/errors.html#scripterror
    at makeError (eval at module.exports (index.js:1), <anonymous>:166:17)
    at HTMLScriptElement.onScriptError (eval at module.exports (index.js:1), <anonymous>:1689:36)

Any ideas on the error I am making when referencing the bundled jquery-ui library locally?

0 Karma

Path Finder

Hi,

If you need to refer to the local library in splunk means,
1. U need to keep the library file at {splunk_path}/etc/apps/{your app name}/appserver/static/
2. Give reference of this library as a url path of your app like: https://localhost:{port_no}/en-GB/static/app/{your app name}/
3. Include js file like <script type="text/javascript" src="https://localhost:{port_no}/en-GB/static/app/{app_name}/file_name.js"></script>
I think this will help you.

0 Karma
State of Splunk Careers

Access the Splunk Careers Report to see real data that shows how Splunk mastery increases your value and job satisfaction.

Find out what your skills are worth!