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!

Leveraging Automated Threat Analysis Across the Splunk Ecosystem

Enhance Security Operations with Automated Threat Analysis in the Splunk EcosystemAre you leveraging ...

Splunk Developers: Go Beyond the Dashboard with These .Conf25 Sessions

  Whether you’re building custom apps, diving into SPL2, or integrating AI and machine learning into your ...

Index This | How do you write 23 only using the number 2?

July 2025 Edition Hayyy Splunk Education Enthusiasts and the Eternally Curious!  We’re back with this month’s ...
Top