javascriptjqueryjquery-uijquery-ui-dialogjquery-ui-button

jQuery UI modal dialog: button icons do not appear


My modal dialog works perfectly (meaning I can adjust every option), except that the button icons option has no effect. Here's the code I'm using to generate the dialog:

$('#alert_div')
    .attr("title", "Delete all instances?")
    .text("Are you sure you want to delete all instances of this event between the specificed dates?  This cannot be undone.")
    .dialog({
        modal: true,
        draggable: false,
        position: { my: "top", at: "center", of: window },
        buttons: [
            {
                text: "No",
                icons: { primary: "ui-icon-check" },
                click: function() {
                    $(this).dialog('close');
                    console.log('Clicked no.');
                }
            },
            {
                text: "Yes",
                click: function () {
                    $(this).dialog('close');
                    console.log('Clicked yes');
                }
            }
        ]
    });

I've looked at every relevant Stack Overflow question I could find – e.g. this one. Aside from attaching an element to the button on open, I don't know how to solve this. When I create elements elsewhere in the document and give them the proper class, the icons show up properly.

Here's the HTML jQuery generates for the button when the dialog is opened:

<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>

I'm assuming there should be something other than '[object Object] in the icons attribute. Why is this happening? I'm using jQuery UI v. 1.12.0 and jQuery v. 3.0.0., and I'm not using Bootstrap.


Solution

  • jQuery UI 1.12 introduced a new syntax for button icons, which I have confirmed fixes this problem (see this jsFiddle). Currently, it doesn't accept the deprecated options; a PR has been submitted to fix that. See my bug report for details. The following code works with jQuery UI 1.12 and jQuery 3.1.0:

    $("#alert_div")
    .attr("title", "Error")
    .text("Please choose a calendar and enter both start and end dates.")
    .dialog({
        modal: true,
        draggable: false,
        resizable: false,
        position: { my: "top", at: "top", of: window },
        buttons: [{
            text: "OK",
            icon: "ui-icon-check",
            click: function() {
                $(this).dialog("close");
            }
        }]
    });