jQuery programming style?

Posted by Sam Dufel on Stack Overflow See other posts from Stack Overflow or by Sam Dufel
Published on 2010-12-31T20:05:17Z Indexed on 2010/12/31 21:54 UTC
Read the original article Hit count: 270

Filed under:
|

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;

}

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about coding-style