Right now I have the following links in my code:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
etc ...
I'd like to make use of the google.com cached copies. I heard google is the best source but please correct me if I am wrong.
Anyway is it possible for me to code my application so it uses code from google if available and locally if not. FYI I am using Microsoft MVC3 and the Msoft cloud servers.
Thanks
Sure, check out how they do it in HTML5 boilerplate.
If you take a look at the bottom of the index.html file within the GitHub repo, you'll see the following...
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="local/jquery-X.X.X.min.js">\x3C/script>')</script>
NB: In the code snippet above X.X.X should be replaced with the jQuery version number that you're using (e.g. 1.8.2).
How does it work?
First, an attempt is made to grab the CDN version (Google's CDN url is used above, but of course you could link to any source you like).
Immediately afterwards, we check for the jQuery global object.
If jQuery does not exist, the obvious assumption is that we didn't manage to get the code from the CDN, so then we document.write a script tag to get a copy from a local source instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")">\x3C/script>')</script>
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 included Qtip2 on my site and used the following snippets while the files are hosted on my own server as mentioned here:
<!-- jQuery FIRST i.e. before qTip (and all other scripts too usually) -->
<script type="text/javascript" src="/scripts/jquery.min.js"></script>
<!-- Include either the minifed or production version, NOT both!! -->
<script type="text/javascript" src="/scripts/jquery.qtip.js"></script>
Though hosted on the same server as the website the script loads the following additional file from the CDN of Qtip2:
https://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.map
This slows down my side extremely:
I could not find any information about this. Any idea how to avoid (if not necessary) or replace and host on my own server?
The final line of the Qtip2 script is a line lke this:
//# sourceMappingURL=http://cdnjs.cloudflare.com/.../jquery.qtip.min.map
Unfortunately the URL currently returns a 404. If you're hosting Qtip2 yourself, you should be able to find and remove that line at the end of the script. Otherwise, don't worry too much because the .map file is only requested when Developer Tools is open. Normal visitors won't download it.
Here's more info on .map files: jQuery's jquery-1.10.2.min.map is triggering a 404 (Not Found)
The *.map file is a source map. It contains informations like function positions of the non-minified source code of Qtip2. Notice that I used the minified version of it on my webpage.
Source maps help to develop with a postprocessed (e.g. minified) source code without losing the ability to look into the code, for example when errors occur.
The chrome debugger as you can see on the image in my question above downloads it by default. After disabling that function in the debugger settings the file won't be downloaded any longer.
Take a look at this video for a short information or this documentation from Google.
Firefox offers the same feature as you can see here.
I have downloaded this plugin from here and the problem is solved!
http://qtip2.com/v/2.2.1/
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/).
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