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