I have my jquery datetimepicker api files Webcontent/js folder.I am referring to the resources like in the code.
<script type="text/javascript" src="js/jquery.datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery.datetimepicker.css"/>
But the browser fails to load those resources and moreover its showing the wrong file type in network tab like this.
jquery.datetimepicker.js GET(canceled) text/html
jquery.datetimepicker.css GET(canceled) text/html
Can someone tell me what went wrong here ? I am using spring mvc.
Related
I'm actually working on Niagara4 and I need to create a web page to see live information from my server. I'm working with HTML5, CSS, JavaScript, Jquery, Require and BajaScript(JavaScript Framework working only on Niagara).
I've tried to put type='application/javascript' or type='text/javascript' to define JS and CSS(type='text/css') file. Did nothing.
i've also heard about sniffing but i don't know much about it.
<head>
<title>Tableau de gestion</title>
<meta charset=utf-8" />
<link rel="stylesheet" type="text/css" ng-href="my/path/to/myStyle.css" />
<script data-main="JS" src="my/path/to/require.js"></script>
<script type="application/javascript" src="My/path/to/baja.js"></script>
<script type="application/javascript" src ="My/path/to/jquery.js"></script>
<script type="application/javascript" src="My/path/"></script>
</head>
When I want to load it on Chrome or Firefox, HTML tags are put into my CSS and js files turning it impossible to read for my browser, creating a "SyntaxError: Expected expression, got '<'."
Also, I've got a "The script from “http://watsonniagara/prelogin” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type." for Firefox and "Cross-Origin Read Blocking (CORB) blocked cross-origin response http://watsonniagara/prelogin with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details." from Chrome.
(Do I really need to precise that I expect my CSS and JS files to NOT have HTML tags ?)
This is my sample site published on GitHub using GitHub pages, using Jekyll. The map you see in the site is supposed to be interactive for all the states, as shown in this fiddle, which shows how the map is supposed to work.
The main Javascript file used here is jquery.imagemapster.js
The HEAD of my code is:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
...
</head>
Or you can simply see my code present in the repository used to publish the site.
Things I've tried:
Putting all the images and the script in a folder named asset, and linking to the resources. That didn't work at all. No image was displayed.
Putting the resources in the root folder. This is what I've done. The images are displayed properly, but the script still isn't working.
To check the linking, I copied the 4k lines of code into a <script> tag pair, inside the head. That didn't work as well.
Eventually, the local building of the site using Jekyll, works perfectly. What am I doing wrong here?
jquery.imagemapster.js is loading fine, the problem is in the way you are loading the libraries:
Mixed Content: The page at 'https://mooncrater31.github.io/infer/#'
was loaded over HTTPS, but requested an insecure script
'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'.
This request has been blocked; the content must be served over HTTPS.
This prevents your site from using JQuery in modern and popular browsers (aka: Chrome) and that is why it runs fine locally, it runs without https.
To solve it just load them with HTTPS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagemapster.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I'm working on a project where I'm trying to allow me to upload weather data from an .xls file to an SQL database. It's my first time using Angularjs so I used a tutorial and everything seemed to work fine.
My code is:
<head>
<title>.: Import Data with AngularJS :.</title>
<meta charset="utf-8" />
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\jquery-
1.10.2.min.js"></script>
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\angular.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-
route.min.js"
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\bootstrap.min.js">
</script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.cs
s">
<script type="text/javascript"
src="C:\Users\Bryan\source\repos\Weather\weather\Scripts\ImportData.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.5/xlsx.full.min.js">
</script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.5/jszip.js"></script>
Everything goes well but I get the following errors:
ImportData.html:7 GET http://localhost:9000/Content/bootstrap.min.css
net::ERR_ABORTED
ImportData.html:1 Not allowed to load local resource: ImportData.js
angular.js:88 Uncaught Error: [$injector:modulerr]
at angular.js:88
at angular.js:4957
at p (angular.js:410)
at g (angular.js:4917)
at gb (angular.js:4839)
at c (angular.js:1949)
at Uc (angular.js:1970)
at xe (angular.js:1855)
at angular.js:33826
at HTMLDocument.b (angular.js:3468)
I've read that bootstrap and angular can conflict, but take it out and it still seems to error out. Any ideas where the error is? Thanks in advance.
Your files are not able to fetch by the browser from the mentioned locations. So better way to give relative paths i.e. "../../ImportData.js".
Also It shows injector module error that means, Angular file is missing and its module is not able to find the libraries.
You can try replacing all the file paths with as well. Also this http://localhost:9000/Content/bootstrap.min.css
net::ERR_ABORTED
is due to the internet failure or due to your firewall restrictions. So, you can replace this with "https" instead of 'http'.
Try these options. There's problem with file links only.
The problem is that you are trying to load resources from your local computer. Try giving path as relative that will solve your issue. Also use base url in html if you want to control base url for all requests from your app.
I published my solution on vs 2010.
Examples of references to style sheets and js files(first method):
<link href="../../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
These work fine while debugging. But while browsing on iis 7 the resources fail to load. In my other applications I have used(second method):
<link href="~/Content/CSS/Login.css" rel="stylesheet" type="text/css" />
and this works fine both during debug and browse on iis.
The URL of the view page is:
http://localhost/LaunchLogin/
The error on console:
Failed to load http://localhost/Content/css/Login.css resource: the server responded with a status of 404 (Not Found)
It should search for the file in:
http://localhost/LaunchLogin/Content/css/Login.css
Can anyone explain how iis tries to access the resources? Also how can I configure iis or publish in such a way that the first method works on iss browse?
Using ~ base path has no problem and the best(and as you said; work perfectly), but if you still need relative path try with these tags, I remove one directory up path.
<link href="../Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
BTW,
if your URL is http://localhost/LaunchLogin/ and your css file is in http://localhost/LaunchLogin/Content/css/Login.css then your code for linking css should be:
<link href="Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
If you wish to do, then the next best method is to use absolute paths in CSS and JS linking. You can use following trick to do so:
Create a public static class with one variable: public String absRoot='http://localhost/LaunchLogin/'; and set it to whatever the root of your website.
Now link CSS and JS like following:
<link href="<%=StaticClassName.absRoot %>Content/CSS/Login.css" rel="stylesheet" type="text/css" />
<script src="<%=StaticClassName.absRoot %>Scripts/ApplicationSecurity/AuthenticateUser.js" type="text/javascript"></script>
After that whenever you need you can change absRoot value at one place only.
I keep getting the following error on the debug console on chrome
[blocked] The page at https://myURL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css.
[blocked] The page at https://URL/canvas ran insecure content from http://connect.facebook.net/en_US/all.js.
[blocked] The page at https://URL/canvas ran insecure content from http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js.
these are the js scripts attached to the head
THis is a facebook app that makes GET request to my own server , This was working and Just stopped working without any change in my code ! I am not sure if Facebook is blocking my requests.
These errors happen when loading scripts and other external resources (such as images) on other domains via HTTP when the main page (which is your Facebook app, in your case) is loaded via HTTPS.
Look in the code of your app, use protocol relative URLs when calling external scripts. For example, instead of this:
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Do this:
<script src="//connect.facebook.net/en_US/all.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css">
Edit: Note that if protocol relative URLs are used on stylesheets, IE7 and IE8 will download it twice:
http://paulirish.com/2010/the-protocol-relative-url/