Link to jQuery UI dialog instead of button

Question

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

Answer 1

You will need to style the button the way you want, but it enters the link and links 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 use jquery ui css without creating a link.

To access the button, you will need to assign an identifier to it in the initial parameters.

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

                        }

                    });

Answer 3

, , ? ( , -), :

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

Answer 4

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

html , , id #awesomeLink

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

Answer 5

, , , , ?

, - :

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

Answer 6

, , . , . , . jQuery.

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

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

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

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