I have this code:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('a.one').click(function(event){
event.preventDefault();
});
});
function test(event){
event.preventDefault();
}
</script>
<style type="text/css">
a.test { font-weight: bold; }
body { font-family:sans-serif; background-color:#AAAAAA;}
</style>
</head>
<body>
<a class="one" href="http://jquery.com/">jQuery</a>
<br/>
<a class="two" href="http://stackoverflow.com/" onclick='test(event)'>stack overflow</a>
</body>
</html>
The test-function does not work as it stands now, since a regular javascript event doesn't support the jQuery event preventDefault-function. Is there some way to wrap a regular javascript event in a jQuery event so that I can use e.g. preventDefault?
Try this:
function test(e) {
$.Event(e).preventDefault();
}
Event object
I've found the best way to wrap a native event in a jQuery event is with fix:
event = $.event.fix(event);
Please note, this function is not part of the public API (although it really should be).
I think it may be the fact that you're passing event in with onclick='test(event)'. I think onclick='test' is enough. I could be wrong though.
Yes (see Darin's answer). You could also work around IE's lack of preventDefault instead (which is essentially what jQuery is doing):
if ('preventDefault' in event)
e.preventDefault();
else
e.returnValue= false;
When you just want to execute the javascript - and not redirect - when clicking the href use "return false" in your click function. For example:
$(function(){
$('a.one').click(function(event){
var condition = confirm('Do you want to redirect to ...?');
return condition == true;
});
});
If you never want the link to redirect use 'javascript:void(0);' as href attribute, all browsers will still render it as a link instead of an anchor (some IE version do this).
Related
<script type="text/javascript ">
<body onLoad="timeTracker._recordStartTime();">
<body onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);"
</script>
I am trying to use this code to record the time interval between load and unload of a page.
Unfortunately, it does not work. Why?
You may only specify one <body> tag. Also, it's not possible in HTML to specify plain HTML tags inside script tags.
Either add the handler through JavaScript, or merge the attributes in one <body>-tag. JavaScript is case-sensitive, so you should use window.unload (lowercase) instead of window.onLoad.
Use:
<script>
window.onload = function() {
timeTracker._recordStartTime();
};
window.onunload = function() {
timeTracker._recordEndTime();
timeTracker._track(pageTracker);
};
</script>
OR (without <script> tags):
<body onLoad="timeTracker._recordStartTime();" onunload ="timeTracker._recordEndTime(); timeTracker._track(pageTracker);">
i am using this script in my jsp. some time when i click on that particular button it works fine but some time it doesn't work and show Script Error : document.form is null not an object. what ever i searched i found that document is not finished loading when i call reset. how can i check whether the document has loaded or not?
<head>
<script type="text/javascript">
function closeWarning(){
document.forms[0].reset();
}
</script>
</head>
<body onLoad="closeWarning();"
<jsp:include flush="true" page="/myCart/header.jsp"/>
<div>
// content of body
</div>
</body>
If you don't want to use jQuery, you can use an event listener for DOMContentLoaded, as in:
if(document.addEventListener) document.addEventListener("DOMContentLoaded",closeWarning,false);
This will work for everyone except IE, which uses onreadystatechanged, as in:
document.onreadystatechange=function() { if(this.readyState=="complete") { closeWarning();
}
}
One way is using jQuery and it's ready() function.
I'm a dizzy designer. I can't can't see why this isn't working:
<head>
<script type="text/javascript">
$().ready(function() {
$('#test').trigger("click");
});
</script>
</head>
<body>
<a id="test" href="http://www.dartworks.net" >click here</a>
</body>
what am i doing wrong?
you didn't attach any click event to the <a> tag you just output it as a link
use the window.location.href like this :
$(document).ready(function() {
window.location.href = "http://www.dartworks.net";
});
The trigger method will fire all the event handlers bound to that event. Following the link is default behaviour, not something caused by a DOM event handler.
The following code is throwing two alerts as expected in IE but not in Firefox. Please help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function myFunction(){
alert('myfunc');
document.getElementById('mylabel').click();
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<p id='mylabel' onclick="alert('you reached');"></p>
<input type='button' value="Click me" onclick='myFunction();'/>
</BODY>
</HTML>
Firefox only has a click() function for form elements such as buttons. However, you can call the onClick function directly; you can change the line to
document.getElementById('mylabel').onclick();
This works in firefox or IE (but note that it requires that the function actually exists, which you know it does in this example).
Also note that you aren't actually simulating a click on that element (so, for example, if there were other things that such a click would do, such as also act as a click on the container, they won't happen). You're just getting the function that would run on a click, and running it directly. So it's not a solution for all situations where you need to simulate a click.
There's no click method on elements. Are you using any library?
Usually you have to do something like element.fireEvent('click') (prototype, mootools)
or element.click() (jquery)
UPDATE- Similar question: How do I programmatically click on an element in JavaScript?
Looks like an ugly and brittle solution, if I were you I'd just include jQuery and let that handle all the browser quirks.
Because the <p> tag does not have the method click.
I'm not sure what I'm doing wrong here:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
eventInit.js
window.onload = function () {
alert("check"); // works
var jsWarning = document.getElementById("javascriptWarning");
jsWarning.onclick = function () {
alert("hi"); // works
};
jsWarning.onload = function () {
alert("loaded"); // fails
};
}
And yet, nothing happens. What am I doing wrong? I've tried other events, like onmouseover and onload.
I'm doing this in Visual Studio, and intellisense isn't giving me options for setting any event handlers. Is that because I'm doing this wrong?
I have confirmed that JS is working on my setup; just putting alert("hi") in a script and including it does work.
It might be important to note that I'm doing this in JScript, since I'm using Visual Studio 2010, so perhaps event handling is different?
Updated to remove '-' from the ID name, but it still doesn't work.
Updated added the window.onload block. Now onclick works, but onload doesn't.
You are trying to set a load event on a paragraph. Only objects which load external data (window, frame, iframe, img, script, etc) have a load event.
Some JS libraries implement an available event (such as YUI) — but you know the paragraph is available, since you're setting an event on it, and you couldn't do that if it was unavailable.
maybe you forgot to have the code block inside a
window.onload = function() {
// btn click code here
}
You have to wait for the document to be parsed before you can go looking for elements by "id" value. Put your event handling setup into an "onload" function on the window object.
The browser won't fire an "onload" event on your <p> tag. You won't need that anyway if you do your work in the "onload" handler for the window as a whole.
[soapbox] Use a framework.
The script is executed before the desired element exists. Additionally, I don't think, p has an onload-Event. Windows, frames and images, yes, but paragraphs?
You should use <body onload="init();"> or window.onload=function(){ … } or a library function, if you use a library. Example:
index.html
<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "XHTML1-s.dtd" >
<html xmlns="http://www.w3.org/TR/1999/REC-html-in-xml" xml:lang="en" lang="en" >
<head>
<script type="text/javascript" src="scripts/eventInit.js"></script>
</head>
<body>
<p id="javascriptWarning">This page will not work with JavaScript disabled.</p>
</body>
</html>
scripts/eventInit.js
window.onload=function(){
alert('JS is working!');}
Edit: Okay, I am very sure, p makes no use of an onload event handler. And it's no wonder, you don't need it. If you want to execute JS code just after the paragraph is finished, do this:
<p>
<!-- stuff -->
</p>
<script type="text/javascript">
/* stuff */
</script>
Instead of this:
jsWarning.onload = function () {
alert("loaded"); // fails
};
try this
if(jsWarning) alert("loaded");
I think someone above mentioned checking for the existence of the element. At this stage the element should be present but it does no harms to check for it.
I think you have to make sure your JavaScript is binding.
Is your javascript before or after your paragraph element, for some reason my brain is aiming towards that.
I would look into using something like jQuery, it will help.
using jQuery your code would be (with the relevant jQuery files included of course):
$(document).ready(function()
{
$("#javascript-warning").click(function(){
alert("HELLO");
});
});
I don't think hyphens are valid in class names when used in conjunction with JavaScript. Try an underscore instead.
onload is a window event.