I have a jquery cdn loading from the following:
<head>
.
.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
then in the body I have my source for my script
<body>
.
.<script src="app.js"></script>
</body>
This is all on local, but when I view in browser I keep getting the following errors in console:
GET file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Uncaught ReferenceError: $ is not defined
I assume this is saying the jQuery function "$..." is undefined because there is an error in GET of the CDN, why would this be happening on local?
You aren't actually running on localhost (http://localhost) but on the local file system (file:///path/to/whatever.html). The protocol is copied with the // link to file://ajax.googleapis.com which of course doesn't exist.
You should set up a server on your computer so that you'd have an actual localhost accessed with the http protocol. It would have other benefits as well since browsers act a bit differently also in other regards when the page is loaded directly from the file system.
Have you tried removing the "//" at the beginning of the "src" attribute and instead using "http://"? It is probably appending "localhost" to the beginning of the URL because of those slashes.
I've answered a similar question in How to use Bootstrap CDN? and, as Juhana said, the problem is the missing protocol when loading jQuery.
The protocol-less CDN works when you are using http or https, because browsers will add the prefix to the jQuery URL with it.
But when using a local html file, the missing protocol will be file: and browsers will not be able to find jQuery in something like file://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js failing to load it. In that case you must add the protocol manually, which is a pitty if you finally use the page on-line because a protocol-less URL is better and more cache friendly (http://encosia.com/cripple-the-google-cdns-caching-with-a-single-character/).
Related
I need your help with a strange problem.
The company I work for has a company website.
I have been updating pages on their website the last couple of days.
After updating, I decided to upload the website,
but suddenly the javascript doesn't work anymore.
I get the following error when I press f12
Uncaught SyntaxError: Invalid or unexpected token
base.js:1 Uncaught ReferenceError: $ is not defined
at base.js:1
On the test server (my own server) it works without any problems.
On the main server (company server) it doesn't work.
What could be the issue for this?
It's not on just one page, it's on every single page that the Javascript doesn't work.
[update]
I know about the different versions of Javascript.
This is already fixed in the testing environment of the company website.
This still doesn't fix the current problem.
Thank you
Wesley
On the test site you use jQuery 3.3.1:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
On the main site you use jQuery 1.10.1:
<script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
Please both use v3 if you don't have specific needs.
It looks like you are using jQuery for your JavaScript code.
The header of the first page contains a tag for loading jQuery:
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
But on the second page, you never load jQuery.
As I don't know how the file structure of your server is, I cannot tell you the exact path, but you need to make sure you load jQuery in a similar way on your company website.
EDIT:
I noticed that you load jQuery from https://www.aska-ltd.jp/js/jquery-1.10.1.min.js. However, this file is not the original file (compared to https://code.jquery.com/jquery-1.10.1.min.js using MD5). If you want to use this old version (not recommended), you can try to re-download it or simply load jQuery in its latest version from its official server (recommended).
As #NoobTW and #SapuSeven have said, there is an error in the jQuery script on the production site.
On the production site, try replacing this <script src="https://www.aska-ltd.jp/js/jquery-1.10.1.min.js"></script>
with this <script language="JavaScript" type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
Also, if you load jQuery from a CDN, it may help simplify things. Here is one option for jQuery 3: <script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
See here for more options: https://code.jquery.com/
JQuery never loads at all on the main server. I tried taking the code from the file on the server and evaluating it, but discovered some sort of corruption in the JQuery file your server is returning:
If the same thing happens with an updated version of JQuery, check whether it’s also corrupted. It may be some sort of transformation the server is incorrectly performing.
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 an HTML page generated by an objective-C application and I want to load and open it in a local directory (not in a web server). The javascripts jquery.js and jquery.plot.js are stored in the same directory before the page is loaded.
I made the HTML page by following closely the examples available on http://flot.googlecode.com/
The scripts are declared in the HTML page as follows :
<script src="jquery.js" language="javascript" type="text/javascript"></script>
<script src="jquery.flot.pack.js" language="javascript" type="text/javascript"></script>
When I open the page, the expected graph (generated by the scripts) doesn't show up and I have the following syntax error in the javascript console :
Uncaught SyntaxError: Unexpected token ILLEGAL
The script source in the javascript console is made of strange (chinese ?) ideograms which are obviously "unexpected token" if it is what the browser sees.
I have the same problem with Chrome, Firefox and Safari.
The problem is not systematic because sometimes, it works !.
I have made tests with files prepared manually and again it works sometimes only.
I have also copied the same file which didn't work in another directory where the jquery scripts were present and, surprise, it worked ! but not always...
I have exhausted all my ideas on this problem and your help will be very much appreciated
Did you copy the JavaScript from an external source? I know I have had problems when copying from JSFiddle for example. Try removing any whitespace and see if that will get rid of the illegal token error.
I just had this problem and it was because the server on which my javascript was being hosted wasn't configured to send the javascript file with the correct MIME type. See this question.
Instead of fixing my server, I just opted to use a CDN path from cdnjs.com:
//cdnjs.cloudflare.com/ajax/libs/flot/0.7/jquery.flot.min.js
I use jQuery in my web project.
When I use local reference like this;
<script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
I receive this error:
$ is not a function
but when I use the Google reference in my project like this
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
Everything works fine.
It is noteworthy I use telerik component in my project.
It looks like the problem is simply that the relative path for the import is incorrect. Hence it's not loading jQuery and the call to $(document).ready is undefined.
You need to correct the path to the Scripts folder.
most probably ur not loading jquery right
Take these steps :
use developper tools in your browser (my favorite is firebug for firefox)
go to the scripts tab and check if jquery.js is there
if its there and its empty, check the url, maybe ur relative path is incorrect. to verify it you can put the url in your browser and fix it until the js file loads
I'm developing a small application with HTML, CSS, Javascript, JQuery and JQTouch.
This is a LOCAL application. I've an index.html with some div's. When I click on a link in this file, I want to load HTML code of page1.html (same folder) and insert into a div of index.html the tag that I want of page1.html.
Example: Inject the content of (page1.html) into (index.html).
I try: http://api.jquery.com/load/
$('#loadContent').load('page1.html #test');
And the content of loadContent doesn't change. I include JQuery script into index.html...
I try http://api.jquery.com/html/ too, but I think it connect to the server.
Any idea? Thanks!
Make sure you're calling it after loadContent has been created. The following will run your load code when the document is ready to be written to.
$(function() {
$('#loadContent').load('page1.html #test');
});
Or you could run a local server. If you have python you can go to your directory with the files and run python -m SimpleHTTPServer for python 2.7 or python -m http.server for python 3.x
Most browsers will, by default, block this on a local file system as a security precaution. Have you tried it on a remote server?
I dont know much on jQuery. But still, you can do this, by loading the page1.html to a hidden iframe, then get the document.body.innerHTML of this page, and then append that node to the div you need. Its only HTML DOM in JavaScript.
But performance base, loading an iframe is always a costly one. This would do your job. However there may be many solutions in jQuery or other libraries, Sorry i don't know much on it.
It sounds like the problem is that the jQuery library isn't loading when you're running on localhost, or the AJAX request is failing for the same reason. This is due to protection built into the browser to prevent cross-site scripting.
See this "additional note" from the documentation for load:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
If you use any AJAX, you'll have to run this on a local web server. In which case you should just run this page from your local webserver rather than from the filesystem. Then you won't need any workarounds.
If you're on Windows, you could use UniServer.
If you aren't going to use any AJAX whatsoever (aren't using load), then you could write your code so that it falls back to a local version of jQuery if the remote version didn't load.
Here's an example of how, grabbed from this page:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="/Scripts/lib/jquery/jquery-1.4.4.min.js"></script>'))</script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>!window.jQuery.validator && document.write('<script src="/Scripts/lib/jquery/jquery.validate.min.js"></script>')</script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
<script>!window.jQuery.validator.unobtrusive && document.write('<script src="/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js"></script>')</script>