Combining multiple jQuery dialog selectors

Question

I would like to know how to combine the functions of different selectors. All the functions open and close dialogs, but different dialogs. So I don't know if it's possible. It just looks wrong and if someone saw it they would call me an idiot. Right now I have:

$(document).ready(function() {
    $('div#basic_dialog').dialog({
        autoOpen: false,
        buttons: {
            "Close": function () {
                $('div#basic_dialog').dialog("close");
                window.location.href = "#contact";
            }
        }
    })
    $('#basic_dialog_button').click(function(){ $('div#basic_dialog').dialog('open'); });
    $('div#caption_dialog').dialog({
        autoOpen: false,
        buttons: {
            "Close": function () {
                $('div#caption_dialog').dialog("close");
                window.location.href = "#contact";
    }
    }
    })
 $('#caption_dialog_button').click(function(){ $('div#caption_dialog').dialog('open'); });
    $('div#plus_dialog').dialog({
    autoOpen: false,
    buttons: {
        "Close": function () {
                $('div#plus_dialog').dialog("close");
        window.location.href = "#contact";
    }
    }
    })
$('#plus_dialog_button').click(function(){ $('div#plus_dialog').dialog('open'); });
$('div#skills_dialog').dialog({
    autoOpen: false,
    buttons: {
    "Close": function () {
        $('div#skills_dialog').dialog("close");
        window.location.href = "#contact";
    }
    }
})
$('#skills_dialog_button').click(function(){ $('div#skills_dialog').dialog('open'); });
})

But I'm pretty sure that can be prettified somehow. They all open and close different boxes, so I don't know. I know how to do it if they were all doing the exact same function, but mapping that change is beyond me right now.

Brad · Accepted Answer · 2012-10-04 04:41:36Z

1

You can use multiple selectors at one time by separating them by commas.

$('div#basic_dialog, div#caption_dialog, etc...')

However, for cases like yours, I think I would recommend using a class instead.

answered Oct 4, 2012 at 4:41

Brad

164k57 gold badges381 silver badges559 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

mesimplybj · Accepted Answer · 2012-10-04 16:11:23Z

1

You can specify any number of selectors to combine into a single result. You can use like this:

$(document).ready(function() {
        $('div#basic_dialog,div#caption_dialog,div#plus_dialog,div#skills_dialog').dialog({
            autoOpen: false,
            buttons: {
                "Close": function() {
                    $('div#basic_dialog').dialog("close");
                    window.location.href = "#contact";
                }
            }
        })
        $('#basic_dialog_button,#caption_dialog_button,#plus_dialog_button,#skills_dialog_button').click(function() {
            $('div#basic_dialog').dialog('open');
        });
    })

Edited
Give each clickable elements common class and can Use as below:

            $('.dialog_button').click(function() {
                $(this).dialog('open');
            });

edited Oct 4, 2012 at 16:11

answered Oct 4, 2012 at 4:56

mesimplybj

6391 gold badge5 silver badges28 bronze badges

1 Comment

o_O Over a year ago

Thanks. I get how to specify the different selectors into one, but how do you specify each for the different target dialogs?

o_O · Accepted Answer · 2013-06-02 20:08:51Z

Revisiting old questions and after doing this forever now, what would do now:

$(function(){
    var close = function(){
        $(this).dialog("close");
        window.location.href = "#contact";});

    $(".dialog").dialog({
        autoOpen: false,
        buttons: {
            "Close": close
        }});

    $(".dialog-button").click(function(){
        var db = $(this).attr("data-val");
        $("#"+db).dialog('open');});
});

Then I just add the class .dialog to all the dialog elements and a unique id. For the button handler, I add the ID of the dialog it controls as a data-attribute. The benefit of this way is that I can even set these as vars and then run the functions after I dynamically create more dialogs (if needed) and it will continue to add the dialog functionality to elements not created in the DOM yet, plus I can use another js function that will append the ID of the button handlers as the data-attributes if I need to do that as well.

Works like a charm for me and it's as clean as I can get at this point. Still looking for anyone who can improve on this.

Collectives™ on Stack Overflow

Combining multiple jQuery dialog selectors

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related