jQuery programming style?

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.l开发者_JAVA技巧ength > 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;

}

Absolutely not. What you described is not standard jquery practice, but would seem to be due to the poor design choices of someone who doesn't really know anything about javascript.

Using id="" for the links and then a jQuery formated click(function() { ... }); is the easiest way to read it.

<a id="something" href="#">something here to click on</a>

<script type="text/javascript" language="javascript">
$(function () {
                 $('#something').click(function () { 
    ...
                 });
                 $('#somethingelse').click(function () { 
    ...
                 });
}
</script>

This method would not generate an error if somebody clicks on the link (or element) before jQuery is loaded. Then jQuery can be loaded on the bottom of the page and the page renders without a delay.

What they're doing with jQuery — customizing behavior with novel attributes on tags — isn't so crazy, but the way they did it is rather odd.

What I would prefer is to attach different functions to different tags, depending on attributes. So, for instance, if links with the ajaxrel attribute should behave differently:

$('a[@ajaxrel]').click(function() {
    // handle click according to ajaxrel attribute
});

This would at least make grokking the code easier. (The one concern would be how links should work if they have more than one of these attributes.)

That seems like it would be incredibly hard to maintain. I myself love jQuery plugins and always like to push code into a plugin when necessary.

This is definitely not the way I develop websites and jQuery, please don't be put off!

What you described is not a Jquery standard. If you put a single line of comment on your Jquery script, Any dummy can understand your logic, let alone you ...

It seems pretty bad, but i wouldn't like to rush and talk about the style. The pain is mostly not in the style used, as coding style depend on dependencies, requirements, APIs etc...The pain is almost always comes from poor documentation. As for custom HTML attributes they are valid ex: data-ajaxrl

In this other thread ther are some good points about style of jQuery use: How can I organize the jQuery code style to avoid confusion by so many brackets and so many nests? Any good sample?

At a more basic level you could have a look at the jQuery core style guidelines: http://docs.jquery.com/JQuery_Core_Style_Guidelines