CODEWITHSUNDEEP
jqueryjquery-uihyperlinkjquery-ui-dialog
user1684046
user1684046

Reputation: 1939

Trigger jquery ui dialog with link

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.

Upvotes: 0

Views: 2420

Answers (1)

Gromer
Gromer

Reputation: 9931

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

Upvotes: 1

Related Questions