jQuery UI dialog link instead of button

Question

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

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.
        }
    }
});​

Answer 2

My approach to this is to wrap the button with a link in order to leverage the jquery ui css without having to style the link.

To access the button you will need to assign it an id in the initial options.

$('#your-selector').dialog({
                        resizable: false,
                        height: 260,
                        closeOnEscape: true,
                        width: 475,
                        modal: true,
                        .....
                        buttons: [
                            {
                                text: "Continue Shopping",
                                id: "continue-d-btn",
                                click: function () { $(this).dialog("close"); }
                            },
                            {
                                text: "Checkout",
                                id: "checkout-d-btn"  // assign an id ! important

                            }
                        ],
                        open: function (event, ui) {
                               // this is where we add an icon and a link
                               $('#checkout-d-btn')
                                .wrap('<a href="[YOUR_LINK]" ></a>');

                        }

                    });