How do you get javascript/jquery to work? - javascript

EDIT: Thanks for the suggestions everyone. I've gotten it squared away thanks to your help!
I am doing javascript/jquery tutorials on codeschool/codeacademy and everything seems to go fine there. But when I try to do something myself, I cannot get the javascript to actually trigger. I tried chrome and firefox. I disabled all plugin extentions. Must be a simple problem, please help!
The following code I cut and pasted from jquery (http://learn.jquery.com/about-jquery/how-jquery-works/)
Here is a link to the jsfiddle: http://jsfiddle.net/interestinall/n5mqryrj/
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
It does not work for me. Can someone explain why and tell me how to get it working? Thanks so much!

Theres nothing wrong with your code. We were all started somewhere and some of these suggestions are misleading
If you're not already aware, jQuery is a comprehensive library which makes complex javascript development simpler. Its important to note that everything you do with jQuery can be achieved using native javascript its just a little tricker and jquery handles all the complexities to work across a wide range of browsers. That is to say some things work in some browsers, where as others do things in a different way (notably IE).
To use jQuery on your website, you need to include it on your page. Its self executing and one way you can tell if its worked is running something like:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script>
console.log($)
</script>
</body>
</html>
If you open the console in chrome (hit f12) you should see:
function (a,b){return new m.fn.init(a,b)}
Note that I'm using src="https://code.jquery.com/jquery-1.11.1.min.js" for the source of the script. You can use src="jquery.js" as per your script, but it means you need to save the contents of https://code.jquery.com/jquery-1.11.1.min.js to a file called jquery.js at the same level as your index.html (or the wherever-you-saved-your-code.html)
Ive noted some suggestions say you should include jQuery in the tag and, though this would work, its considered best practice to keep scripts at the bottom of the page for reasons I wont go into here.
As such, this should work for you (irregardless of browser extensions):
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
</head>
<body>
jQuery
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
Good luck.

You did not include jquery in your project.
change this line
<script src="jquery.js"></script>
to this line
<script src="https://code.jquery.com/jquery-1.11.1.min.js" ></script>
or any other version in
https://code.jquery.com/

You've used the wrong URL to jquery. http://fiddle.jshell.net/_display/jquery.js gives a 404 error.
Try using an absolute URI or picking the library from the Frameworks & Extensions menu.

You haven't included your jQuery properly. Try this instead:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
</head>
<body>
jQuery
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>

Try to replace
jQuery
with
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Or download the jQuery-Scriptfile from jQuery.com, store it locally and use that one.

Here is a working example
http://jsbin.com/pajecubute/1/edit
jQuery
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});

Updated your fiddle. You need not include JQuery separately in your HTML. It is already present for your selection on the left hand side. Your code works now.
http://jsfiddle.net/n5mqryrj/8/
Added ready function in the script section:
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});

Related

$(document).open() not working under these circumstances

I apologize in advance if this has been asked before. So the circumstances I mentioned in the title is this:
I am writing html into a new window.document.open() object. The html I am writing also includes in the head.
This is the script I am not able to run,
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
The interesting thing is that every other jquery code works. For example in my html I have a button with id='but' and this script works
$('#but').click(function(){
alert('you clicked a button')'
});
so why is the $(document).ready() not working? Is this because window.document.open() doesn't count as document for jquery?
Thanks in advance.
edit: I think my question is unclear. I am terribly sorry about that. Here's the situation:
I have a javascript file that essentially has this:
var w=window.open();
var temp=`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Template for converted files</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="file.js"></script>
<script>
$(document).ready(function(){
alert('This is working!');
});
</script>
</head>
<body class="body">
<button id='but'>click me!</button>
</body>
</html?
`;
w.document.open();
w.document.write(temp);
the file file.js has the following:
$('#but').click(function(){
alert('you clicked a button')'
});
now when I run the first JS file, I am able to open a new window with the button. when clicked it says "you clicked a new button"
But the alert "This is working!", isn't working.
Hope this makes the situation clear. I am really sorry for not being clear from the start.
Because jQuery has no method open() in it's api.
open() is a window method only.
You can refer to the new window by passing it to a variable:
var win = window.open(url[,options])

How to include jQuery in HTML?

I've been trying to learn how to incorporate jQuery into an HTML program, and I'd appreciate if anyone could help me figure out what is wrong with the following code:
<!Doctype html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
alert("I'm ready!");
}):
</script>
</head>
<body>
<p> Hi there, I'm using Jquery </p>
</body>
</html>
I'm just trying to make a basic program that displays an alert box when it opens. For some reason, the alert box isn't popping up. Am I using the script tag in the wrong way?
2 problems:
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
Add http: before the //. Your browser is attempting to find the file on your local fielsystem.
And }): should be });. Should work after that.
See jQuery ready()
$( document ).ready( handler )
// or
$().ready( handler ) (this is not recommended)
// or
$( handler )
Change
$(window).ready(function(){
alert("I'm ready!");
}):
TO
$(document).ready(function(){
alert("I'm ready!");
});
You can check out the differences between and their uses here.

jQuery simple button bind

I'm new to jQuery, so this should be a simple question.
As far as I understand, I can bind a method to listen to an event, such as the click of a button, using
$('#buttonID').bind('click', function (){//some code});
However, this isn't working for me, so I must be doing something wrong.
This is my simple html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
</body>
</html>
Apart from loading jQuery files, it loads file test.js, which looks like this:
// JavaScript Document
$('#SignIn').bind('click', function() {alert('hi');});
Is that not enough for binding? I was hoping this would fire an alert dialog, but it doesn't, it seems the callback is not executed at all.
What is wrong here? Both files (html and js) are located in the same directory, and Google Chrome does not complain about anything in the JavaScript console, so from that end, everything should be fine.
Thanks for all help!
Wrap your code in document ready handler. It accepts a function which executes when DOM is fully loaded.
As you are using jQuery 1.3
$(document).ready(function() {
$('#SignIn').bind('click', function() {
alert('hi');
});
});
For jQuery 1.7+,
$(document).ready(function() {
$('#SignIn').on('click', function() {
alert('hi');
});
});
Additionally, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document.
$(function(){
$('#SignIn').bind('click', function() {alert('hi');});
})
Try
$(function(){
$('#SignIn').click(function() {alert('hi');});
});
Move your Javascript to the bottom of the HTML page, right above the closing body tag.
That way the DOM is ready when it is loaded, and there's no need for $(document).ready() calls.
https://developer.yahoo.com/performance/rules.html#js_bottom
You may want to include your JavaScript files at the very bottom, and everything should work as expected. It is recommended to do this and to include CSS files at the top (head tag). For more information see link included by #Grim...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<input id="SignIn" type="button" value="Sign In"></input>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js'></script>
<script src='test.js'></script>
</body>
</html>
$( "#target" ).click(function() {
//Write some code here
});
You can try this.
$(document).ready(function(){
$('#SignIn').on('click', function() {alert('hi');});
});
You can use this.
$(document).ready(function () {
$("#SignIn").click(function () {
alert('demo');
});
});

jQuery IE8 not working however IE7, IE6 and others work

Im trying to get jQuery to run in IE8 so i created the example to test.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test jQuery</title>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body").css("background", "red");
});
</script>
</head>
<body>
hello
</body>
</html>
It works fine in IE6, IE7 and IE9+ however just does not work in IE8, Any ideas?
Here, mainly you need to add !important
Add background-color: red !important; as say for example _bgcolor class in css and add that css _bgcolor class in javascript as following:
$(document).ready(function(){
$("body").addClass('_bgcolor');
});
Just add"http:" before the url start.
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
In Jquery css official documentation I found:
Retrieval of shorthand CSS properties (e.g., margin, background,
border), although functional with some browsers, is not guaranteed.
For example, if you want to retrieve the rendered border-width, use:
$( elem ).css( "borderTopWidth" ), $( elem ).css( "borderBottomWidth"
), and so on.
Blockquote
try $("body").css( "background-color","red" ) and $("body").css( "backgroundColor","red" ).

Jquery .load not working with PHP page

I am currently working on a chat system experiment, and have run into an issue.
This is my code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
function getUpdates() {
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
}
setTimeout(getUpdates(), 1000);
</script>
</head>
<body>
<p>The updates are:</p>
<div id="updates"></div>
</body>
For some reason, the jQuery .load() function is not loading anything into the "updates" <div> section of the page. I checked chatlister.php and made sure that it had output, and I also made sure that the two files are in the same directory. I am very new to jQuery, so please bear with me. What did I miss?
You need to wrap your code in this
$(document).ready(function(){
// Code here
});
Because the code is never being executed, either that, or your php is wrong.
You should have a look at jQuery AJAX
You have to wait for the DOM to be created so run only after the document is ready:
$(document).ready(function(){
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
});
If you want to run it every seconds:
$(document).ready(function(){
var getUpdates = function() {
$('#updates').load('chatlister.php', function() {window.alert('Load was performed.');});
}
setInterval(getUpdates, 1000);
});

Categories

Resources