I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?
Related
I'm trying to integrate a html template in my angular project and everything is going fine except my JS plugins are not loading. I've given the path to the files in the index.html page. The styles are working fine.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Estate</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/themify-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/nice-select.css" type="text/css">
<link rel="stylesheet" href="assets/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="assets/css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
You can import your external JS files in Angular by mentioning them in angular.json file.
Inside angular.json you have to mention your files in scripts array. Make sure you are giving absolute path for the files that are present in the assets.
"scripts": [
"../../../assets/jquery/dist/jquery.magnific-popup.min.js",
"../../../assets/jquery/dist/jquery.min.js"
]
I'm trying to use this emoji plugin in my project. I installed it and I can see it in the node_modules files but I can't load it I get. Failed to load resource: the server responded with a status of 404 (Not Found).
Here is my try
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/memory.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
crossorigin="anonymous">
<!-- How to link them correctely -->
<link rel="stylesheet" href="node_modules/emojionearea/dist/emojionearea.min.css">
<script type="text/javascript" src="node_modules/emojionearea/dist/emojionearea.min.js"></script>
</head>
I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.
I'm trying to use the slider() function of jQuery UI, and keep getting the following error in the console:
TypeError: undefined is not a function (evaluating jQuery('#slider').slider())
I've definitely linked to the jQuery UI javascript and CSS files correctly - when I view the page source, they're all there. Why am I still getting this error?
If it's of any use, I'm using Rails and also some Bootstrap stuff. Here's the javascript code:
<script type="text/javascript">
$(document).ready(function(){
$('#slider').slider();
});
</script>
Thanks
Here's the <head>:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link href="/assets/jquery.ui.core.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.accordion.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.menu.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.autocomplete.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.button.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.datepicker.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.resizable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.dialog.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.progressbar.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.selectable.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.slider.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.spinner.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tabs.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.tooltip.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.base.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery.ui.all.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/application.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap-theme.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/companies.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/jquery-ui.min.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/scaffolds.css?body=1" media="screen" rel="stylesheet" />
<link href="/assets/bootstrap.css?body=1" media="screen" rel="stylesheet" />
<script src="/assets/jquery.js?body=1"></script>
<script src="/assets/jquery_ujs.js?body=1"></script>
<script src="/assets/bootstrap.js?body=1"></script>
<script src="/assets/bootstrap.min.js?body=1"></script>
<script src="/assets/companies.js?body=1"></script>
<script src="/assets/jquery-1.11.0.min.js?body=1"></script>
<script src="/assets/jquery-ui.min.js?body=1"></script>
<script src="/assets/application.js?body=1"></script>
<title>New Company - OE Fort by Oxford Entrepreneurs</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="FcOEJfo8vcCzR+Dq+5zOVSvm7Npfo+R+FoXrEPpV3js=" name="csrf-token" />
<!-- Bootstrap core CSS -->
<link href="../../../app/assets/stylesheets/bootstrap.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<link href="../../../app/assets/stylesheets/jquery-ui.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../jumbotron.css" rel="stylesheet">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#slider').slider();
});
</script>
</head>
I would surmise the error would be caused by loading this function before JQuery is loaded yet (hence why you're seeing the undefined error -- JQuery is undefined)
Can you detail the way you're loading the code? Can you post your <head> tag?
The possible causes could be:
JQuery is not loaded
JQueryUI is not loaded
$("#slider") is not a valid element
The error is related to a missing line in your application.js.coffee file. As mentioned here: https://github.com/joliss/jquery-ui-rails you can require special modules here.
So just add the following line to your application.js.coffee file and it should work:
#= require jquery.ui.slider
Another possible cause, I've just discovered, is when you have two different versions of jquery linked.
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
... (some other bundles), and then:
bundles.Add(new ScriptBundle("~/bundles/ajax").Include(
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/jquery.unobtrusive-ajax.min.js"));
E.g. in my jqueryui bundle, I had jquery-1.10.4.min.js (or rather, the latest version), but in my ajax bundle I had jquery-1.10.2.min.js. Double clicking on the error in Chrome element inspector, revealed links to code in 1.10.2. When I changed that to 1.10.4 in the ajax bundle, the jqueryui element suddenly worked (in my case it was Tabs).
What I should have done, of course, is just leave everything at jquery-{version}.js.
So in summary, a(n overlooked) version conflict is another possible cause for this error.
I know that this will not answer this exact question but it may help others getting the same error message for the slider() function.
If you have preset the value in the slider when initialising it, you could have something like the following:
$('#slider').val(5).slider();
if you remove the value (5), you also get the “TypeError: 'undefined' is not a function”
ie.
$('#slider').val().slider();
instead you would need to insert the starting value into the input tag.
<input type="text" id="slider" value="5">
You may have this kind of setup if the slider is used in many places in your site and you want to have your js file contain the default rather than having each slider contain the same information. In my case I needed to decentralise the value and it caused the error seen here.
In case anyone else runs into this, I had trouble getting selectable to work with asp.net
Turns out I wasn't properly including everything, but this gentleman made it dummy proof:
http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/
try this if you are facing "uncaught typeerror is not a function javascript"
It works
jQuery(function($) {
// your code here
});
I'm trying to use jScrollPane, and I'm getting jQuery is not defined.
We all know the universal answer to this: load jQuery first, however, i'm loading it before, and i'm intializing jScrollPane on $(document).ready() (I'm using jquery, how can it not be there?)
Here's my markup:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans" type="text/css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<script type="text/javascript" url="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" url="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<!-- Jscrollpane so we can style scroll bar cross-browser -->
<!-- styles needed by jScrollPane -->
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<!-- the jScrollPane script -->
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
</head>
And here is my script
$(document).ready(function() {
/* Setting up the dropdown */
var dropdown = new DropdownMenu();
dropdown.run();
/* Setting scrollbar */
$('#dropdown-menu .content').jScrollPane();
});
What may be happening? All I can find around the web is telling me to initialize jquery first, but it is initialized.
Why url attribute instead of src in your script tag reference? I don't think it's a valid syntax.
Ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
Try:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>