Splunk Dev
×

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 to bundle and reference jquery-ui library in Splunk

jzapantis
Path Finder
‎03-24-2017 12:08 PM

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
Reply

sumangala
Path Finder
‎09-04-2017 02:10 AM

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
Reply
Register for .conf25!
Get Updates on the Splunk Community!

Security Professional: Sharpen Your Defenses with These .conf25 Sessions

Sooooooooooo, guess what. .conf25 is almost here, and if you're on the Security Learning Path, this is your ...

First Steps with Splunk SOAR

Our first step was to gather a list of the playbooks we wanted and to sort them by priority.  Once this list ...

How To Build a Self-Service Observability Practice with Splunk Observability Cloud

If you’ve read our previous post on self-service observability, you already know what it is and why it ...
Top