jQuery UI dialog link instead of button

Question

Hi:

I like to add a button (which is supported by default) and link jQuery UI dialog. How to add a link in jQuery UI dialog? In my case I like to have Save button and a Cancel link. Thanks in advance.

Answer 1

$("#dialog-message").dialog({
    modal: true,
    autoOpen: false,
    width: 500,
    buttons: {
        'Save': function() {
            //stuff you want to do
        }
    }
});

and then just add in your html a link, lets say with id #awesomeLink

$("#awesomeLink").click(function() {
    $("#dialog-message").dialog('close');
});

Answer 2

Is there a reason you want it to be a link instead of a button that does the same thing as a link?

You could configure the cancel button do something like:

window.location.href="http://www.google.com"

Answer 3

You can't add a link, not without really hacking up the markup, would adding a button as a link work? (just a button that goes somewhere), like this:

$("#dialog").dialog({
    modal: true,
    buttons: {
        Close: function() {
            $(this).dialog('close');
        },
        GoPlaces: function() {
            window.location = 'http://www.stackoverflow.com';
        }
    }
});​

You can try a demo here

Answer 4

You will have to style the button how you want to, but this injects a link and binds the click even to do what you want.

$("#dialog").dialog({
    modal: true,
   open: function(event, ui){
            $('<a />', {
                'class': 'linkClass',
                text: 'Cancel',
                href: '#'
            })
            .appendTo($(".ui-dialog-buttonpane"))
            .click(function(){
                 $(event.target).dialog('close');
            });
    },
    buttons: {
        'Save': function() {
            //save code here.
        }
    }
});​