3

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.

6
  • Update: here's someone else reporting almost exactly the same problem on the jQuery forums from a while back: forum.jquery.com/topic/… 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
    Jul 24, 2016 at 16:23
  • No errors on the console, but I'll make a jsFiddle, thanks. Stand by. Jul 24, 2016 at 16:41
  • Here it is: jsfiddle.net/harpojaeger/hmanoLof Jul 24, 2016 at 16:54
  • 1
    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
    Jul 24, 2016 at 22:01

3 Answers 3

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');
        });
    }
});
4
  • 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? Jul 24, 2016 at 22:03
  • I don't know, but googling "jquery ui report bug" reveals this page: bugs.jqueryui.com . I'd start there.
    – BobRodes
    Jul 24, 2016 at 22:05
  • Well, I'll do that, and submit something to GH issues if they ask me too. Thanks again for your help. Jul 24, 2016 at 22:06
  • You're welcome. When it all worked fine in my own sandbox, I knew there was something strange going on.
    – BobRodes
    Jul 24, 2016 at 22:07
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");
        }
    }]
});
0

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

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

use style to make changes into it...

Thanks... :)

2
  • This doesn't answer the question. Jul 25, 2016 at 14:15
  • An explanation would be ideal, and a code snippet as opposed to a screenshot.
    – pawel
    May 22, 2018 at 22:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.