Painless Web 2.0 with jQuery
Comments (0) 
Allow me introduce you to my new favorite web tool: jQuery. jQuery is a handy java script that allows you to add AJAX functionality to your website without too much fuss at all.
After placing the jquery.js (obtained from jQuery.com) file in your website’s path (ex. yoursite.com/include/) you simply need to add two javascript references in your page header:
<script src='include/jquery.js'></script>
<script src='include/scripts.js'></script>
The scripts.js file is where all the custom functionality code goes. Here’s an example, where links clicked in a div named #nav will load the new content into the #content div without refreshing the whole page:
$(document).ready(function() { // after page is loaded, this is called automagically $('#nav li a').click(function() { var query = $(this).attr('href'); // this is what appears in the href tag $('#content').hide('slow',loadContent); // hides the div, calls loadContent() function loadContent() { $('#content').load(query,'',showNewContent()); // pull the request into the div } // calls showNewContent() function showNewContent() { $('#content').show('fast'); // show the new page content } return false; // returning false indicates the event was processed });});
No change to the actual page markup was required to make this happen at all. A small hurdle I encountered working with jQuery was that having an event bound to content inside the div #content would cease to function once new content was brought in. The reason for this is that jQuery loads the event binding based on what is on the page at first load. The easy way to solve this is to add the Live Query plugin for jQuery. Put it in your include directory with the other two scripts, and reference the script after jQuery but before your site’s script:
<script src='include/jquery.js'></script>
<script src='include/jquery.livequery.js'></script>
<script src='include/scripts.js'></script>
You will need to perform the related event binding to use Live Query slightly different from a normal jQuery binding:
$(document).ready(function() { // after page is loaded, this is called automagically $('#content a').livequery('click', function() { // livequery auto-binds when tags change var query = $(this).attr('href'); // this is what appears in the href tag alert('You clicked this link: ' + query); return false; // returning false indicates the event was processed });});
Yup, it’s just that easy – and once again, no change was made to the page markup. There is no end to the applications of jQuery and it’s related plugins. Happy coding, and welcome to Web 2.0!
I realize these clips are old, but I only just stumbled upon them today. I’ve caught a few of the Late Show episodes over the years and love the top ten list, but I’ve not really been a follower of it.
Themocracy