jQuery programming style?
- by Sam Dufel
I was recently asked to fix something on a site which I haven't worked on before. I haven't really worked with jQuery that much, but I figured I'd take a look and see if I could fix it.
I've managed to mostly clear up the problem, but I'm still horrified at the way they chose to build this site.
On document load, they replace the click() method of every anchor tag and form element with the same massive function. When clicked, that function then checks if the tag has one of a few different attributes (non-standard attributes, even), and does a variety of different tasks depending on what attributes exist and what their values are.
Some hyperlinks have an attribute on them called 'ajaxrel', which makes the click() function look for another (hidden) hyperlink with an ID specified by the ajaxrel attribute, and then calls the click() function for that other hyperlink (which was also modified by this same click() function).
On the server side, all the php files are quite long and have absolutely no indentation.
This whole site has been a nightmare to debug. Is this standard jQuery practice? This navigation scheme seems terrible. Does anyone else actually use jQuery this way? I'd like to start incorporating it into my projects, but looking at this site is giving me a serious headache.
Here's the click() function for hyperlinks:
function ajaxBoxA(theElement, urltosend, ajaxbox, dialogbox) {
if ($(theElement).attr("href") != undefined)
var urltosend = $(theElement).attr("href");
if ($(theElement).attr('toajaxbox') != undefined)
var ajaxbox = $(theElement).attr('toajaxbox');
// check to see if dialog box is called for.
if ($(theElement).attr('dialogbox') != undefined)
var dialogbox = $(theElement).attr('dialogbox');
var dodialog = 0;
if (dialogbox != undefined) {
// if dialogbox doesn't exist, then flag to create dialog box.
var isDiaOpen = $('[ajaxbox="' + ajaxbox + '"]').parent().parent().is(".ui-dialog-container");
dodialog = 1;
if (isDiaOpen) {
dodialog = 0;
}
dialogbox = parseUri(dialogbox);
dialogoptions = { close: function () {
// $("[id^=hierarchy]",this).NestedSortableDestroy();
$(this).dialog('destroy').remove()
} };
for ( var keyVar in dialogbox['queryKey'] )
eval( "dialogoptions." + keyVar + " = dialogbox['queryKey'][keyVar]");
};
$("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");
$('#TB_load').show();
if (urltosend.search(/\?/) > 0) {
urltosend = urltosend + "&-ajax=1";
} else {
urltosend = urltosend + "?-ajax=1";
}
if ($('[ajaxbox="' + ajaxbox + '"]').length) {
$('[ajaxbox="' + ajaxbox + '"]').each( function () { $(this).empty(); });
};
$.ajax({
type: "GET",
url: urltosend,
data: "",
async: false,
dataType: "html",
success: function (html) {
var re = /^<toajaxbox>(.*?)<\/toajaxbox>+(.*)/;
if (re.test(html)) {
var match = re.exec(html);
ajaxbox = match[1];
html = Right(html, String(html).length - String(match[1]).length);
}
var re = /^<header>(.*?)<\/header>+(.*)/;
if (re.test(html)) {
var match = re.exec(html);
window.location = match[1];
return false;
}
if (html.length > 0) {
var newHtml = $(html);
if ($('[ajaxbox="' + ajaxbox + '"]').length) {
$('[ajaxbox="' + ajaxbox + '"]').each( function () { $(this).replaceWith(newHtml).ready( function () {
ajaxBoxInit(newHtml)
if (window.ajaxboxsuccess) ajaxboxsuccess(newHtml);
}); });
if ($('[ajaxdialog="' + ajaxbox + '"]').length = 0) {
if (dodialog) $(newHtml).wrap("<div class='flora ui-dialog-content' ajaxdialog='" + ajaxbox + "' style='overflow:auto;'></div>").parent().dialog(dialogoptions);
}
} else {
$("body").append(newHtml).ready( function () {
ajaxBoxInit(newHtml);
if (window.ajaxboxsuccess) ajaxboxsuccess(newHtml);
});
if (dodialog) $(newHtml).wrap("<div class='flora ui-dialog-content' ajaxdialog='" + ajaxbox + "' style='overflow:auto;'></div>").parent().dialog(dialogoptions);
}
}
var rel = $(theElement).attr('ajaxtriggerrel');
if (rel != undefined) $('a[ajaxrel="' + rel + '"]').click();
tb_remove();
return false;
},
complete: function () {
$("#TB_load").remove();
}
});
return false;
}
