jQuery UI Dialog Button Icons

Question

Is it possible to add icons to the buttons on a jQuery UI Dialog? I\'ve tried doing it this way:

$(\"#DeleteDialog\").dialog({
    resizable: false,
    hei         


        

Answer 1

This version works without having to worry about the text in the buttons

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:first-child').next().button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

Answer 2

Or if you don't want to affect any other dialogs,

open: function() {
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Cancel")').button({
        icons: { primary: 'ui-icon-circle-close' }
    });
    $(this).parent().find('.ui-dialog-buttonpane button:contains("Ok")').button({
        icons: { primary: 'ui-icon-circle-check' }
    });
}

Answer 3

also you can add id or other attr to button, like this:

buttons:[
            {
                text: "Close",
                id: "closebtn",
                click: function() { $(this).dialog("close"); }
            }
        ],
open: function() {
            $("#closebtn").button({ icons: { primary: "ui-icon-close" } });
        }

Answer 4

Try this line to add the trash icon to the delete button. The sprite has to be in a separate element.

$('.ui-dialog-buttonpane').find('button:contains("Delete")').prepend('<span style="float:left;" class="ui-icon ui-icon-trash"></span>');

In order to prevent the icon from appearing on the top of the button:

$('.ui-dialog-buttonpane')
    .find('button:contains("Delete")')
    .removeClass('ui-button-text-only')
    .addClass('ui-button-text-icon-primary')
    .prepend('<span class="ui-icon ui-icon-trash"></span>');

Answer 5

I ran in the same issue. It seems jquery stores the text in an attribute called "text" in the button itself, and not as text inside the button.

I solved it like this:

    $dialog.dialog({
        resizable:false,
        draggable:false,
        modal:true,
        open:function (event, ui) {
            $(this).parents('.ui-dialog').find('.cancel.ui-button').text('Cancel');
            //or you could use: $(this).parents('.ui-dialog').find('button[text="Cancel"]').text('Cancel');
            $(this).parents('.ui-dialog').find('.add.ui-button').text('OK');
        },
        buttons:[
            {
                text:"OK",
                click:function () {

                },
                "class":"add"
            },
            {
                text:"Cancel",
                click:function () {

                },
                "class":"cancel"
            }
        ]
    });

Answer 6

i' tried this, and it works :)

[....]
open: function() {
                $('.ui-dialog-buttonpane').
                    find('button:contains("Cancel")').button({
                    icons: {
                        primary: 'ui-icon-cancel'
                    }
                });
[....]