Combining multiple jQuery functions

Question

Is there any way to combine all of this to reduce the amount of js? This is just an example of some of the jquery dialogs I have in my site, there are a few more too. Thanks.

//initiate Search refinement dialog here
$("#chooseMoreCnt, #chooseMoreCat, #chooseMorePr").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

//trigger country dialog
$('a.chooseMoreCnt').click(function() {
    $('#chooseMoreCnt').dialog('open');
    return false;
});

//trigger category dialog
$('a.chooseMoreCat').click(function() {
    $('#chooseMoreCat').dialog('open');
    return false;
});

//trigger price dialog
$('a.chooseMorePr').click(function() {
    $('#chooseMorePr').dialog('open');
    return false;
});

Answer 1

If your links point to the IDs of the dialog elements, and if you add a meta class choose to each of them, you could combine the last three calls to:

$('a.choose').click(function() {
    $(this.hash).dialog('open');
    return false;
});

The HTML for one of those links is the most semantically correct and even works with JS disabled (assuming, the dialogs are there, then):

<a href="#chooseMoreCat" class="choose">Choose more categories</a>

The this.hash part explained:

• this in the context of a jQuery event handling function is always the element, that the event appeared at. In our case, it's the clicked link. Note, that it's the DOM node, not a jQuery element.

• this.hash: DOM nodes, that correspond to HTML <a/> elements, have certain special properties, that allow access to the target they're linking to. The hash property is everything after (and including) an # character in the URL. In our case, if the link points to the elements that should become dialogs, it's something like the string "#chooseMoreCnt".

• $(this.hash) is the jQuery function called for, e.g., "#chooseMoreCnt", which will select the appropriate div.

For the dialog initialization, I would also go for classes:

$(".choose_dialog").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

Yes, it means to change the markup, but it also provides you with the freedom to

1. add any number of dialogs lateron

2. add any number of openers to any dialog lateron

3. style all dialogs and links to dialogs consistantly with minimal CSS

without touching the Javascript anymore.

If the dialogs are initiated differently (as mentioned in the comments), then you could go for this part with CuSS's $.each() approach and read the appropriate width inside the function from an object defined elsewhere:

var dialog_widths = {'chooseMoreCat': 400, 'chooseMorePr': 300, /*...*/ };

Answer 2

well, this is a little complicated to minimize. do you have more than 3 dialogs? If yes you can do something like this:

var dialogs=["chooseMorePr","chooseMoreCat","chooseMoreCnt"];
$.each(dialogs,function(i,v){
    $('a.'+v).click(function(){$('#'+v).dialog('open');});
});

Answer 3

In order to optimize performance, you should use live when connecting to several elements. Below is my approach to the problem. The solution is dynamic (add as many dialogues as you want to) and very speedy.

Remember to change #anyParentOfTheLinks into the parent div or in worst case remove it and jQuery will use document instead.

var dialogues = ['#chooseMoreCnt', '#chooseMoreCat', '#chooseMorePr'];

$(dialogues.toString()).dialog({
    // ...
});

$('a', '#anyParentOfTheLinks').live('click', function(){
    // Cache for performance
    var $this = $(this), len = dialogues.length;

    for(var i = 0; i < len; i++)
        if($this.is('.' + dialogues[i].substr(1))) {
            $this.dialog('open');
            break;
        }

    return false;
});

Answer 4

This is what I would suggest. Specify a general DialogContent (say) class to all the divs and initialize them using:

$(".dialogContent").dialog({
    bgiframe: true,
    autoOpen: false,
    width: 500,
    modal: true,
    open: function(type, data) {
        $(this).parent().appendTo(jQuery("form:first"));
    }
});

And ofcourse use Boldewyn's solution for click event (it is better to use live() IMHO if things are getting dynamically generated). This way you take care of all initializations and click events with way less code.

HTH