In order to use jQuery, do I have to use the following reference in my html?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
What if my server does not have an internet connection?
Use this code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">window.jQuery || document.write('<script src="/res/jQuery/jquery-1.7.1.min.js"> \x3C/script>');</script>
This will try to download from the CDN, or otherwise use the local one. You must download the local one first though.
It will not work if you don't have internet connection.
To work locally you should copy jquery.js to your local directory and give relative path.
<script src="/jquery/1.5/jquery.min.js"></script>
It is not specifically for this case, but I think you should definitely understand how Client-server works. Also, you should understand what is Client-side scripting.
You would then understand that you (your browser) need to be connected to Internet in order to be able to reach the http://ajax.googleapis.com domain.
If you want to work with it locally, without ever reaching Internet, then download jQuery locally, and refer to it in your script tag.
Download the latest jquery file:
http://code.jquery.com/jquery-1.7.1.min.js
And save it to you project. It will now be available locally so you can reference it like this (only an example):
<script src="/path-to-your-jquery-file.js"></script>
It does not matter if your server has or has not connection to internet. Only the browser which tries to access page from said server need connection to internet. Server just needs to be "visible" from this browser in question.
It might be better, if you understood the basics of how internet works, before you start playing in developers.
Related
I've created a website that uses 'http://code.jquery.com/jquery-latest.js' for some javascript animations. I've hosted my website on AWS S3, but it seems like the animations aren't working. I believe it has something to do with CORS and allowing it use the jquery link, but I may be wrong. Any advice? Sorry if I'm not using the terms correctly, am just learning all of this. Please let me know if theres more information required to answer, I'll gladly update the question with it.
I have this statement at the end of my html code.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="assets/js/nav-main.js"></script>
Maybe your AWS S3 doesn't have access/permission to every link/Web from server, due to which jquery is not loaded. Download jquery file Download jquery and try using this downloaded file in code.
I'm trying to use socket.io for the browser. The problem is that I have no idea how to get it.
I'm following this tutorial (http://buildnewgames.com/real-time-multiplayer/) and there, they use <script src="/socket.io/socket.io.js"></script>. The problem is that this file doesn't exist and on the webiste of sockeit.io, there's no download for it.
When I update and reset my web project, client browser were unable get the newest js files.
So how to solve this problem.
I will appreciate that you can give me some advice
First, check your js file had updated in tomcat.
if the file is newest in tomcat.
The reason is the broswer cache.try to clear the brower cache.
If you use chrome,you can try this:
I usually use a chrome plugin to clear cache,The plugin named Clear Cache,you can find this plugin in chrome webstore.
or load js file like below
<script>
document.write("<script type='text/javascript' src='/js/test.js?"+Math.random();+"'></script>");
</script>
I wrote code for dropdown Menu and want to insert that code in other html files.
DropDown Menu code.
http://jsfiddle.net/techspartan/49Bpb/
For inserting the above HTML code into other HTML files I am using this code:
<html>
<head>
<script src="jquery-2.0.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#topdiv').load('index.html');
});
</script>
</head>
<body>
<div id="topdiv">
</div>
</body>
</html>
Basically I want to declare my DropDownMenu code at one location so that if I make changes in menu code than I don't have to edit every HTML file that has the DropDown.
The above code is working in Firefox but nothing is shown in Chrome and IE-10.
Are you working locally on your machine, without any webserver? Chrome does not allow loading files via AJAX from your file system (see bugreport).
You may use XAMPP or something similar to serve your files via a local webserver.
If you are on Windows, XAMPP is probably the easiest way to get your local webserver up and running: http://www.apachefriends.org/en/xampp.html
On Mac, you may also use MAMP http://www.mamp.info/en/index.html
You may also force Chrome to allow local file access on Windows if you are starting it with --allow-file-access-from-files, more information in this stackoverflow question
For what it's worth, I have code that uses jQuery().load() to inject content into a page, and it work just fine.
If this is static content that is meant to be a standard part of your page, then the other answers/comments saying to do it on the server are probably right; stuff like that is generally better to be included on the server, because it will make your site perform a lot better than doing it on page load via Javascript. (in fact, loading a static menu this way is likely to give your site a noticable performance problem when users load the page; be warned!).
However in general the technique of dynamically adding content to a page using Javascript is perfectly valid, and commonly used, so I'll answer the question based on that.
There's nothing that I can see that's specifically wrong with the minimal example you provided, except for a missing Doctype, so I'm going to guess that's probably your issue:
If you don't have a doctype, the browser will render the page in Quirks mode. And jQuery is not designed to work in quirks mode.
Solution: Add the following line to the top of your code and try it again:
<!DOCTYPE html>
You may also want to check that IE isn't showing your page in compatibility mode as well, because that might also cause problems. If it is, you could also add an X-UA-Compatible meta tag to your page's <head> section to force IE into standards mode:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Finally, if you need to support IE8 or earlier, you should switch from jQuery v2 back to the latest release of jQuery v1 (currently 1.10.2), as jQuery v2 does not work with IE8 and earlier.
Hope that helps.
The issue you are having is not due to anything wrong with your code, but with security policies of modern browsers. Here's what happens on your development machine:
Your browser loads your local HTML file.
Your browser executes the javascript, which tries to access a file on your machine.
Your browser says, "NO!" Because this is a huge security error - without this policy websites could read through every file on your hard drive or silently send copies of any of your private information to their servers, just because you visited a site with javascript enabled. BAD!
There are some ways to try to tell your browser "No, it's ok, I want to allow this..."...but you know, this has become exceedingly difficult as it often silently breaks with new browser versions. I've slammed my head against the wall way too often, so I might suggest you skip trying to make your browser OK with what you are trying to do.
Now, why does this work on a live site? Here's what happens.
Your browser loads a website.
Your browser executes the javascript.
The script asks for a file to be loaded/accessed from a website.
Your browser says..."well, we're already on this website, so sure! Load all the files you want from that web server!" And your browser kindly gets the file, and returns it to your script, where you can painlessly include the HTML to your hearts content.
To make this work on your development machine, you have ultimately 3 choices:
1) Upload the files to a web server, then do your testing there.
2) Make your own "localhost" web server. You then access your site with something like localhost/index.html - etc. This is just enough to prevent the browser from shutting down your file load requests, because you are requesting an HTTP operation, note a FILE operation.
3) Try to force your browser to allow these requests. Details vary by browser, some browsers won't let you do this at all, and I've given up on doing this myself.
The hidden 4th choice is using HTML5 File System features, but with such poor support for technology I suggest you not even try it - the bug you are facing is purely with your development machine, so changing the technology you are using purely for a minor development convenience seems silly.
Severin provides links to the excellent XAMPP and MAMP software packages, which are the easiest way of getting yourself a good development localhost server.
I would like to know which solution is the fastest and the best for my web pages between importing a javascript file from an external source and internally. Which pro and cons for each solution.
For example, which one is the best:
< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
or
< script type="text/javascript" src="../jquery.js"></script>
(same for json2.js)
I could not find any tips on google
Thanks!
The main benefit of using a CDN (Content Delivery Network) is that given their widespread use, the chances are your visitor may already have a cached copy of the script you're trying to load on their browser. This will completely negate any loading time. If they don't have a cached copy, the chances are the CDN would deliver it to them faster than your server could anyway. In my opinion it's best to use a CDN where possible.
Even with that in mind, CDN aren't infallible, and you don't want your site to rely 100% on someone else's server. I'd advise on having a local copy of your scripts and use those as a backup where possible. For jQuery, this is quite easy:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/Scripts/jquery-1.7.1.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
Other libraries may vary in their methods for testing if they're loaded, but the idea is the same.
It's also worth noting that if you are loading from Google's CDN ALWAYS use the full version number otherwise the script will not be cached.
That is to say if your request URL looks like this:
"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" // highest 1.4 version (1.4.4)
"http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" // latest version (1.7.1)
The expires header is set previous to the current date, so the effect of caching is nullified.
More info on this here
If you import javascript from http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.jsimprove data access, Google has CDN that means deliver content more efficiently to users (depend on their location).
Read more about CDN:http://developer.yahoo.com/performance/rules.html
The fastest is definetely from your own server, at least in most cases(that is in pure download speed).
However, there is a much greater chance that a visitor has Google's version of jQuery already cached in their browser from visiting another site using the same library, and as such it probably makes more sense using the Google API for the most common libraries, as that would be much faster if the library is cached compared to having to download it from your server.
Also, these days you can do this, and request the version by just using the first number :
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
And automagicly get the latest version ;)
Using a CDN has some advantages:
If the user has already visited another site that uses the same script from the same location, they may have it in the browser cache already. The page loading speeds up when they don't have to re-download it.
The CDN provider probably has the server set up to maximize the efficiency of serving the scripts, for example by sending the file from a server physically closes to the user.
You save bandwidth.
The disadvantages:
You are dependent on the service provider: if their service is down, your site breaks. (This can be helped by serving a local copy of the file if the external script couldn't be loaded.)
You have to trust the service provider for serving the correct file and nothing malicious.
If it is some known resource like googlePlusOne or another stable web service (or external ad), it is better to use external link. This way it will always be up to date.
If it is a library js (like jQuery or Ext) it is better to download the source.
Loading libraries from a local repository will always be faster which would suggest that local is always better, however... Loading libraries from external sources, for example jQuery, will allow your site to always load the most up to date version of the library.