i can't understand why this code works well
but the code below no.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$('#enviar').click(function(){
alert ("casd");
});
</script>
</head>
<body>
<input type="submit" id="enviar" value="Registo" />
</body>
</html>
what is the reason?
The handler is being attached before the element even exists. Either switch to $.live() or run your code on document ready:
$(function(){
// attach click here
});
This will cause the code to wait until the document has loaded, and your #enviar element exists within the DOM. Until it exists, nothing can be attached to it.
When you attach the click event handler the document has not loaded yet. That is the < input > element is not available in that state.
The solution is to attach the handler after the document has loaded by using the jquery ready function like this:
$(document).ready(function(){
$('#enviar').click(function(){
alert ("casd");
});
Related
I would like to add a class to the root html tag at the top of the page when a button is pressed. The only code I have come across is for adding classes to div elements with ids.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html class="THIS IS WHERE I WANT THE CLASS TO BE ADDED" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Start presentation
I have tried to adapt this code but nothing works ;
<script type="text/javascript">
$("#addClass").click(function () {
$('para1').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('#para1').removeClass('highlight');
});
</script>
If I understand you correctly, you can use:
$('html').addClass("someclass")
to add a class and
$('html').removeClass("someclass")
to remove it.
If you have a button with id="mybutton" then you would use like this:
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
If your code does not follow the button element on the page, you also need to wrap your jQuery in a DOM ready handler (otherwise the click handler will never be connected):
$(function(){
$('#mybutton').click(function(){
$('html').addClass("someclass")
});
});
This is just a handy shortcut version of $(document).ready(function(){...}):
Update using your new example
So, using your existing example, it would be:
<script type="text/javascript">
$(function(){
$("#addClass").click(function () {
$('html').addClass('presentation-started');
});
$("#removeClass").click(function () {
$('html').removeClass('highlight');
});
});
</script>
I have a site made up of various html pages in jQuery mobile. On one page I have a javascript function in the content. Upon going to another page, this function still exists. How can I remove it before displaying the next page?
I am using the following, which removes the dom elements on the previous page, but the javascript functions from the previous page are still available.
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
Here's the full code of two pages. Upon clicking from page 1 to page 2, the function testContent which is only on page 1 still works.
Page 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 1z</h1>
Page 2
<div id="test"></div><!-- this div should be removed upon going to the next page -->
<script>
function testContent() {
// this function still exists on the next page, how can it be removed?
alert("testContent");
}
function doPageShow() {
alert("Page 1");
alert($("#test").length); // shows 1 which is correct
testContent(); // function is on this page, so it works
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Page 2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$('div').live('pageshow',function(event, ui) {
$(ui.prevPage).remove();
doPageShow();
});
$('div').live('pagehide', function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" data-cache="never">
<div data-role="content">
<h1>Page 2</h1>
Page 1
<script>
function doPageShow() {
alert("Page 2");
alert($("#test").length); // shows 0 which is correct
testContent(); // why does this still work???
}
</script>
</div><!--content-->
</div><!--page-->
</body>
</html>
Javascript objects live until the page refreshes. This is one of the advantages of jquery mobile, as parsing JS can take a long time on mobile devices, it is considered better to do it once.
If you really need to you could set the function to null.
I think I figured this out. Basically in JavaScript a function is just another object like:
doPageShow = function(){...}
Everything set in javascript persists on subsequent ajax loaded pages, so if I set a variable in one page, it will still have that value in another ajax loaded page, including functions.
Im a jquery starter so if its a wrong one forgive me :)
I just want to know why placing the content at different positions made this script working, although to my best i think script to kept in head section of the document. Please explain the concept.
Working Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>
</p>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</body>
</html>
Not Working
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example 2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
</script>
</head>
<body>
<p>
</p>
</body>
</html>
In the second instance the code is executed before the <p> has been parsed into the DOM tree, so while it still works there's nowhere to put the output text into. In other words, jQuery("p") matches no element so .html() "does nothing".
You can fix this by either waiting for the DOM to be fully parsed:
jQuery(function() {
jQuery("p").html(...);
});
or by using an output mechanism that does not depend on the <p> existing, such as alert() or console.log().
Well, it seems that your browser firstly load <head> section thus in second example there is no p element then.
In both cases you should wrap your code in $(function(){ ... }).
If you place your script before the <body> element, it is executed before the DOM tree is loaded/parsed. The <p> element does therefore not exist and cannot be found. You can:
Place the script after the <body> tag (like in your first example)
or you can call your function after the ready event has been fired:
$(document).ready(function() {
jQuery("p").html("Check if jQuery Supports Ajax method : "+ jQuery.support.ajax );
});
Can anyone tell me why I keep getting a "displaymessage is not defined" error message with this code.. Thanks in advance :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TEST PAGE</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
function displaymessage() {
alert("Hello World!");
}
});
</script>
</head>
<body>
<p><input type="button" name="start" id="start" value="start" onclick="displaymessage()" /></p>
</body>
</html>
Scope. Your function is declared within the scope of the onload function so that is the only place you would be able to access it. To access it from other places, move it outside the $(document).ready function.
You define your displayMessage function in a DOM Ready callback - which means that it will be defined when ...well... the DOM is ready. And yet - you add it as a handler to a click of a DOM element - something that will be processed before the function is actually defined.
Move the definition out of $(document).ready(function(){...} and you'll be OK.
Additionally, the preferred way of binding handlers to various DOM events is programmatic, rather than declarative. Instead of adding an onclick attribute to your button you should rewrite the entire thing to something like:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
<script type="text/javascript">
$(document).ready(function() {
function displaymessage() {
alert("Hello World!");
}
$('#start').on('click', displaymessage);
});
</script>
</head>
<body>
<p><input type="button" name="start" id="start" value="start"/></p>
</body>
</html>
why do you write inside the document ready function. Just write outside it should like this
<script type="text/javascript">
function displaymessage() {
alert("Hello World!");
}
</script>
I have an input which at some points happens to have the focus. If the user click in the "background" of the page, the input loses its focus. I was trying to simulate the click on the background with the following code, but this doesn't work (you will notice that the input still has the focus). Any suggestion on how to write code that simulates a click on the "background" of the page?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js" ></script>
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("main").focus();
});
</script>
</head>
<body>
<div id="main">
<form action="/">
<p>
<input type="text" id="input"/>
</p>
</form>
</div>
</body>
</html>
I would imagine using blur() would do the trick:
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function() {
document.getElementById("input").focus();
document.getElementById("input").blur();
});
</script>
Try using the blur event. If you're using jQuery there is a method you can call on the DOM object to raise this event. The blur() method should also work without jQuery.
http://docs.jquery.com/Events/blur
Your idea is right, but there is a little problem.
document.getElementById("main").focus();
<div id="main">
as shown in your code, actually the div HTMLElement doesn't have a focus method.
so you can call other elements that have a focus method or call blur() on the input element