Prototypejs observe function throws error - javascript

I have this line of code but it throws an error. What is the problem with the code?
<html>
<head>
<script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
Event.observe('target', 'click', function(event) {
// ...
});
</script>
</head>
<body>
<p id='target'>Click me!</p>
</body>
</html>

Load the script after your tag is loaded. This way you dont need to detect the dom:loaded event. :)
<html>
<head>
<script src="http://prototypejs.org/javascripts/prototype.js" type="text/javascript"></script>
</head>
<body>
<p id='target'>Click me!</p>
<script type="text/javascript">
Event.observe('target', 'click', function(event) {
alert('clicked me');
});
</script>
</body>
</html>

The element you are trying to bind the event handler to does not exist in the DOM at the time your code is executed. Wrap it in a DOM ready event handler:
document.observe("dom:loaded", function() {
Event.observe('target', 'click', function(event) {
// ...
});
});
This is mentioned in the Prototype docs:
One of the most common errors trying to observe events is trying to do
it before the element exists in the DOM. Don't try to observe elements
until after the dom:loaded event or window load event has been fired.

Related

Cannot get the most basic click event binding to work

I am new to javascript, and I have tried to debug as much as I can but I still cannot figure why I cannot get the alert "Event 1" to show up when I click on text:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$("#id").bind("click", function() {
alert("Event 1");
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
The problem is that you need to ensure that you only bind to the element once the page has loaded, and the element is therefore accessible. This can be done by wrapping your existing jQuery in a $(document).ready(), as can be seen in the following working example.
Also, note that .bind() has been deprecated as of jQuery 3.0, and you should use .on() instead. Note that the elements that you target with .on must exist at the time that you make the call to them:
Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on()
If your target element is not visible in the DOM on page load, you can use event delegation to bind to an element that is visible on page load, and then delegate that functionality to the target.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#id").on("click", function() {
alert("Event 1");
});
});
</script>
<body>
<div class="foo" id="id">Click</div>
</body>
</html>
Hope this helps! :)

JQuery function .load not working

I have the next code. What am trying to do is when i refresh or open the page, to add the class intro. But my main problem is in the part :
$("body").load(function(){
I want when the page is opened, then to add the class .intro. Instead of body, i have also tried html, and still doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").load(function(){
$("p").addClass("intro");
});
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
You should not use load() for this purpose.
load() function description : Load data from the server and place the returned HTML into the matched element.
You need just ready function to achieve that :
$(document).ready(function(){
$("p").addClass("intro");
});
//OR
jQuery(function($){
$("p").addClass("intro");
});
Hope this helps.
Try this instead:
$(document).ready(function(){
$(window).load(function(){
$("p").addClass("intro");
});
});
Load event attached to the window. If that is what you meant? Load on a DOM element like that doesn't make much sense.
Whilst this should work, you could pull it out of your ready() event.
$(document).ready(function(){
// Nothing to see here...
});
$(window).load(function(){
$("p").addClass("intro");
});
This waits for the load of the window, but if you just want to add the class as soon as possible when the DOM is ready, well, you won't need the load() at all:
$(document).ready(function(){
$("p").addClass("intro");
});
Bonus: You should use on() to attach all events going forward.
$(window).on('load', function(){
$("p").addClass("intro");
});
on() is the preferred method for events in future jQuery versions, as older methods are deprecated.
All the best.
Put your code inside $(document).ready callback.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass("intro");
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
$(window).on('load', function(){
$("p").addClass("intro");
});

Jquery custom event to other document doesn't work

Please consider this test:
Main file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var secondwindow = false;
$(function() {
secondwindow = window.open("secondwindow.html");
$(secondwindow).load(function() {
secondwindow.setWindow(window);
})
$("#custom").click(function() {
$(document).trigger("custom");
});
});
</script>
</head>
<body>
<button id="click">Click event</button>
<button id="custom">Custom event</button>
</body>
</html>
Second (popup) file:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var mainwindow = false;
function setWindow(obj) {
mainwindow = obj;
$(mainwindow.document).on("click", function() {
$("body").append("<p>Click event from main window</p>");
});
$(mainwindow.document).on("custom", function() {
$("body").append("<p>Custom event from main window</p>");
});
};
</script>
</head>
<body>
</body>
</html>
My goal is to add a event listener in the second window for custom events in the main window.
What I found, and this test can proves, is that event listening to other window works for "standard" events like click and not for custom events.
Can you tell me if this is a jQuery limitation or I'm missing something?
(I'm sorry I could not put that code in a jsfiddle because window.open doesn't work very well with jsfiddle)
The problem is that you need to take into account the jQuery instance you're using to define your targets and trigger.
secondwindow.html -> $(mainwindow.document)
is not the same as
main.html -> $(document)
It needs to be:
secondwindow.html -> mainwindow.$(mainwindow.document)
Or reverse it:
main.html -> secondwindow.$(document)
secondwindow.html -> $(mainwindow.document)
jQuery events are managed by jQuery.event object, and this is tied to the instance of jQuery that's being used. You can for example get which events are registered this way:
$.event.global
You'll see that the events registered are not only dependent on the selectors themselves, but on the jQuery instance as well. And this is the case for click event as well as custom events.

Show javascript alert and do other actions?

Here's my code and nothing is happening:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
However, nothing happens when you click the "clickMe" div.
Thanks!
Let the document be ready
$(function(){
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
})
The way you had it, the div is not yet available (the DOM is not loaded) so, no click handler is added. You need to wait for document to be available. The .ready() is to be used for that.
$(document).ready(function() {...})
$(function() {...}) - Shortcut
Try wrapping the jQuery code inside this:
$(document).ready(function() {
// Handler for .ready() called.
});
When you execute the existing code in the head, the clickMe div does not exist.
Try this:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
You by comparing the differences you will find out the solution. Basically is this line: $(document).ready(function(){});
The DOM is not loaded yet when your JavaScript code is executed. You have to add the code to the .ready() callback. Then the code is executed when the browser parsed the HTML and jQuery can find the elements:
$(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
$(function(){..}); is shorthand for $(document).ready(function(){...}).
DEMO
The script is running before the .clickMe element even exists. Wrap your code in a dom ready callback:
$(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
Another solution would be moving your script below the element definition but using the dom ready event is much cleaner.
The issue is that you are attaching the event handler before the element is rendered to the DOM. Try this instead:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
$(document).ready(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>
</head>
<body>
<div class="clickMe">Click Me!</div>
</body>
</html>
The code passed into the $(document).ready function will be executed once the page is entirely loaded - so you can safely attach events to yet-to-be-created elements.
http://api.jquery.com/ready/
You're asking jquery to find your clickMe div before it exists. It's down lower on the page and the browser has not loaded it yet. A simple fix is to set up your click handler during the document ready event:
<script>
$(document).ready(function() {
$(".clickMe").click(function() {
alert('hi!');
// Do other stuff
});
});
</script>

Help! How to get the event handler with IE Dom interfaces?

I am working to use IE Dom interface to automate IE page access. I am trying to get all event handlers defined in a page. I am using IHTMLElement object now for this purpose. If the html page defines "onclick=xxx", element.onclick returns the click handler. However, if an event handler is defined in javascript, element.onclick simply returns NULL. What's the right way to get the event handler then?
Thanks,
xin
Below is an example that uses javascript to define event handler.
<!doctype html>
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> </script>
</head>
<body>
<script>
$(document).ready(function(){
$("a").click(function(event){
$(this).hide("slow");
alert("Thanks for visiting!");
window.location="http://cnn.com";
});
});
</script>
<a>jQuery</a>
</body>
</html>
This is not possible.

Categories

Resources