Dynamic jquery dialog pop ups

Question

I have only worked with a known number of JQuery dialogs and are having all sorts of trouble getting a dynamic version working. Hopefully someone can help me with this. here is how I do it with a known number:

$( "#opener1" ).click(function() {
    $( "#dialog1" ).dialog( "open" );
    $( "#dialog1" ).height(200);
    return false;
});

$( "#dialog1" ).dialog({
    autoOpen: false,
    show: "fold",
    hide: "explode",
    width: 600,
    height: 200,
    buttons: {
        Close: function() {
            $( this ).dialog( "close" );
        }
    }
});

and then I do this:

<A HREF='' ID='opener1'>Text to open</a>

<div class="dialog1"> content here </div>

I would like to place both the anchor tag and the div tag inside a loop (Classic ASP) and obviously dynamically name both the ID in the anchor tag and the class in the div. Help would be very much appreciated. Thanking you

Answer 1

You could use the href attribute of the a tag to select the dialog to open.
This is a pattern applied by other jQuery UI modules like the tabs module.

It allows you to have multiple links for one dialog and a very readable way to link to the dialog content.

See the code in action jsfiddle

javascript

jQuery(function ($) {
  $(".dialog-opener").click(function () {
    $($(this).attr('href')).dialog({
        show: "fold",
        hide: "explode",
        width: 600,
        height: 200,
        buttons: {
            Close: function () {
                $(this).dialog("close");
            }
        }
    });
    return false;
  }); 
});

html

<a href='#dialog1' class="dialog-opener">Text to open 1</a>
<a href='#dialog1' class="dialog-opener">Text to open 1</a>
<a href='#dialog2' class="dialog-opener">Text to open 2</a>

<div id="dialog1">Dialog 1</div>
<div id="dialog2">Dialog 2</div>