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!