jQuery UI modal dialog: button icons do not appear

Question

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.

Update: here's someone else reporting almost exactly the same problem on the jQuery forums from a while back: forum.jquery.com/topic/… — Harpo Jaeger
– Harpo Jaeger, Commented Jul 24, 2016 at 13:43
Have you checked the browser's console for errors? Do you have a link we can see or can you create a jsFiddle or stack snippet? — j08691
– j08691, Commented Jul 24, 2016 at 16:23
No errors on the console, but I'll make a jsFiddle, thanks. Stand by. — Harpo Jaeger
– Harpo Jaeger, Commented Jul 24, 2016 at 16:41
I also tried substituting 1.8.5, the version that the poster in your link was using, in your fiddle, but wasn't able to get it to run at all. — BobRodes
– BobRodes, Commented Jul 24, 2016 at 22:01

BobRodes · Accepted Answer · 2016-07-25 19:26:31Z

2

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. :)

Edit: looks like actually this is a "real genuine feature" in jQuery-UI 1.12.0, along with a host of other changes, some of which break compatibility with previous versions. See Harpo's "new syntax" link. Anyone using menus (especially menus, old ones will no longer work), radiobuttons/checkboxes, or a few other things, will want to read it.

As for getting two icons on a button, it's still possible with the new syntax, but you can't do it using the buttons parameter in the dialog() method. Instead, you'll have to do the button the standard way, adding spans for the icons. (The upgrade doc says that you can just put the second icon span in the markup, and use the icon parameter for what used to be the primary icon, but I wasn't able to get that to work in this context.) So, for the markup:

<div id="alert_div">
    <button id="okButton">
        <span class="ui-icon ui-icon-check"></span>
        Ok
        <span class="ui-icon ui-icon-circle-check"></span>
    </button>
</div>

And then:

$('#alert_div').dialog({
    open: function(e, ui) {
        $('#okButton')
        .button()
        .on('click', function() {
            $(this).dialog('close');
        });
    }
});

edited Jul 25, 2016 at 19:26

answered Jul 24, 2016 at 21:45

BobRodes

6,1852 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harpo Jaeger Over a year ago

Thanks! I think I should be able to downgrade to 1.11.4 without breaking other things. So now the question is: how do I report this bug/help patch it? Do I just open a new GH issue (github.com/jquery/api.jqueryui.com/issues) or do I need to use jQuery's Trac somehow?

BobRodes Over a year ago

I don't know, but googling "jquery ui report bug" reveals this page: bugs.jqueryui.com . I'd start there.

Harpo Jaeger Over a year ago

Well, I'll do that, and submit something to GH issues if they ask me too. Thanks again for your help.

BobRodes Over a year ago

You're welcome. When it all worked fine in my own sandbox, I knew there was something strange going on.

Harpo Jaeger · Accepted Answer · 2016-07-25 12:33:56Z

0

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

answered Jul 25, 2016 at 12:33

Harpo Jaeger

1291 silver badge8 bronze badges

Comments

Bhanu Pratap · Accepted Answer · 2016-07-25 14:14:20Z

0

Please have a look this is for Example, we can do any thing to it..

use style to make changes into it...

Thanks... :)

answered Jul 25, 2016 at 14:14

Bhanu Pratap

1,77118 silver badges17 bronze badges

2 Comments

Harpo Jaeger Over a year ago

This doesn't answer the question.

pawel Over a year ago

An explanation would be ideal, and a code snippet as opposed to a screenshot.

Collectives™ on Stack Overflow

jQuery UI modal dialog: button icons do not appear

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related