how do you launch a jquery dialog when you click on a <a href> link

Question

how do you launch a jquery dialog when you click on a link

this doesn't seem to work

 <script type="text/javascript">
  $(document).ready(function() {

  $("a.To").click(function(e) {
      e.preventDefault();
      $("#dialog").dialog({height:300});
  });

in the body:

<a href="#" id="To">To</a>

Answer 1

I did this recently for confirming delete links in my cms. First you should instantiate a dialog window (this is so if you click close on the dialog and then open it again, it shows up...otherwise, it's destroyed):

$(document).ready(function()
{
    /**
     * Create a dialog box for confirming deletes.
     * This creates the box at domready. The box is opened
     * by a call to dialog("open") in the delete link.
     */
    $("#delete-dialog").dialog({
        autoOpen   : false,
        bgiframe   : true,
        buttons    : {
            "Yes, I'm sure" : function()
            {
                $(this).dialog("close");
                var href = $(this).dialog("option", "href");
                var row = $(this).dialog("option", "row");
                $.doDelete(href, row);
            },
            "Cancel" : function()
            {
                $(this).dialog("close");
            }
        },
        height     : 150,
        modal      : true,
        overlay    : {
            backgroundColor : "#000000",
            opacity         : 0.75
        },
        resizable : false
    });
});

Then "hook up" the a tags (still in the document.ready block):

/**
 * Make all delete links confirm before sending to delete path.
 */
$("a.delete-href").live("click", function(event) 
{
    event.preventDefault();

    var href = $(this).attr("href");
    var row = $(this).parent().parent();

    // pass some custom options to the dialog
    $("#delete-dialog").dialog("option", "href", href);
    $("#delete-dialog").dialog("option", "row", row);
    // open the previously init'ed dialog
    $("#delete-dialog").dialog("open");
});

Answer 2

Your using a class selector but your looking for the id...you need the following.

$("#To").click(function(e) {
      e.preventDefault();
      $("#dialog").dialog({height:300});
  });

Answer 3

For id you should use # :

$("a#To")

Dot is for classes.

Answer 4

the code:

$("#dialog").dialog({height:300});

will build the dialog, the code to open a dialog is:

$("#dialog").dialog("open");

edit: although, i think autoOpen is set to true by default so your code should work unless your selector is broken. Id recommend setting autoopen to false and using the open param to open the dialog (that way you dont have to rebuild it whenever you try to open it):

$("#dialog").dialog({height:300, autoOpen:false});

Answer 5

since you're selecting by the id attribute, the proper selector is "a#To" rather than "a.To"

Answer 6

Thank you Typeoneerror for sharing, that's exactly what I was looking for!