CODEWITHSUNDEEP
javascriptjqueryjquery-uistandardsjquery-ui-dialog
o_O
o_O

Reputation: 5747

Combining multiple jQuery dialog selectors

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.

Upvotes: 0

Views: 418

Answers (3)

o_O
o_O

Reputation: 5747

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.

Upvotes: 0

mesimplybj
mesimplybj

Reputation: 639

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');
            });

Upvotes: 1

Brad
Brad

Reputation: 163603

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.

Upvotes: 1

Related Questions