the below code is for a form that is validated against some external (valid.js) functions. It's my first forray into Event Delegation and stupidly (testing in FF only just now) I didn't realise that the addEventListener isn't recognised in IE. Anyone got an idea which way I should look at sorting it. I am still searching and playing around but can't seem to find the right solution.
[Code]...
Is there a subset of acceptable selector syntax available when using .on() ? I notice that given markup
<ol id="root">
<li id="a">A
<ol>
[code]....
I just want to understand the concept of event bubbling, capturing and delegation. I have read a lot about them but still unable to fully understand them (capturing, bubbling, delegation).
View 1 Replies View RelatedTask: I would like to implement a CtrlEnter event that would work on both IE and FF.
My approach: use addEventListener() and attachEvent() to capture the event then trigger a function to check for CtrlEnter:
if (oTarea.addEventListener) {
oTarea.addEventListener('keyup', function() {checkCtrlEnter(event);}, false);
}
else if (oTarea.attachEvent) {
oTarea.attachEvent('onkeyup', function() {checkCtrlEnter(event);});
}
function checkCtrlEnter(e) {
if (e.ctrlKey && e.keyCode == 13) {
// do something
}
return false;
}
I'm just trying to register a simple click event onto a input element with addEventListener and attachEvent... My code:
[Code]...
One thing I haven't figured out about javascript is the treatment of
__proto__.
Inheritence, whether prototypes or class-based, is just a shorthand
form of delegation (leaving aside dynamic dispatch).
In Java a derived class serves as a wrapper for its superclass. The
derived class can easily access members of its super class using the
nice "super" keyword. Why, in javascript, is this functionality buried
in the unofficial "__proto__" property? It seems that it must have
been the intent of the language designer that explicitly accessing the
prototype chain is a bad thing for some reason, although I can't see
any reason.
By googling, you can find a lot of weird hacks to add "super"-like
functionality to javascript, although many of them look misguided to
me. It certainly seems that this is a commonly confusing part of the
language.
If __proto__ were an official part of the language, implementing a
decorator or proxy pattern would be nicely simplified compared to
class-based inheritence. The "before-and-after" style of AOP (which is
just another style of shorthand for delegation) would be possible
without any crazy tricks.
So, anyone care to set me straight? Why isn't __proto__ or something
like it a well defined part of javascript? Shouldn't it be?
I am having issues with a new window that I create in my application
not executing its Javascript. The js is there in the source and looks
all normal, but it is simply not being recognized. I am running on
Jboss 4.0.2. Here is the code, its simple... Code:
In the following script:
function txKeyPressHandler(theEvent) {
var key = theEvent.which || theEvent.keyCode;
switch (key) {
case Event.KEY_RETURN:
txIMSendMsg();
var userAgent = window.navigator.userAgent;
if (userAgent.indexOf('MSIE 6.0') == -1) theEvent.preventDefault();
break;
}}
if I take out the if clause, forcing the preventDefault to get called even
for IE6 it causes a JS error (just in IE6).
is the event ondragstart only for IE? In that case, how to use it in
netscape 7?
i would like to use it to replace a checkbox with an image and to swap it when it's clicked.unfortunately the change is not recognized inside the internet-explorer.
here is the code:
<label
for
="footer_ger_lock"
[code]...
there is some php too that saves and displays the lock/unlock states, but i only wrote down the bare bones to keep the overview here.
The following request isn't retrieving a response when I look for it in Firebug. Any ideas why?
$function(){
//json request to flickr
$.getJSON('http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=71282ef5623d61a898f798c7916bed31&photoset_id=72157627882181032&format=json&jsoncallback=?'),
});
I want to hook into validation success/failure events, but don't see an API to do this?
i.e. I want to enable/disable a particular set of controls depending on the state of validation.
Is there a way to do this? Am I missing something?
Let's say I have two images. I make one dragable. I physically move one image directly over the other. While my mouse is pressed I release it. The image underneath recognizes and gives a message indicating it's covered by the other????
View 1 Replies View RelatedI my ASP.NET master page I've got the following:
and yes, the paths are right. I still get this error in firebug no matter what: $ is not defined
I am using jQuery Superfish (with Supersubs) but I'm getting an JS error when loading the page:Error: $("ul#topmenu").supersubs is not a function I looked at the supersubs.js file but I can't figure out what the problem is. I'm calling jquery.js, jquery.superfish.js, and jquery.supersubs.js on the <head> and initiating menu as suggested:
$(document).ready(function(){
$("ul#topmenu").supersubs({
minWidth: 12,
[code]....
I'm new to programming with the DOM and new to this forum as well. I have the code below showing a web page that is simply trying to alert the user of recognized DOM nodes. I am not getting the bodyElement or textElement to be recognized by the browser. The error states that "an object is required."
<html>
<head>
<title>Trickier nesting, still</title>
<script language="JavaScript" type="text/javascript">
var myDocument = document;
[Code]...
I'm trying to add a prototype method to the Image object, but I always get the error "images[i].getSize() is not a function". Why?
View 1 Replies View RelatedI'm using some jquery in a website I'm building. Here's what I'm trying to do on one of the pages: I've got a span with some text and a button in it. When the button is clicked, it fires up a jquery click function for its class that is supposed to insert a textbox into it and take the text and put it in the textbox. The class of the button is also changed from "editButton" to "finishButton" so that the other click function fires, which is going to call a webmethod to update whatever the user entered in the database.
But, the function for the editButton class gets executed when it's clicked the next time instead. I know that the class of the button has changed because the css styles for the finishButton class are in effect. I also tried removing the clicked button and creating a new one dynamically, but that one does nothing at all; it doesn't go to either click function. The stuff in the .finishButton function is only there just so I can test whether or not that function actually runs. Whether it works or not, it shouldn't matter... I'm using Firebug so if I put a break point in there, it should hit it either way, right? And this is in an aspx page if that matters at all.
I have two functions show after the message. The first works fine. When a checkbox is clicked with the class availableProfile, its class is removed, selectedProfile added. It is then appended to anotehr list and destroyed in the original. However when i click the now moved checkbox it doesn't recognize it has the new class of selectedProfile.
$(".availableProfile").click(function(event) {
elementID = event.target.id;
elementGroup = elementID.split("__");
$(this).removeClass("availableProfile");
[Code]....
[code] Hide from browsers that do not understand Javascript.The addLoadEvent function adds functions to the window.onload command to load multiple functions at startup function addLoadEvent(func)[code]When the page loads I get the nice alert box that says loading and then one that says count equals 0.When i click my edit list drop down and choose modify I get a message box that reads count equals in edit function 0.If I type text in the textbox and leave the text box I get an alert box that reads count equals in subcheck function Undefined and then another one that says NaN.
View 7 Replies View Relatedproblem: input values not recognized in dinamicly loaded IFRAMEs
here is the thing I have a parent window that has an IFRAME
I then load a diffrent page into the IFRAME that contains an input
when I try to access - iFrm.document.all["grid_name"].value
i get an error saying that - "value is null or not an object"
I tryed checking to make sure the page is fully loaded using:
document.readyState=="complete" and it is loaded and completed
the weirdest thing is that when debugging the error I can see the value
in the debbuger and after that I get the value alerted just fine
so how come I get an error ????? Code:
My HTML looks something like the following:
<label for="myTextBox">
Name:<span style="color:red;">*</span>
<input type="text" id="myTextBox"></input>
</label>
In my document ready I have a function which runs 'on blur' of the textbox and hides the span. The following code DOESN'T work to hide the span:
$('#myTextBox').closest('span').hide();
I'm currently using the code below which does work but was wondering why the above code doesn't....
$('#myTextBox').parent().children(':first').hide();
This makes my life a bit easier. After executing this script you should be able to addEventListener on all elements instead of determining if you want to call attachEvent or addEventListener.
Edit: This is the original version. The revised version is below
if (!document.addEventListener && document.attachEvent)
{
Object.prototype.addEventListener = function(eventName, func, capture)
{
if (this.attachEvent)
this.attachEvent('on' + eventName, func);
}
var i, l = document.all.length;
for (i = 0; i < l; i++)
document.all[i].addEventListener = Object.prototype.addEventListener;
window.addEventListener = Object.prototype.addEventListener;
document.addEventListener = Object.prototype.addEventListener;
}
Revised version:
This one is harder to use but it is nicer to the DOM and all newly created objects. The problem with it is that addEventListener will only be available after the page loads.
If you want to use addEventListener from a window.onload script make sure that this code is included in the body, not in the head. document.body.onload is called before window.onload.
Now, only elements that already have attachEvent will get an addEventListener. Elements created with document.createElement will automatically get addEventListener.
function createIEaddEventListeners()
{
if (document.addEventListener || !document.attachEvent)
return;
function ieAddEventListener(eventName, handler, capture)
{
if (this.attachEvent)
this.attachEvent('on' + eventName, handler);
}
function attachToAll()
{
var i, l = document.all.length;
for (i = 0; i < l; i++)
if (document.all[i].attachEvent)
document.all[i].addEventListener = ieAddEventListener;
}
var originalCreateElement = document.createElement;
document.createElement = function(tagName)
{
var element = originalCreateElement(tagName);
if (element.attachEvent)
element.addEventListener = ieAddEventListener;
return element;
}
window.addEventListener = ieAddEventListener;
document.addEventListener = ieAddEventListener;
var body = document.body;
if (body)
{
if (body.onload)
{
var originalBodyOnload = body.onload;
body.onload = function()
{
attachToAll();
originalBodyOnload();
};
}
else
body.onload = attachToAll;
}
else
window.addEventListener('load', attachToAll);
}
createIEaddEventListeners();
Today I have been testing the event models from Netscape 4.8 and IE 4
to the current crop of browsers. I'd like to write a small event
library similar in purpose to the Yahoo! UI event library but with less
features and code. The Yahoo! event library is one of the best
libraries in YUI but it still seems to me to have some confused
code...that or I'm still confused.
The Yahoo! UI library focuses on using addEventListener and
attachEvent. However, due to the click and dblclick bugs in Safari a
long legacy event workaround is included to use a Netscape4-type event
model for Safari. Something like this
var listeners = [function(event){}, function(event){}];
document.getElementById('blue').onmouseover = function(event) {
for (var i=0; i<listeners.length; i++) {
listeners[i](event);
}
};
With this above example, multiple handler functions can be fired for a
single event. I imagine that this is an old trick that has been around
for a long time, yes?
With all the new browsers I tested with this legacy workaround, the
listener handlers can use event.stopPropogation() or
event.cancelBubble=true and they work as desired. The handler functions
can also use event.preventDefault() and event.returnValue=false and
they too work. These seem to work because the event object passed to
the handlers is a modern event object and not one from Netscape4.
My question is, if Safari needs this legacy workaround, and the legacy
workaround seems to work in all the browsers that have addEventListener
or attachEvent, then why bother with the addEventListener and
attachEvent functions at all? Why not just use the legacy way for all
browsers and all type of events.?
I was using this script to learn how to use event listeners and I need to know how to make it work for IE. I keep finding attachEvent scripts that look like they will work, but I get nothing. I've spent several hours finding script after script that simply don't work. I don't know where to turn next. Any script to attach these events to IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL]">
<html>
<head>
<title>Test</title>
</head>
<body><div>
<script type="text/javascript">
if(!Array.prototype.link)
Array.prototype.link = function(f) { for(var Obect1 = new Array(), i = 0, n = this.length, t = arguments[1]; i < n; i++) Obect1[i] = f.call(t, this[i], i, this);return Obect1;};
Array.prototype.linkMethod = function(m) { var n = this.length, args = this.slice.call(arguments, 1);if(typeof m == "string" && n > 0) m = this[0][m];for(var Obect2 = [], i = 0; i < n; i++) Obect2[i] = m.apply(this[i], args);return Obect2;}; .....
I'm trying to add a clickevent to an anchor that I created trough DOM.
This his how the code looks:
var oSubLink = document.createElement("A");
oSubLink.appendChild(document.createTextNode("+"));
oCel.appendChild(oSubLink);
oSubLink.addEventListener("click", klapUit(oTabel.id, eigenschappen[2]), false);
It failes at the addEventListener call, saying "No such interface supported" (appears to be one of the two default error messages IE gives when it can't handle your JS :mad: ).
How can I fix this? The solution should work in IE6, FF, Opera, Mozilla and Safari.