Harpo Jaeger Harpo Jaeger - 4 months ago 47
jQuery Question

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.

Answer

Apparently, the problem is a bug in jquery-ui 1.12.0. If you substitute 1.11.4 for 1.12.0 in your fiddle, the problem goes away.

I ran your code (the code you published above, not the code in your fiddle) in my own test environment, and everything worked fine. (I downloaded 1.11.4 in May, when it was the latest stable version.) It seems that the button() method isn't getting called when dialog() is called. As you correctly surmise, there shouldn't be an object Object in the icons element. My button code looks like this:

<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
    <span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
    <span class="ui-button-text">No</span>
    <span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>

Looks like maybe this is a "real genuine bug" in jQuery-UI 1.12.0. :)