Question

I’m trying to trigger a jQuery UI dialog with a link. Here’s the link:

<a href="#" id="mydialog">Open the dialog</a>

and here’s the javascript earlier on the page:

$(document).ready(function() {
    var $mydialog = $('<div></div>')
        .html('dialog body')
        .dialog({
            autoOpen: false,
            title: 'dialog title'
        });
    $('#mydialog').click(function() {
        $mydialog.dialog('open');
    });
});

This javascript has worked before for me when using a button with the appropriate ID assigned, but it isn’t working with the link. Also, I can’t figure out how the stop the link redirecting to the address specified by href (putting return false in the click handler doesn’t work).

Thanks guys.

Answer 1

I think you’re code isn’t working on a tags because they’re doing their default behavior. Basically, the page is moving on before the dialog opens. Make it stop with event.preventDefault(). Notice the function has event passed in as well.

$('#mydialog').click(function(event) {
    event.preventDefault();
    $mydialog.dialog('open');
});