jQuery UI dialog link instead of button

I like to add a button (which is supporte开发者_开发知识库d 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.

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

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

                        }

                    });

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

$("#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');
});

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"

I just did this with my code and it worked like a charm, in chrome. It displayed two buttons using the native dialog function. The first one is pointing to a file and when clicked, downloads the file without refreshing the page. The second button simply closes the jQuery dialog box.

var src = https://domain.com/yourfilepath;

$("#dialog").dialog({
        buttons: [
            {
                text: "download",
                click: function () {

                    window.location.href=src;
                }
            },
            {
                text: "close",
                click: function () {

                    $(this).dialog("close");
                }
            }
        ]
    });