HTMLTree - A Growing Repository for Web Designers and Developers

I’ll admit, I resisted the use of frameworks. I believe in understanding the core structure and building from it. But after 2 years of working with heavy Javascript, I decided it was time to test out some frameworks to speed up my work.

There’s about 100+ Javascript frameworks out there. Picking one was no easy task. I took about 2 weeks to test out a handful of frameworks and ended up choosing jquery.

It’s tiny. no overhead. It also has a well supported community. Which means plugins galore. And it based off of CSS syntax. So there’s very little learning curve.

And the best feature of all… it’s cross browser compliant!!

No more MSIE hacks or special code for Opera. Your complex Javascript will work on all browsers. That’s a saving of 2 weeks worth of programming already!

With MooTools and Prototype, you have to be careful not to use the same variable name as their API. But not with jQuery. It is completely isolated in it’s scope and won’t affect any global namespace.

Yahoo UI and Dojo, well those are big boys. And i mean HUGE files. I prefer small footprint over bulky features. In fact, I’ll stab my eye out before I use Dojo… but I’ll digress.

Ok, enough chit-chat, lets get down to business.

Init

$(document).ready(function(){
  // init method
});

The init. When the HTML page is loaded, and all the DOM is rendered, JQuery will kick into action with the init function. It’s similar to the onload method in javascript, but smarter.

The secret of the init, just like any other language, is how you use it. This can be a powerful technique given the correct discipline.

Here is HTMLTree’s recommendation:

Events

Set your events. You can save tons of code, which equals savings in bandwidth and download time, if you remove all those onclick and onmouseover attributes in your tags. Set them in one place; the init. It’ll save time when you have to update or modify your events. Go to one place, update the code, and charge your clients .25 hours of work.

$(document).ready(function(){
  // init method

  // add onblur to <input type='text' id='zipCode' />
  $("input[type='text'][id='zipCode']").blur( function () {
  	getState($this.val());
  });
});

In the example above, the HTML will render to this:
<input type='text' id='zipCode' onblur='getState(this.value)' />

CSS

Set your style. There’s been so much talk on presentation layer verses model crap. Well here’s a nice way to satisfy both the developer and designer. Set all your CSS in the init. You can get pretty advance with this technique given JQuery’s engine.

$(document).ready(function(){
  // init method

  // set all anchor tags to CSS cursor='pointer'
  $("a").css("cursor", "pointer");
  // set all anchor tags that start with 'marketing' to CSS color='#CCC'
  $("a[href^='marketing']").css("color", "#CCC");
});

Sure you can set all of this in your style sheet. But sometimes you just need to set it for one page. Or you need to overwrite a CSS depending on a Javascript event. It gets very useful once you start adding Ajax calls and returning a nice green complete status message to your end user. We’ll drill into that trick further down this tutorial.

Hopefully by now you have a little understanding on how to access the DOM through jQuery.

Let’s learn by example…

jQuery by Examples

// <textarea name='foo'>
$("textarea").attr("name", "foo");

// <div style='color: blue;'>
$("div").css("color", "blue");

// <div class='apple' style='display: none;'>
$(".apple").hide();

// <div id='pear'>
$("#pear").show();

// <table id='data'>
//  <tr>
//    <td style='text-align: center;'>
$("table[id='data']").find("tr").children().css("text-align", "center");

// self explanatory?
function removeLastRow( tableID ) {
	$("#tableID").find("tr:last").remove();
}

HTMLTree’s tip: When I first worked with jQuery, I kept trying to use $(”tableID”) to call a table tag with id=’tableID’. After a few minutes of frustration, it finally occurred to me that since the attribute is an ID, I had to use the “pound” symbol. So the correct reference is $(”#tableID”). Keep that in mind when you’re writing your first jQuery code.

AJAX

Ahh, here we are. This is the goood part

$(document).ready(function(){
  // init methods

  // hide loading gif
  $("img[id='loading']").hide();

  // if a button is pushed
  $("input[type='button']").click(function(){

    // display loading gif
    $("img[id='loading']").show();

    // send an ajax command
    $.ajax({
       type:     "POST",
       url:      "doSomething.php",
       data:     "sessionID=1234&username=Rick",
       dataType: "html",
       success: function( html_from_doSomething_php ){
         // if successful...
         $("img[id='loading']").hide();
         alert( html_from_doSomething_php );
       },
       error: function( html_from_doSomething_php ){
         // if error...
         $("img[id='loading']").hide();
         alert( "error occurred" );
       }
    }); // end of ajax

  }); // end of onclick

}); // end of init

This is my basic Ajax call. I always display a loading gif when an Ajax command is being executed. But the choice is up to you.

HTMLTree’s tip: If you need a synchronous Ajax call, instead of async, I recommend using the blockUI plugin. This amazing plugin will hold up the user’s screen until the Ajax command is completed. In technical term, it’s a modal box.

Extra Stuff

I recommend checking out some of these jQuery demos/plugins:

• 50 Amazing jQuery Examples (Part 1)
• jCache - A Client Side Cache Plugin
• jQuery SOAP Client
• SuperFlyDOM
• BlockUI Plugin
• Ajax Queue
• DatePicker - Calendar Plugin