Question

I just started working with Jquery and I was wondering if there is a way to reuse a dialog for multiple ids. I’m using the dialog to display a more indepth description of multiple items. The way I have the code setup right now is:

            $('#NY7C').dialog({
                autoOpen: false,
                width: 800,
                height: 700,
                modal: true,
                draggable: false
            });

            $('#NY7C-open').click(function(){
                $('#NY7C').dialog('open');
                return false;
            });

            $('#NY7R').dialog({ //another dialog that has the same features as #NY7C
            });

            $('#NY7R-open').click(function(){
            })

Inside the body I use the following code to open the dialog:

<a id="NY7C-open" class="ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="ui-state-default ui-corner-all" href="#">More Info</a>

Finally, the information shown in the dialog is in:

<div id="#NY7C">
    //Information for NY7C
</div>
<div id="#NY7R">
    //Information for NY7R
</div>

Now the way I have the code right now works. However, I was hoping I would be able to reuse the first code so I can use it for multiple IDs(ex. NY7C, NY7R, NY7P, etc.). Is there any way to do this?

Answer 1

Give them classes instead of ids. For example:

<a id="NY7C-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>
<a id="NY7R-open" class="dialog-trigger ui-state-default ui-corner-all" href="#">More Info</a>

<div id="#NY7C" class="my-dialog">
    //Information for NY7C
</div>
<div id="#NY7R" class="my-dialog">
    //Information for NY7R
</div>

And the js would be:

$('.my-dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 700,
    modal: true,
    draggable: false
});
$('.dialog-trigger').click(function(){
    var id = this.id;
    var targetId = id.replace('-open','');
    var $target = $('#' + targetId);
    if($target.length){
        $target.dialog('open');
        return false;
    }
});