I'have been working on a project which totally works on jsfiddle.net . However, when i try to run this project in webStorm, i get two errors.
first :
second :
Before, i post my question here, i searched on stackoverflow but couldn't find any solutions. I already did :
libraries:
and my html codes :
<!DOCTYPE html>
<html>
<head>
<title>Super Mario!</title>
<link rel='stylesheet' type='text/css' href='myMario.css'/>
<script type='text/javascript' src='//code.jquery.com/jquery-1.11.2.min.js'></script>
</head>
<body>
<img src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
</body>
</html>
why did u get these errors although i loaded libraries and succesfully defined source script in my html ? what should i do ?
You need to select this file link and click Alt + Enter to download this file to your library.
Screen from WebStorm:
Seems that you get the error when running your .js file directly, via 'Run file_name.js' in it's right-click menu, right? When doing this you are running it using Node.js. But 'document' can't be used in server-side scripts executed by Node.js. It is only defined in client-side javascript, i.e. when running in the browser via a tag in the rendered HTML, not the Javascript API engine running on the server. BTW, your .js file is not even included in your HTML page, as far as I can see from HTML code snippet...
This is not actually an error... WebStorm can't use remote resources available through CDN links for completion. Once it 'sees' such links, it searches for the corresponding library in ~.WebStorm9\system\extLibs\, and, if matching library is not found, prompts you to download it by showing this warning.
You can either suppress this warning or agree to download the library: hit Alt+Enter and then either hit the right arrow and choose 'Suppress for tag' or hit Enter to download.
Related
I was following the steps and wrote a demo HTML. Here are the steps in the README of https://github.com/commonmark/commonmark.js#commonmarkjs :
For client-side use, you can do make dist to produce
a standalone JavaScript file js/dist/commonmark.js,
suitable for linking into a web page, or fetch the latest
from
https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js,
or bower install commonmark.
Here is my demo HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js"></script>
<script>
window.onload = function() {
console.log(commonmark)
}
</script>
<body></body>
</html>
Here is a JSFiddle URL for my demo: https://jsfiddle.net/y3xohp7x/
I saved this HTML locally in a file named foo.html and opened this local file with Firefox 55.0.1.
But if I load it with Firefox 55.0.1, I get the following errors in the console.
Loading failed for the <script> with source “https://raw.githubusercontent.com/jgm/commonmark.js/master/dist/commonmark.js”. foo.html:5
ReferenceError: commonmark is not defined foo.html:9:5
Questions:
Why does this error occur?
How can I resolve this error without having to copy commonmark.js to the local filesystem?
Is it a bug in the commonmark.js README documentation that I quoted above or is it an error in my understanding of the documentation?
Edit
Actually, there apparently is a way to do this for github content in particular: https://rawgit.com/
This website gives you a link to a version of the script that will be served with the correct MIME-type.
So this should load the script properly for you:
<script type="application/javascript" src="https://cdn.rawgit.com/jgm/commonmark.js/master/dist/commonmark.js"></script>
https://jsfiddle.net/w1uvq59r/
Original Answer
The reason is that the script source is sent back with the headers:
"Content-Type": "text/plain"
"X-Content-Type-Options": "nosniff"
The latter header prevents the browser from executing the script due to the fact that the content-type is not executable, like "application/javascript". Which means unfortunately there is really no way to get the script to load remotely. Here is a thread with more information on a similar problem.
The only solution, as far as I can tell, is to load it locally, like so:
<script type="application/javascript" src="path/to/the/file.js"></script>
I went to the jQuery download page and tried to download the uncompressed version of jQuery, when I left clicked the bottom left download button it seemed to start to download.
Then a dial appeared, which asked for permission to download the file, after accepting, it comes up with the following error:
Error: 'document' is null or is not an object
Code: 800A138F
Origin: Error at the time of running Microsoft JScript
Then tried right clicking the link and using the save as option to save it to the desktop under the filename jquery.js.
However, this failed to load jQuery as well and the same error appears when I try to link it to my website.
This is the filepath I'm using:
C:\Users\Mafe Cardozo\Desktop\jquery.js
And the actual jQuery file that I'm writing the code in to the html file as well is also in the same directory, assuming both links be written in the <head /> element(?)
Just use the CDN which you link to your html file by this line of html in your head tags.
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
This will give you the latest version of the minified jquery. You can choose uncompressed or versions here.
There are many choices for CDNs such as Google. CDNs are from the web and are not local.
Alternatively, download the source here and then save it in the same folder of your html file. This will save the file locally. Then link it like so:
<script src="jquery-file-name"></script>
If you will have access to the internet when you are needing to use Jquery, then just use a JQuery CDN. That way you don't have to worry about downloading the whole library to your computer and making sure it is in the right spot.
Go to a site like this, click on the "copy" tag on the right, and copy the whole script element. Then paste that into your head/end of your body. For more information, look at the following posts about accessing the Jquery library.
Microsoft CDN for jQuery or Google CDN?
Benefits vs. Pitfalls of hosting jQuery locally
Just to add to the other answers, you are trying to access the js files with the https protocol, and apparently, it doesn't work. Just remove the https from the url or change it to http (https://code.jquery.com/jquery-2.2.4.js -> http://code.jquery.com/jquery-2.2.4.js) and it should work.
I have a simple HTML page which calls jquery.min.js
The JavaScript (which includes jQuery functions) on the page runs fine.
However, if I look at Safari's Web Inspector Console, the following error is reported:
http://www.mydomain.com/js/jquery-1.10.2.js
Failed to load resource: the server responded with a status of 404 (Not Found)
If I create an un-minified version of jQuery and save it as jquery-1.10.2.js, then the error message goes away.
Does jquery.min.js require the un-minified version of jQuery to reside in the same folder?
Update
Here is the HTML in its entirety. As you can see it is very simple:
<!DOCTYPE html>
<html>
<head>
<title>My Homepage</title>
<script src="/js/jquery.min.js"></script>
<script>
$ (document).ready(function() {
$('body').css('background-color', '#f00');
});
</script>
</head>
<body>hello world</body>
</html>
You are trying to load
http://www.mydomain.com/js/jquery-1.10.2.js
somewhere in your project. Search for jquery-1.10.2.js in your root folder and modify all the occurrences to valid paths.
This seems to be a "feature" of Safari but I could not find any reference to it in the documentation. If it cannot find the unminified version of .js file, it will beautify to make it easier to debug. It is similar how Chrome checks for the .map file of a minified JavaScript file but Safari goes further and tries to load the same file without the ".min" part.
Apparently there is no way to disable this feature, at least we could not find one.
For some reason my html file's request for my jquery.js file fails, however when I enter that exact url into a new tab in the browser, I get the exact jquery.js file I am trying to get when the website loads.
My code is as such:
<script src="js/jquery.js"></script>
and my website is here. If you append jquery.js to the root, you will see the exact file.
Can anyone explain why the file isn't properly retrieved when the website loads?
Any help is greatly appreciated.
At the beginning of your HTML file is this:
<!DOCTYPE html>
<html manifest="appcache.appcache">
The appcache.appcache refers to the file appcache.appcache whose content is:
CACHE MANIFEST
# V1.65 1-18-2013 10:15 PM
# cache
index.html
about.html
services.html
contact.html
css/signika.css
css/mq.css
css/index.css
css/about.css
css/services.css
css/contact.css
assets/signika_400.woff
assets/signika_600.woff
js/html5.js
js/index.js
js/mq.js
js/services.js
mail.php
images/chicken.png
images/salad.png
images/soup.png
images/steak.png
images/wontons.png
As you can see jQuery.js is not there. I suggest you to add js/jQuery.js into a new line and try again.
I figured this out by:
Running the Fiddler software side by side with Chrome (on Windows).
Loading your website in Chrome with Developer Tools (Ctrl+Shift+I on Windows, Command ⌘+Option ⌥+I on Mac), then go to the Network tab.
Then I see that Chrome loads appcache.appcache from the second time onwards and there's an error when loading jQuery.js.
The manifest attribute refers to the HTML5 cache manifest file.
Tutorial:
http://www.html5rocks.com/en/tutorials/appcache/beginner/
More references:
http://caniuse.com/#search=manifest (browser compatibility)
http://en.wikipedia.org/wiki/Cache_manifest_in_HTML5 (wiki)
https://www.google.com/search?q=html5+manifest
It's probable that the HTML file containing the script header in question is not in the "root" but perhaps in the same JS folder or somewhere else.
So technically this should work:
<script src="/js/jquery.js"></script>
Just keep in mind that this path is relative.
In the VS2010 IDE when a breakpoint (or an error) is hit, it opens a read-only [dynamic] version of the external JavaScript file I referenced. My workflow would be vastly improved if I could immediately edit this file, and refresh the browser. That is as opposed to digging up the original JS file opening it, finding the correct line and editing there.
I only know that this is possible because I was able to do this on my old work computer configuration, but for the life of me I can't duplicate it at home.
Has anyone made this work? Perhaps an extension? or maybe it has to with the way the files are referenced, or my basehref tag, or url rewriting.
This happens when the base href specifies a domain other than localhost. My issue was that to enable a local environment for Facebook JS, I need my domain in the url. So I set up my host file to remap localhost.mydomain.com to localhost.
When the Visual Studio IDE encounters a file reference which is something other than localhost, it does not attempt to grab the local file since it assumes (correctly in most cases) that it is being served from another site. In these cases it loads a file as [dynamic] and readonly.
Here is the test case:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://localhost.mydomain.com/virtual-directory/" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
</html>
Any breakpoint within test.js will result in opening a readonly dynamic file.
how are you referencing your files? whenever a script block is written inside the html or is dynamically inserted the debugger will open the instance of the page where the code stops. If you reference the script using tags vs should open the original script file (at least that's what it does on my machine). could you upload an example of your current structure?