Ah the wretched noob I am, the following html document doesn't alert anyone of my cry for help. Anyone know why?
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
This works for me:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
Just fixed the src in the script tag.
Edit: Actually, the original syntax would work fine if you load the page in a non-local context. Leaving out the protocol implies that the 'current' protocol would be used depending on whether resources are loaded over http or https. Loading it locally implies that the script is loaded from file:///ajax.googleapis.com/...., which obviously won't resolve to anything. See here for more information. Thanks to #PetrolMan for pointing to the HTML 5 boiler plate site.
That same syntax is used in the HTML5 Boilerplate:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.2.min.js'>\x3C/script>")</script>
It's
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
not
//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
You are missing an http: in front of the url in the src attribute of the <script> tag:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
The source is jacked up. Use
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
Possible values for the Src Attribute are
•An absolute URL - points to another web site (like src="http://www.example.com/example.js")
•A relative URL - points to a file within a web site (like src="/scripts/example.js")
So you should have your URL as http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Related
Okay so all I am trying to do is make the jquery work in my javascript file which is linked to a html file. I created a totally new file for this to test it. The whole contents of the html file are:
<!DOCTYPE html>
<html>
<script src="C:\Users\Me\Desktop\Programming\jquery-1.12.4" type="text/javascript"></script>
<script src="check.js"></script>
<head> <h1>test</h1>
</head>
<body>
</body>
</html>
And the whole content of the js file is
$("h1").css("color", "red");
But when I open the html file in chrome the change I put in the js file with jquery doesn't show up (e.g the heading is not red). I just want to figure out how to make it so that it does.
EDIT:
Thanks for the help everybody, I was able to make it work :)
did you try this?
$(document).ready(function(){
$("h1").css("color", "red");
});
not sure but, does your browser access local files directly? im pretty sure that browser sandbox gonna reject that, maybe cors plugin on chrome?
EDIT:
try importing this instead...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Move your <h1> tag to be in the <body>
Move your <script> tags to the <head>
Replace your code in your JS file with what imvain2 said, so
that the JS will load once your document is ready.
Make sure you are correctly referencing your jQuery script. You can even use this to test it out:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
Try to use jQuery CDN, this way you don't need to worry if jQuery loaded correctly or not.
$(document).ready(function() {
$("h1").css("color", "red");
});
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="check.js"></script>
<head></head>
<body>
<h1>test</h1>
</body>
</html>
There are a couple issue as described in other posts. All your meta, script, css references, etc. should go int the <head> and never header tags. Also need to correctly reference your javascript files.
<head>
</head>
<body>
<header>
<h1>test</h1>
</header>
</body>
Example: JSFiddle
If you want to use jquery in .js file all you need to do is type: src=" ..." above code.
this is a very odd problem indeed and I hope it's simple. I cannot get a simple select and append to work in my html document, but it works when I'm in the chrome browser console.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="/js/script.js"></script>
<script>
$('[data-js="works"]').append("hello");
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
When I put that line of script in the console, hello appears above test. When I just open the page, test is there alone. I was running a script from this page earlier and when I tried to select an element it didn't work. I then went to inline script to see if it would even work there, no. I've seen if it works from inline script without the imported script, also no. Console has no bug information. I can print from that inline script to my console if I want, but this code still isn't running properly.
Doesn't work with my local httpserver and doesn't work just as a locally opened file.
This is because the script is executed before the page is loaded so the target div does not exist yet.
The solution is to wait for the page to be fully loaded before doing something.
The $ function can be used for this. Give it a callback and it will be executed once the page is loaded.
You can also use window.addEventListener("load", callback); that doesn't need jQuery.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script>
$(function(){
$('[data-js=works]').append("hello");
});
</script>
</head>
<body>
<div data-js="works"></div>
test
</body>
</html>
Another solution can be to insert your script at the end of the page. It is not as neat though in my opinion.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
</head>
<body>
<div data-js="works"></div>
test
<script>
$('[data-js=works]').append("hello");
</script>
</body>
</html>
Try the following, hope it will solve your problem
(function($) { // This will solve namespace problem (if any)
// Write your JQuery code here
})(jQuery);
Either you put the .js file at the end of the body or put your JS code between $(document).ready(function(){ //code inside })
I'm trying to follow this tutorial to make a simple graph. However, I'm getting an empty divider when I load the page.
Relevant code:
<head>
<script language="javascript" type="text/javascript" src="js/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/flot/jquery.flot.js"></script>
<script type="text/javascript">
$(function() {
$.plot($("#graphs"), [[[0,0],[1,1]]);
});
</script>
</head>
<body>
<div id="graphs" style="width:600px; height:400px">
</div>
</body>
I have page.php in the www directory, then the two .js files in www/js/flot
You have an unnecessary bracket in your code.
$(document).ready(function(){
$.plot($("#graph"), [[0,0],[1,1]]);
});
Working example: http://jsfiddle.net/ym6dbt10/3/
You should use your browser console to debug that kind of problems, if you don't understand the error it gives, write it down here to maybe people can help, if you just write it doesn't work, it gives no information.
I have an extremely basic html document written as the following:
<html>
<head>
<title>A Basic Javascript Game</title>
</head>
<body>
<script language="JavaScript" src="mygame.js">
</script>
</body>
</html>
I've created an according Javascript file, have made sure that it's syntax is alright. The first line of the mygame.js file is:
var persontotalkto = prompt("You wake up one Saturday morning. The Holidays just started, and you can't wait to tell your family where you've decided for all of us to go on vacation! Who do you talk to: WIFE, SON, or DAUGHTER?").toUpperCase();
But when I open the html file, I'm not getting any prompt whatsoever. I have javascript enabled, so what is the problem?
Change the script tag to either the HTML4 version:
<script type="text/javascript" src="mygame.js"></script>
Or the HTML5
<script src="mygame.js"></script>
(Either will work on any browser released this millennium.)
Change
<script language="JavaScript" src="mygame.js">
</script>
to
<script type="text/javascript" src="mygame.js">
</script>
I've registered a practice app for soundcloud in order to get a client id. My app doesn't have an official site because I don't want to register a domain. I'm just trying to learn how to use soundcloud using a .html and .js file. I've followed the API tutorials exactly, but nothing happens whenever I try to use soundcloud. I initialized SC using my client ID, and have imported JQuery and everything I need to. Thanks for the help
my html file (practice.html):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
my .js file (script.js):
SC.initialize({
client_id: 'the client id they gave me...'
});
$(document).ready(function() {
SC.get('/tracks/293', function(track) {
SC.oEmbed(track.permalink_url, document.getElementById('player'));
});
});
Again, nothing happens when I load the page...
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:):
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do