I have the following jQuery CDN fallback on a test page. I am testing locally with chrome and IE. The CDN is not loading. If I use the http:// in the CDN it loads, but if I remove it and just use // This makes no sense to me. If the script doesn't load the conditional statement should load it locally, but it's not. If I replace the
document.write('<script src="/scripts/jquery-2.1.1.min.js"><\/script>')
with
document.write('undefined')
then I get the word undefined on the page after about 5 seconds. Am I not scaping properly? Here is my html page:
<!DOCTYPE html>
<html>
<head>
<title>jQuery</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
(window.jQuery || document.write('<script src="/scripts/jquery-2.1.1.min.js">
<\/script>'));
</script>
<script>
$(document).ready(function() {
alert( "welcome" );
});
</script>
</body>
</html>
You may be loading the page using the file:// protocol. The exact meaning of the // protocol is "use the same protocol that I am using". If you are looking at file://C:/Users/Me/test.html, then your //ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js becomes the URI file://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js which is not a valid file path on your computer. If you want to test locally you need to either use the http:// protocol in the link or host the project on IIS or apache on your box.
Related
I've tried including it in my files, and from a CDN. I followed a tutorial about it, although it's hardly a tutorial to follow since all i had to do was include the link after <head>. Still, it's not being recognized and plugins aren't being recognized and just appear as text. Does anyone have an idea what could be the problem? If it's perhaps a setting in dreamweaver that has to be changed?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link href="myfirststylesheet.css" rel="stylesheet" type="text/css">
<title>Hallo wereld</title>
</head>
</html>
Its worth noting that, http or https in src hinders the inclusion of the cdn files at times.Remove the protocol and try this way....this way, it would take either http or https depending on the nature of hosting server
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
EDIT
Further Read on why this helps ( if not running the file from computer but through some server, even localhost):
Can I change all my http:// links to just //?
http-and-https-with-google-cdn
I am trying to load a txt file using jquery in Chrome. Why it does not work? I have copied this code snippet from w3schools, and all i have changed is their url.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("http://stackoverflow.com/questions/15114993/how-to-embed-a-file-in-html-using-jquery-load");
alert("clicked");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
</html>
Chrome throws the following error when executing your code:
Origin null is not allowed by Access-Control-Allow-Origin.
You must:
Host your HTML code on your local web server, so that it is accessible at:
http://localhost/your_directory/index.html
Update your code to load your out.txt, placed in the same folder where your index.html file is, like this (using relative paths)...
$("#div1").load("out.txt");
...or like this (using absolute paths):
$("#div1").load("http://localhost/your_directory/out.txt");
And you are done! :-)
Ok the issue you are probably having here seems to happen allot with chrome and ajax requests. Chrome throws a security issue if running locally try putting your code on a web server, or try firefox.
Or if your on a mac you can open chrome using like this from the command line to prevent the security issue
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files
There are loads of posts on google if your search for "allow file access from files chrome"
Good luck
My code is like this. But it is not working on any browser. this code has been copy-pasted from w3scools. Same is the condition with my other codes.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
I don't know if this will work, but try adding http: to the beginning of your link reference. Additionally, as others have pointed out, close your <html> tag.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
Another thing I would suggest, is using jQuery's CDN for jQuery hosting. The URL's a lot shorter, and it gets you the latest version without having to define the version:
<script src="http://code.jquery.com/jquery.min.js"></script>
However, I see you're using version 1.8.3, which could be for a specific reason, so just add the version you want after jquery in the url. jquery-1.8.3.min.js.
The link to your jQuery script is not working. Replace it with:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
Instead.
It wasn't working for me with the old link, but after replacing it with the other link it worked just fine.
(I'm assuming you noticed the missing </html>.)
Your code actually does work (even without the missing html closing tag :-P) but only if it is run from a server. It is all to do with the URI for the jQuery file.
If you run the file locally, the browser guesses that it should download the file using the file protocol, so:
file://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
If you open up your browser's developer tools (by pressing the F12 key usually), it should show you an error saying the browser couldn't load the jQuery file from a file:// URL. If you put http (or https) as the protocol, it knows where to get jQuery from and everything works.
Interestingly if you run the file on a server (which I guess is what w3schools intended) then the browser guesses it should be the http or https protocols and it finds the jQuery file.
If you want to experiment running a webserver without putting in much effort, Python (because it is awesome) lets you run a web server with just one command:
python -m SimpleHTTPServer
It runs the server on:
http://0.0.0.0:8000
and serves the files from the directory where you run it. This url has a little more detail about it: http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python
I wasn't aware of the server requirement (thanks for the question!) and I found this in my travels which I thought was interesting. It talks about how the missing protocol is valid html StackOverflow: Is it valid to replace http:// with // in a script tag?
I've created a button whose function is to hide itself when clicked. But, it isn't working.Here's the code :
<html>
<body>
<button id="b">HIDE</button>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b").click(function(){
$("#b").hide();
});
});
</script>
</body>
</head>
What's wrong with it?
That should work, but I'd strongly suggest you research the HTML for a valid document, i.e. </head> must appear before <body>.
Along with what alex said, it's possible that Chrome is blocking your request to the CDN-hosted jQuery. You can either give that domain valid permissions in manifest.json or simply download the copy of jQuery and store it locally.
If you are using SSL for your site, then you should serve your javascript/js file via https, else chrome will block it and causing your site's feature that is using that script not working.
I noticed that you are using http to call jquery from google cdn. May be it is causing that problem.
I am using the new cache manifest functionality from HTML5 to cache my web app so it will work offline. The content is cached automatically when the page is loaded with the following html element:
<html lang="en" manifest="offline.manifest">
This works fine. However, I want to give my users the option of whether they want the content cached offline. So, here is my question:
Is there any way to trigger that an application be cached at runtime, using JavaScript, and not have it automatically done when the page is loaded.
For example, something like this (using jquery):
----------------index.html--------------
<head>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
<button id="cacheButton">Cache Page</button>
</body>
</html>
---------Main.js---------
$(document).ready(
function()
{
$('#cacheButton').click(onCacheButtonClick);
}
)
function onCacheButtonClick(event)
{
console.log("Setting Offline Manifest");
$('#htmlRoot').attr("manifest","offline.manifest");
}
-------------offline.manifest-------------
CACHE MANIFEST
#version .85
#root
index.html
scripts/main.js
#jquery assets
http://code.jquery.com/jquery-1.4.4.min.js
Basically, when the button is clicked, I dynamically set the manifest attribute of the html element. This works (in the sense the element is set), but it does not cause the browser to then cache the page.
Any suggestions?
You dynamically trigger caching by adding an iframe that points to an empty page containing the actual cache manifest.
offline.html:
<!DOCTYPE html>
<html manifest="offline.appcache">
<head>
<title></title>
</head>
<body>
</body>
</html>
Make sure to add index.html to the cache manifest.
Then just add something like:
<iframe src="offline.html" width="0" height="0">
to document.body dynamically to trigger caching.
After many weeks spent with offline caching, the answer is no, you either cache or don't cache, setting the cache attribute on the client side has no effect.
You could consider offering an alternate url for the caching version, be aware that the page is also implicitly cached as a "master entry".
I am at a loss to understand why you would want to offline cache jquery though, since it is likely to be served with very long expiry anyway.
You may wish to consider offline storage as an alternative. Store the text of the scripts and inject them into the DOM on load. If not cached fetch using Ajax and inject the response, as creating a script tag with the src won't load the script.
Depending on your application, it may be possible to use a modified version of #schibum's approach by breaking down your app into "mini" apps, then caching the sub-sections in an iframe. Consider this example:
index.html
<html manifest="indexx.manifest">
<head>
<script src="jquery-2.1.4.min.js"></script>
<script src="index.js"></script>
<title>Index</title>
</head>
<body>
<ul>
<li>One
<li>Two
<li>Three
</ul>
<iframe id="if" />
</body>
</html>
index.manifest
CACHE MANIFEST
# 3
index.html
jquery-2.1.4.min.js
index.js
index.js
$( document).ready(function() {
var pages = ['1.html','2.html','3.html'];
var LoadNext = function() {
alert(pages[0]);
page = pages.shift();
alert(page)
if ( page !== undefined ) {
console.log("Attempting to load " + page);
$('#if').attr('src', page)
} else {
console.log("All done");
}
};
$('#if').load(function() {
console.log("Finished loading");
LoadNext()
});
LoadNext();
});
1.html
<html manifest="1.manifest">
<head>
<title>One</title>
</head>
<body>
<img src="1.jpg" width="50%">
</body>
</html>
1.manifest
CACHE MANIFEST
# 2
1.html
1.jpg
{2,3}.{html,manifest} follow 1.{html,manifest}'s form.
As a result, each sub-page (1.html, 2.html, 3.html) have their own manifest, and are thus cached independently. index.html has its own (minimal) manifest, so caching that unconditionally is not nearly as network-heavy as caching the entire app. Then the javascript is responsible for pre-loading every page in the iframe so that it gets cached.
Load index.html, then go offline and see how the sub-pages work. too.
An obvious drawback is that any assets shared between pages (e.g. jQuery) must be redundantly cached.
One thing you must remember. Do not cache the manifest file itself. So all you need to do is refresh the page with a different version of the manifest file according for your user selection. You can dynamically generate the manifest file itself, any change to that file will cause a cache refreshment. Best practice to trigger re-caching is to change the version of the manifest file, something like: # ver1 - 01/01/2018 to # ver2 - 02/02/2018 will do the trick.
So you cannot change it in client side but you can do it server side.