QuackFuzed.com is the personal ColdFusion coding blog of Matt Quackenbush. It exists primarily as a place for the author to learn, and hopefully to assist others in learning and/or avoiding some of the same pitfalls and mistakes. (Quack certainly makes enough mistakes daily to make up for the entire ColdFusion community.)
jQuery DOM Manipulation
Posted on January 21, 2008 at 2:10 AM in General, jQuery
In case you hadn't heard yet, jQuery is a seriously bad-ass, lightweight library that I'm in love with. Here's what the official jQuery site has to say about it:
"jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript."
However, you can always leave it to a guy like me to find a way to screw things up.
Latest Articles
- No recent entries.
Categories
- ColdBox (21) [RSS]
- ColdFusion (92) [RSS]
- Fusebox (3) [RSS]
- General (22) [RSS]
- jQuery (15) [RSS]
- Kalendar (1) [RSS]
- Linux (1) [RSS]
- Mura CMS (1) [RSS]
- Railo (1) [RSS]
- Rants (5) [RSS]
- Transfer (8) [RSS]
- Uni-Form Tag Library (36) [RSS]
On 1/21/08 at 1:15 PM, Dan G. Switzer, II said:
This seems to be a pretty common misconception amongst developers new to jQuery. When execute methods against a jQuery object/selector, it only knows about DOM objects that are currently in the DOM.
You can think of this like running SELECT SQL statement in CFQUERY. If some records are added/changed *after* you run the query, ColdFusion won't be aware of the changes unless you re-run the query.
Personally, I've stayed away from the LiveQuery plug-in. Instead when I have logic that I know I'll need to attach to DOM elements in the future, I just use a helper function to attach the events to DOM elements. This gives me explicit control over what's happening and it doesn't add overhead of monitoring the DOM.
Lots of people have used LiveQuery and had great success, but controlling things manually is my preference.
Hopefully this post might help others to understand the problem in a little more detail.
On 1/21/08 at 2:56 PM, Matt Quackenbush said:
As a developer, I most definitely understand wanting as much control as possible over your environment, but as a jQuery n00b, I find that I often have to give up some control to get things accomplished in a timely fashion. Just like when I was a CF n00b all those years ago, I used all sorts of tags that I wouldn't touch with a 10-ft pole today (e.g. cfform, cfinsert, cfupdate, etc).
On 1/21/08 at 3:09 PM, Dan G. Switzer, II said:
A simple example would be:
function clickMe(o){
o.bind("click", function (){ alert('click me'); }).show();
}
Now for any element you want to attach the clickMe event and make sure the element is visible, you could just do:
clickMe( $('div.clickme') );
That's a simplified example, but it easily allows you to perform the exact same logic/conditions to multiple jQuery objects.
On 1/21/08 at 4:46 PM, Josh Nathanson said:
I am with you there Dan as far as not necessarily using LiveQuery. I only use it if I have a particularly complex UI that may have several event handlers that need to be rebound upon DOM insertions. If I only have one or two such rebindings I will set up a binder function as in your example.