Are you a member of the Splunk Community?
- Find Answers
- :
- Apps & Add-ons
- :
- Splunk Development
- :
- Splunk Dev
- :
- How to bundle and reference jquery-ui library in S...
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark Topic
- Subscribe to Topic
- Mute Topic
- Printer Friendly Page
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
How to bundle and reference jquery-ui library in Splunk
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?
- Mark as New
- Bookmark Message
- Subscribe to Message
- Mute Message
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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.
CX Day is Coming!
Strengthen Your Future: A Look Back at Splunk 10 Innovations and .conf25 Highlights!
Now Offering the AI Assistant Usage Dashboard in Cloud Monitoring Console
