Jquery not working with any browser - javascript

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?

Related

Loading external javascript in html when using TEdgeBrowser

It seems when i use TEdgeBrowser and navigate to my html file, that loading external local javascript files in that html does not work. -nothing happens
for example i have in html:
<!DOCTYPE>
<html>
<head>
</head>
<body>
<script src="test.js"></script>
</body>
</html>
And javascript file:
alert('HELLO');
It is simple example that should message me HELLO, but doesn't matter what is in javascript, it just doesn't load.
I don't get any DevTools errors.
When i run the html in normal browser for example chrome or edge on my pc, it works fine.
Also, when i have a script that is not local, but remote, then it works too. So it seems that the problem is only with local files. (I run delphi as administrator).
What could be the problem? I have delphi 10.4.2

Why does Firefox DevTools' Debugger show 'loadSourceError'?

Consider this simple HTML file:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
alert('1');
</script>
</body>
</html>
When I enable Firefox JavaScript Debugger (via Ctrl+Shift+S), the panel shows me the following error message instead of the source code:
Error loading from source:
loadSourceError
What am I doing wrong?
My bet is that it comes from some server setting, since it works fine from another server (as well as locally), but I cannot identify any noticeable difference between both configurations (apache.conf are identical, /etc/apache2/sites-enabled/ configuration is similar, enabled modules are the same. I had the hope that installing the javascript-common debian package would help, but it does not…).
JavaScript itself is served correctly, though (even the embedded JS), and there is no loading problem for JS files.
Got it!
It seems that the debugger has issues with internationalized domain names (IDN).

Fallback for jquery CDN not working

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.

How to embed a file in html using jquery.load() in chrome

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

Why is jQuery not working in the browser action popup of a google chrome extension?

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.

Categories