Re: [jQuery] event reattach
On Mar 15, 2007, at 4:45 , Kush Murod wrote:
$('.buttons').click... attached an event
at some stage I've replaced one of many '.buttons' using $.get/$.post
via html(newButton)
new button does not have click event attached anymore
what's the best way to keep or re-attach event(s)
You just missed a substantial thread on this topic. You can view the
responses, which should give you some good ideas, in the list archives:
http://jquery.com/pipermail/discuss_jquery.com/2007-March/027029.html
Hope this helps!
--
Jonathan Chaffer
Technology Officer, Structure Interactive
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] the pitfalls of jquery
On Mar 14, 2007, at 20:49 , Benjamin Sterling wrote: Because this will be on a government server, they don't want anything other then basic javascript, I can explain the whole discussion with the client but this message would be to long and either way the result would be that I can use any frameworks. So I take a look at the specs and my brain just goes limp.. I CAN'T THINK OF HOW I WOULD DO THIS WITH OUT JQUERY.. it is a sad sad world all because of my dependency of the crack that is jQuery... I've been exactly there. Had a project with a very fast turnaround, but thought, Hey, this is easy; jQuery to the rescue! It wasn't until we presented the working result to the client well within the deadline that we were informed that third-party libraries were not allowed for security reasons. Yikes! I had your reaction exactly. I was at a loss for how to even start writing the code without $() at my fingertips. We finished the project using only homespun code, but late and over budget of course. -- Jonathan Chaffer Technology Officer, Structure Interactive (616) 364-7423http://www.structureinteractive.com/ ___ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/
Re: [jQuery] Loading with animation effect
On Mar 9, 2007, at 15:27 , JQuery - SimDigital wrote:
I'm trying to contract a div, load a content and then expand the
div to
the content proper height.
I was trying as follow:
$(#divContent).click(function(){
$(#content).load('info.php');
$(#content).animate({height:'toggle'}, slow);
});
Close, but for a couple problems. First, the load method is
asynchronous, so it will not necessarily have loaded the file by the
time the next line of code runs. You need to use callbacks for this:
$('#divContent').click(function(){
$('#content').load('info.php', function() {
// Things to do after the load is complete
});
});
Next, I don't think you understand toggle completely. This switches
the current state of the element from hidden to shown or vice versa;
it does not do both. A simple slideDown or slideUp is probably
more appropriate in this case:
$('#divContent').click(function(){
$('#content').slideUp('slow').load('info.php', function() {
$(this).slideDown('slow');
});
});
That is, slide the element up, start the load, and after the load
completes slide it back down.
AhhhI like when the content is loading, display a loading icon.
(it
is not required, but nice)
You can .show() an element containing the icon before the load is
performed, then .hide() it in the callback:
$('#divContent').click(function(){
$('#loading').show();
$('#content').slideUp('slow').load('info.php', function() {
$('#loading').hide();
$(this).slideDown('slow');
});
});
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423http://www.structureinteractive.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Best practices for reattaching behaviours todynamically loaded content?
Hey, Nedjo. Good to see you on this side of the Drupal/jQuery
fence. :-) I like Felix's suggestion in this case.
In the near future there will be a dead-tree reference for jQuery on
the shelves. A short excerpt from the first draft should prove
applicable to this conversation:
---
AJAX and Events: Handling the Handlers
Suppose we wanted to highlight all the h3 elements on the page when
they are clicked. By now the code to perform such a task is almost
second-nature:
$(document).ready(function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
});
All is well, in that clicking on the letters on the left side of the
page highlights them. But the dictionary terms are also h3
elements, and they do not get the highlight. Why?
The dictionary terms are not yet part of the DOM when the page is
loaded, so the event handlers are never bound. This is an example of
a general issue with event handlers and AJAX calls: loaded elements
must have all of their event handlers rebound.
A first pass at solving this problem is to factor the binding out
into a function, and call that function both at the time the document
is ready and after the AJAX call:
$(document).ready(function() {
var bindBehaviors = function() {
$('h3').click(function() {
$(this).toggleClass('highlighted');
});
}
bindBehaviors();
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors();
$(this).fadeIn();
});
});
});
Now we can put all our event handlers in the bindBehaviors()
function, and call that whenever the DOM changes. Clicking on a
dictionary term now highlights it, as we intended. Unfortunately,
we've also managed to cause very strange behavior when the letters
are clicked. At first they highlight correctly, but after the button
is clicked (loading the dictionary entries), they no longer highlight
on subsequent clicks.
Closer inspection reveals that, after the AJAX call, the highlighting
breaks because the click handler is fired twice. A
doubled .toggleClass() is the same as none at all, so the click seems
not to work. A tricky behavior to debug, to be sure. The culprit here
is bindBehaviors(), which binds the click event to all h3 elements
each time. After a button click, there are actually two event
handlers for clicks on an h3, which happen to do the exact same thing.
Scoping an Event Binding Function
A nice way around this double-firing is to pass some context into
bindBehaviors() each time we call it. the $() constructor can take a
second argument, a DOM node to which the search is restricted. By
using this feature in bindBehaviors(), we can avoid multiple event
bindings:
$(document).ready(function() {
var bindBehaviors = function(scope) {
$('h3', scope).click(function() {
$(this).toggleClass('highlighted');
});
}
bindBehaviors(this);
$('#letter-a .button').click(function() {
$('#dictionary').hide().load('a.html', function() {
bindBehaviors(this);
$(this).fadeIn();
});
});
});
The first time bindBehaviors() is called, the scope is document, so
all h3 elements in the document are matched and have the click
event bound. After an AJAX load, though, the scope is instead the
div id=dictionary element, so the letters are not matched and are
left alone.
Using Event Bubbling
Adding scope to a behavior-binding function is often a very elegant
solution to the problem of binding event handlers after an AJAX load.
We can often avoid the issue entirely, however, by exploiting event
bubbling. We can bind the handler not to the elements that are
loaded, but to a common ancestor element:
$(document).ready(function() {
$('body').click(function(e) {
if ($(e.target).is('h3')) {
$(e.target).toggleClass('highlighted');
}
});
});
Here we bind the click event handler to the bodyelement. Because
this is not in the portion of the document that is changed when the
AJAX call is made, the event handler never has to be re-bound.
However, the event context is now wrong, so we compensate for this by
checking what the event's target attribute is. If the target is of
the right type, we perform our normal action; otherwise, we do nothing.
---
More coming soon!
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423http://www.structureinteractive.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Help with animate()
On Feb 27, 2007, at 0:45 , David wrote:
I'm trying to understand how the animate function works, but I'm
not finding the documentation very helpful. As an example I would
like to move one div to the right 100 pixels. I thought that the
following code might do it but I get no movement whatsoever.
$(#myDiv).animate({right: 100}, slow);
In addition to the comments already given, you will want to change
right to left here. To move an item to the *right*, you need to
change its distance from the *left* side of the enclosing element.
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423http://www.structureinteractive.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Unable to chain Find with multiple classes
On Feb 20, 2007, at 13:21 , Jake McGraw wrote:
Thanks Blair, that works, here I was thinking filter() filtered
out all matched elements, I must be getting dyslexia. But that
still doesn't answer why find() won't work on jQuery objects
selected using classname.
It does. The difference between .filter() and .find() is that the
former searches through the matched elements, while the latter
searches through the *descendants* of the elements. I believe that
when you say:
So, my question is, if find() will operate on elements of the same
level using element name or id ($(li).find(.group) returns all
li.group) why won't it work on elements of the same level when using
only class names ($(.group).find(.us) returns nothing)?
you must have seen a result that was coincidentally what you
expected. Given the HTML:
div class=foo barTest/div
$('div.foo') selects the element
$('div').filter('.foo') selects the element
$('div').find('.foo') does not select the element
similarly,
$('.foo.bar') selects the element
$('.foo').filter('.bar') selects the element
$('.foo').find('.bar') does not select the element
If it appeared that .find() was selecting elements already in the
matched set, this is because an ancestor of the elements was already
in the matched set.
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423http://www.structureinteractive.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] Parent Selection Problem
On Feb 15, 2007, at 12:02 , Mahadewa wrote:
var parent = $(this).parents('div.parent');
Is this not the same as to say: Select element (of 'this') which
parent is
'div.parent' ?
Nope, not the same. The way to read this is:
- Wrap the DOM element this in a jQuery object.
- Find all parents of the element that match div.parent.
--
Jonathan Chaffer
Technology Officer, Structure Interactive
(616) 364-7423http://www.structureinteractive.com/
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
Re: [jQuery] update a div within a submit
On Sep 6, 2006, at 13:32 , kain wrote:
I just want to ask what's the equivalent code of updating a div with
the results of a form action when hitting a submit button of jquery
instead of scriptaculous and prototype.
I think you're going to want to use the forms plugin for this.
On this page:
http://jquery.com/plugins
you'll want Forms Plugin (with AJAX).
With that included, you can simply do:
$('#id-of-my-form').ajaxSubmit('#id-of-my-div');
and the form will automagically populate the div with its results.
___
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/
