What are your top five plugins for jQuery that must be available when you start a new project?
I don't know about you, but I have a gazillion jQuery bookmarks that I need to wade through someday and trim that list down to something manageable. Plus, who knows how long Yahoo is going to keep floating delicious.
Last week, I tweeted that I freaking love jQuery's live(). I meant every word too! It's really useful, especially when you're working with ajax. I got some responses on twitter, some people agreed and others weren't really sure where they would use it. So, I'd figure I'd provide an example.
With ajax, it's possible to return HTML to the calling page. Whether you prefer doing it or not, it's possible. Some people prefer to return JSON and build the appropriate HTML, some find it easier to return HTML to the server. Regardless, that HTML that is returned via ajax may or may not contain a link. The link itself may be requested to kick off some javascript function. The problem is, that HTML was loaded in after the fact and isn't necessarily bound to the existing DOM events already on the page.
Well, that's where live() comes in. So, let's start with this plain example:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').before('<a href="#" class="button">This is a link</a>');
$('.button').click(function(){ alert('foo!'); return false; });
});
</script>
</head>
<body>
<p><a href="#" class="button">Test #1</a></p>
<div id="test"></div>
</body>
</html>
So, we're keeping this example simple. I have a static link on the page and you'll also see that I'm actually creating a link via jQuery and inserting the link before the <div id="test"></div>. Both links work and will alert foo! when you click it. No need for live() here yet. A live example of this can be found here.
I have a file called test.html that contains the following:
<br /><a href="#" class="button">Test #2</a>
So, let's modify our example code a little and pull this in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').before('<a href="#" class="button">This is a link</a>');
$('.button').click(function(){ alert('foo!'); return false; });
$('#test').load('test.html');
});
</script>
</head>
<body>
<p><a href="#" class="button">Test #1</a></p>
<div id="test"></div>
</body>
</html>
Live example of the above code. So, we used jQuery's load() to go open test.html and inject the content of test.html straight into <div id="test"></div>. View the page. Click on the links and make sure you get an alert box from javascript saying, foo! Your third link failed didn't it? Why? Because that HTML that was pulled in via ajax wasn't part of the current DOM. You pulled that in after the fact and jQuery is unaware of it.
Let's go read the 1st sentence of live() again: Binds a handler to an event (like click) for all current - and future - matched element. So, by that statement, the HTML pulled from test.html is considered "future" elements. So, now it's time to go tell our time traveling element that it has a click event that it has to adhere to.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').before('<a href="#" class="button">This is a link</a>');
$('#test').load('test.html');
$('.button').live('click', function(){ alert('foo!'); return false;} ); // this line can be anywhere
});
</script>
</head>
<body>
<p><a href="#" class="button">Test #1</a></p>
<div id="test"></div>
</body>
</html>
Live example of the above code. Notice that we have changed our $('.button').click({ function here }); to $('.button').live('click',{ function here });. So now we have put an click event handler on our existing elements and our time traveling elements. Clicking on all links should now return foo! So, essentially, live() is a nice way of making sure that all current and future elements have event handlers on them. This can be used for any elements, not just links.
Hope this helps someone.
Preamble: While I am a Volunteer Community Manager for Railo, the opinions expressed in this post are my own.
Kind of sad that I have to preamble my own opinions isn't it? :) I was reading Ray Camden's blog post on YQL (Yahoo Query Language), it inspired me to get off my ass and write this blog post I've been meaning to for awhile. I meant to do it with Ray's maze example (thus creating <cfmaze>), but the YQL post was even better because it was something that was immediately useful and hopefully this will show Yahoo that we're still here. Grant Straker recently posted Why Railo kicks butt for ColdFusion based SaaS and I couldn't agree more. This is the kind of stuff that has me excited about CFML. This is the out of the box thinking I want to keep pushing. This is the kind of stuff that enables me to explain why I'm so passionate about my language of choice.
While the language should continue to evolve, there's no reason why we can't put more tools in front of us, the CFML developers that drive this language. You have the chance to be a tag developer without the need to settle for your tag being "just another custom tag." Your code has a potential future to be the 'glue' of something bigger. With all the open source engines available at the moment, you should be able to pick up one of them and extend the language. If you know Java, great! If you don't you should not feel as if you're being excluded from the CFML tag soup party. Railo enables you as CFML developers to create built-in-tags and built-in-functions using... CFML!
Matt Woodward recently announced that he's working on CFPOI. I realize that CFSpreadsheet is built into Adobe ColdFusion 9, but here's a chance for anyone to get involved with Matt and expand this even further for those of us that aren't on Adobe ColdFusion. Yes, we should abhere to the standards that opencfml.org is creating, but we should also feel empowered to INSPIRE and INNOVATE.
As a developer, if I created a worthwhile extension to the cfml language, I should feel as if I have the choice to approach the community representives of opencfml.org which at the moment looks to be Rob Brooks-Bilson, Ray Camden and Peter Farrell. Propose the tag, show it off (using custom tags or mock-up the whole thing in Railo as a built-in-tag). You can and should get involved.
Are you into APIs? Facebook? Twitter? The Gazillion APIs available around us? You could be developing <cftwitter> or <cffacebook> right now! Todd Sharp, creator of SlideSix, recently announced the ability to put a widget on your website (example on Ray Camden's blog). He also created an API for SlideSix for anyone to tap into. What's stopping anyone from creating <cfslidesix>?
Certainly not Railo.