As much as I love jQuery and all its great uses I still have a lot to learn from it, and event delegation was one of those useful features. I have become fairly well versed in the animation field with interactions but until now had not dealt with an ajax update of a page that had items hidden by default  after it has loaded. The use for us was within the application section of the listings settings where the administrator is able to add, edit, or delete an application and the page would update the field showing them.

Let’s get into some of the code and see what is actually happening. This is the html that is being manipulated…

<div id="current-applications">
	<p>
		<a href="#" class="pdf-icon">My App</a>
		<a href="#" class="edit-link">Edit</a> |
		<a onclick='ajax_delete_app();' class="delete-link">Delete</a>
	</p>
	<form name="myform" method="post" enctype="multipart/form-data">
	<table class="edit-listings-box" cellpadding="0" cellspacing="0" border="0" width="100%">
		<tr>
			<td>
			<!-- Information about application -->
                        <input type="submit" class="update-link" value=\"Update\" />
			</td>
		</tr>
	</table>
	</form>
</div>

By default, the code above will hide the form and show the information only after the user clicks the application name “My App” or “Edit”. The “Delete” link will call some ajax functionality to delete the record and file attached to it; after which, it will redisplay all the information inside of the <div id=”applications”></div>. Now the event delegation comes in handy. Because the page information is reloading we need to use event delegation to always make the jQuery calls viable on the newly created output. The structure of the above html is used in the jQuery code to handle the animations even after a page update. The classes and ids need to be the same for the links and surrounding elements every time it is outputted so the event delegation can access the the correct segments.

//jQuery Event Delegation
$('#applications').click(function (e) {
	if($(e.target).attr('class') == 'edit-link') {
		$(e.target).parent().next().contents().filter(".edit-listings-box").toggle("blind");
	}else if($(e.target).attr('class') == 'pdf-icon') {
		$(e.target).parent().next().contents().filter(".edit-listings-box").toggle("blind");
	}else if($(e.target).attr('class') == 'done-link') {
		$(e.target).parent().parent().parent().parent().toggle("blind");
	}else if($(e.target).attr('class') == 'update-link') {
		$(e.target).parent().parent().parent().parent().parent().submit();
        }else if($(e.target).attr('class') == 'delete-icon') {
		if($(e.target).parent().next().contents().filter(".edit-listings-box").is(':visible')) {
			$(e.target).parent().next().contents().filter(".edit-listings-box").hide("blind");
		}
	}

	return false;
});

As you can observe, the jQuery code above will only deal with <a> tags inside the element with the id=”applications”. It will then check the class of the link and take the appropriate action. If you aren’t familiar with jQuery, the code referencing the element to hide may look odd but it is just  used to traverse the html. Anyway this is just a very basic idea of event delegation and how it was used within our web application. If you have any specific questions regarding the subject you are more than welcome to email me and ask. Take it easy!

The tabs that jQuery has made available are some of the most useful and powerful tools that I have used within a new web application for a long time but as with anything there are a few things that aren’t built in which need to be remedied.

The first thing we need to do is create the jQuery code and the HTML for the tabs, don’t forget to include the jQuery files…

jQuery Tab Information

$(function(){

// Initialize Tabs
$('#my-tabs').tabs();

});

HTML tab code

<div id="my-tabs">
	<ul>
    		 <li><a href="#my-tabs-1"><span>One</span></a></li>
    		 <li><a href="#my-tabs-2"><span>Two</span></a></li>
    		 <li><a href="#my-tabs-3"><span>Three</span></a></li>
	</ul>
	<div id="my-tabs-1">
		<p>First tab is active by default</p>
	</div>
	<div id="my-tabs-2">
		<p>Second tab</p>
	</div>
	<div id="my-tabs-3">
		<p>Third tab</p>
	</div>
</div>

Now that we have the basics of the tabs set up you just have to add a little bit of code to check if a hash has been passed through the URL and then select that tab. The way that this would be called would be something like, although it wont work:

http://www.getrentwiz.com/test-tabs/index.html#2

So here is the code that will added below the tab initialization that will allow the tab to be selected.

$(function(){

// Initialize Tabs
$('#my-tabs').tabs();

if(document.location.hash!='') {
        //get the index from URL hash
      	tabSelect = document.location.hash.substr(1,document.location.hash.length);
	$("#my-tabs").tabs('select',tabSelect-1);
}

});

Now as you will see in the code that we subtract the number passed through the hash by 1, this is to accommodate the 0-based index that arrays use. So for example, passing 2 would return the select of 1, which is array[1], or the second tab. I hope this helps out a few people that ran into the same problem but I cant take all the credit, most of this was learned from Raymond Camden from O’Reilly InsideRIA and a few others.

Thanks for the interest!

Two Clicks or Less Rule

Through-out the design process and the following iterations, we focused on trying to make features as close as 1 or 2 clicks would get you. No one should have to wade through long navigation menus and obstacles just to add the listing data.

The flip side of this is that most often, in an effort to make all the major features in a site immediately accessible, some designers will go overboard and overload the page with links and shortcuts. This causes unwanted clutter in many cases and turns out to be counter productive as the end-user has no idea of a navigational structure and is left to figure it out for themselves.

We simply designed a navigational structure that allows us to quickly move a person from one section of the app to the other within one to two clicks. By making this our mantra, we forced ourselves to “lean” the app out, cutting unnecessary pages and combining features, or simplifying them so that they could be pulled into similar pages.

Other Pages

One of the benefits of developing an app for a very specific group of users is that you get to pick and choose much of the technology and development techniques that you want to use for the app. We were able to use a fair amount of the jQuery framework to bring in great javascript features and some AJAX to further reduce page loads and navigational flow.

Concerns

One of the issues we are dealing with now is planning future development and expansion of the app and how it will effect the design of the application in it’s current state. Additionally we are working hard to ensure that we don’t restrict the user’s ability to interact with the application because of AJAX / javascript / browser limitations.

Above all, our goal is to make RentWiz as useable as possible!

Over the next few months & years, BLUETUX staff will be communicating with you as we build, polish and grow the RentWiz application. At the moment, you’ll be hearing from Creative Director Sam Howat, and Lead Developer Art Armstrong. They will post their thoughts, questions and updates to the blog as often as is possible.

Please feel free to subscribe to our RSS feed to stay current.

In the meantime, if you’re interested in learning more about RentWiz, head over to the about RentWiz page and you’ll be able to get a basic idea for what we’re about.