Case Study
Quick jQuery rewrite replaces a week’s worth of buggy code
The client
The client provides web design services.
The problem
The client had been working with a front-end developer for more than a week to write the jQuery for a tab-based interface that fetched its content using AJAX. The interface was buggy in Firefox and broken in Internet Explorer, and the client had already exceeded the budget for the project. The client called on me to address the bugs and add some new features, all in time for a launch in a couple of days.
How we met
The client had advertised for a jQuery, HTML and CSS developer.
My solution
I rapidly ascertained that the existing code would need to be replaced; it had been written by a junior developer in over his head.
The basic pattern of the feature was one with which I was very familiar; I knew that I could rewrite it faster than I could fix it. I presented the client with a plan for rewriting the jQuery from the ground up: I would address fundamental structural issues, organize the code for easier extensibility, and make the code configurable for easier reuse. The client approved the plan; five hours later, the rewritten feature was complete.
The outcome
The client got well-written, extensible code in a matter of hours after struggling to get working code from the junior developer for more than a week. Now, they work with me directly at the beginning of projects rather than rolling the dice with junior developers who may not be able to deliver.
-
Old Code
// NAVIGATION
function togglePage(section) {
// if the clicked section is already the current section AND we're in full page mode
// minimize the current tab
if (jQuery('#md_tab_'+ section).hasClass('current') && jQuery('#md_tab_'+ section + ' a').hasClass('md_fullpage')) {
// alert('clicked section is current section AND fullpage mode is active; teaser should load');
// Minimize
jQuery('#md_tabs_navigation a').removeClass('md_fullpage');
jQuery('.md_body').hide();
jQuery('#md_feature').slideDown('normal',function(){
var bodyContent = jQuery('#md_body_'+ section);
bodyContent.fadeOut('normal',function(){
jQuery('#md_tabs_navigation a').each(function(){
var thisSection = jQuery(this).html().replace('<span>','').replace('<\/span>','');
var thisSection_comp = thisSection.toLowerCase().replace(' ','_');
jQuery('#md_body_'+ thisSection_comp).load(
'/app/modules/info/loadTeaser.php?sect='+ thisSection_comp,
function(){
tb_init('.md_body a.thickbox, .md_body area.thickbox, .md_body input.thickbox');
bodyContent.animate({ height: 'toggle', opacity: 'toggle' },"slow");
}
);
});
});
});
jQuery('#expandtabs span').empty().append('Expand Tabs');
} else {
// if the clicked section is NOT the current section OR we're NOT in full page mode
// then let's go to full page mode and show the whole tab
// Maximize
// alert('clicked section is not the current section OR full page mode is not active; full section should load');
jQuery('#md_tabs_navigation li').removeClass('current');
jQuery('#md_tab_'+ section).addClass('current');
jQuery('#md_tabs_navigation a').addClass('md_fullpage');
jQuery('.md_body').hide();
jQuery('#md_feature').slideUp('normal',function(){
var bodyContent = jQuery('#md_body_'+ section);
bodyContent.fadeOut('normal',function(){
bodyContent.empty();
var pageLoader = 'info/loadSection.php?sect='+ section;
if (section == 'contact_us') {
pageLoader = 'contact/loadContactForm.php?form_id=1';
}
bodyContent.load('/app/modules/'+ pageLoader,function(){
// ADD THICKBOXES
tb_init('.md_body a.thickbox, .md_body area.thickbox, .md_body input.thickbox');
$recent_news_links = jQuery('ul.md_news li a.recent_news_link');
$recent_news_links
.unbind('click')
.each(function(){
var hrefMod = this.href;
hrefMod = hrefMod.replace(/article/,'loadNews').replace(/storyid/,'id');
this.href = hrefMod;
})
.click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});
// ACCORDION
jQuery('div.applemenu div.submenu').hide();
jQuery('div.applemenu div.silverheader > a').click(
function(){
jQuery('div.silverheader').removeClass('selected');
jQuery(this).parent().addClass('selected');
var $nextDiv = jQuery(this).parent().next('div.submenu');
var $visibleSiblings = $nextDiv.siblings('div:visible.submenu');
if ($visibleSiblings.length){
$visibleSiblings.slideUp('fast',function(){
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
}
);
// SHOW CONTENT
bodyContent.animate({ height: 'toggle', opacity: 'toggle' },"slow",function(){
jQuery('#expandtabs span').empty().append('Minimize Tabs');
});
});
});
});
}
}
// ENABLE EXPAND/MINIMIZE LINK
jQuery('div#expandtabs span').wrap('<a id="expandtabs_toggle"><\/a>');
jQuery('a#expandtabs_toggle').click(function(){
var currentTab = jQuery('ul#md_tabs_navigation li.current').attr('id').replace('md_tab_','');
togglePage(currentTab);
});
// LOAD TEASER CONTENT FOR TAB ROLLOVERS
var currentSection = jQuery('#content h1').html();
jQuery('#md_tabs_navigation a').each(function(){
var thisSection = jQuery(this).html().replace(/<\/?[^>]+>/gi,'');
var thisSection_comp = thisSection.toLowerCase().split(' ').join('_');
jQuery(this).parent('li').attr({ id: 'md_tab_'+ thisSection_comp });
if (thisSection == currentSection) {
jQuery('.md_body').attr({ id: 'md_body_'+ thisSection_comp });
jQuery(this).parent().addClass('current');
} else {
jQuery('#md_content').append('<div class="clearfix md_body" id="md_body_'+ thisSection_comp +'"><\/div>');
jQuery('#md_body_'+ thisSection_comp).hide();
}
var $thisSection_content_div = jQuery('#md_body_'+ thisSection_comp);
jQuery.ajax({
url: '/app/modules/info/loadTeaser.php?sect='+ thisSection_comp,
type: 'GET',
dataType: 'html',
beforeSend: function(){
$thisSection_content_div.empty().append('<p class="loadingAnimation" id="loading_'+ thisSection_comp +'"><img alt="" height="32" src="/images/ajax-loader.gif" width="32" /><\/p>');
},
success: function(r){
jQuery('#loading_' + thisSection_comp).remove();
$thisSection_content_div.html(r);
$recent_news_links = jQuery('ul.md_news li a.recent_news_link');
$recent_news_links
.unbind('click')
.each(function(){
var hrefMod = this.href;
hrefMod = hrefMod.replace(/article/,'loadNews').replace(/storyid/,'id');
this.href = hrefMod;
})
.click(function(){
var t = this.title || this.name || null;
var a = this.href || this.alt;
var g = this.rel || false;
tb_show(t,a,g);
this.blur();
return false;
});
jQuery('.md_body a.thickbox, .md_body area.thickbox, .md_body input.thickbox').unbind('click');
tb_init('.md_body a.thickbox, .md_body area.thickbox, .md_body input.thickbox');
jQuery('.readmore a', $thisSection_content_div).unbind().click(function(){
var readMore_comp = jQuery(this).parent('div').parent('div').attr('id').replace('md_body_','');
togglePage(readMore_comp);
return false;
});
}
});
if (thisSection_comp != 'home') {
jQuery(this).hover(
function(){
if (jQuery(this).hasClass('md_fullpage')) {
} else {
jQuery('#md_tabs_navigation li').removeClass('current');
jQuery(this).parent().addClass('current');
jQuery('#md_body_'+ thisSection_comp).show().siblings().hide();
}
},
function(){
}
).click(
function(){
togglePage(thisSection_comp);
return false;
}
);
}
});
-
New Code
jQuery(function(){
var $ = jQuery;
// config variables
var config = {
xoAppUrl: '/app',
xoImgUrl: ''
};
// content controller
var cc = {
mode : 'teaser',
featureVisible : true,
$loader : '<p class="loadingAnimation"><img height="32" src="' +
config.xoImgUrl +
'/images/ajax-loader.gif" width="32" /></p>',
contactsFullUrl : config.xoAppUrl + 'modules/contact/loadContactForm.php?form_id=1',
urls : {
// one entry per mode
'teaser' : config.xoAppUrl + 'modules/info/loadTeaser.php?sect=',
'full' : config.xoAppUrl + 'modules/info/loadSection.php?sect='
},
showTab : function($li) {
$li.data('contentArea').show().siblings().hide();
$li.addClass('current').siblings().removeClass('current');
cc.loadContent($li, function() {
cc.showContent($li);
cc.$currentTab = $li;
});
},
showTabByName : function(tab, mode) {
var $li = $('#tab_' + tab);
if (mode != cc.mode) {
cc.$currentTab = $li;
cc.toggleMode();
} else {
cc.showTab($li);
}
},
showContent : function($li) {
var mode = $li.data('mode');
var $bucket = $li.data(mode);
var $contentArea = $li.data('contentArea');
$bucket.show().siblings().hide();
},
loadContent : function($li,callback) {
var callback = callback ? callback : function() { };
var $c = $li.data('contentArea');
var t = $li.data('tabName');
var mode = $li.data('mode');
var loaded = $li.data('loaded');
var doLoad = true;
if ($.inArray(mode, loaded) != -1) {
doLoad = false;
}
if (doLoad) {
$li.data('wait').show().siblings().hide();
var url = (t == 'contact_us' && $li.data('mode') == 'full') ?
cc.contactsFullUrl : // exception for contact tab in full mode
cc.urls[mode] + t;
$li.data(mode).load(
url,
function() {
loaded.push(mode);
$li.data('loaded', loaded);
cc.enableModal($li);
cc.enableMoreLinks($li);
cc.fixEmail($li);
callback();
}
);
} else {
callback();
}
},
fixEmail : function($li) {
var $spans = $li.data('contentArea').find('span.mail');
$spans.fixEmail();
},
enableModal : function($li) {
// hook up thickbox for a given content area
var $c = $li.data('contentArea');
$c.find('a.thickbox').unbind('click').click(function(e) {
e.preventDefault();
var $a = $(this);
tb_show($a.attr('title'), $a.attr('href'), $a.attr('rel'));
});
},
enableMoreLinks : function($li) {
var $c = $li.data('contentArea');
$c.find('div.readmore a').unbind('click').click(function(e) {
e.preventDefault();
cc.toggleMode();
});
},
toggleMode : function() {
// toggle mode of all tabs at once
cc.mode = (cc.mode == 'teaser') ? 'full' : 'teaser';
cc.$tabs.each(function() {
$(this).data('mode', cc.mode);
});
switch (cc.mode) {
case 'full':
$('#expandtabs span').text('Minimize Tabs');
$('#md_feature').slideUp('fast');
cc.featureVisible = false;
break;
case 'teaser':
default:
$('#expandtabs span').text('Expand Tabs');
$('#md_feature').slideDown('fast');
cc.featureVisible = true;
break;
}
cc.showTab(cc.$currentTab);
},
enableTab : function($li) {
$li.bind('mouseover', function() {
switch ($li.data('mode')) {
case 'full':
// no mouseover behavior
break;
case 'teaser':
default:
cc.showTab($li);
break;
}
});
$li.click(function(e){
e.preventDefault();
if ($li.hasClass('current')) {
cc.$currentTab = $li;
cc.toggleMode();
} else {
cc.showTab($li);
}
});
},
init : function() {
$('#content').empty();
// get all the tab li's
cc.$tabs = $('#md_tabs_navigation li').each(function() {
var $li = $(this);
var href = $li.find('a').attr('href').split('/');
var tab = href[href.length - 1].replace('.html','');
if (tab) {
var $contentArea = $('<div/>').appendTo('#content').hide();
var $teaser = $('<div class="teaser" />').appendTo($contentArea);
var $full = $('<div class="full" />').appendTo($contentArea);
var $wait = $('<div class="wait" />').appendTo($contentArea).
append(cc.$loader);
$li.data('contentArea', $contentArea);
$li.data('teaser', $teaser);
$li.data('full', $full);
$li.data('wait', $wait);
$li.data('tabName', tab);
$li.data('mode', 'teaser');
$li.data('loaded', [ 'none' ]);
$li.attr('id', 'tab_' + tab);
// load the initial content for the tab into its content area
cc.loadContent($li);
cc.enableTab($li);
}
});
$('#expandtabs').css({cursor:'pointer'}).click(cc.toggleMode);
cc.initialized = true;
cc.showTab($('#md_tabs_navigation li:first'));
}
};
cc.init();
});