Question

I went to check if the recently released jQuery 1.8 (stable) would be compatible with my current project in development, and to my surprise this is the first thing I saw:

It is a surprise to me as I had already upgraded to jQuery UI 1.8.22, which according to its release post, is compatible with jQuery 1.8.

The callback functions are called according, but the buttons have no textNodes as one can see in a DOM inspector:

The solutions which I’ve found so far are either:

1. Downgrade back to jQuery 1.7.2 (I would like to use the latest jQuery version in my page though)
2. Upgrade to jQuery UI 1.9.0pre (it’s not stable)
3. Use an open handler or manually edit the HTML of the dialog to include my desired text. Seems like a lot of unneeded hassle for a bug in their source.

Am I missing something or is this an actual bug?

Here’s the fiddle which I used for the demo:

jsFiddle

And the code for future reference:

HTML:

<div id="foo" title="Dialog title">Dialog text</div>

JS:

$('#foo').dialog({
    buttons: {
        Yes: function() { $(this).dialog('close'); },
        No: function() { $(this).dialog('close'); }
    }
});

Answer 1

EDIT:

Here’s the BugTracker ticket.

A much simpler solution is to use this snippet after including the jQuery library:

if ( $.attrFn ) { $.attrFn.text = true; }

jsFiddle

This issue should be fixed when jQuery UI 1.8.23 is released. Credits to scott.gonzalez from the BugTracker ticket page.

EDIT: This has been fixed in UI 1.8.23.

---

My old solution:
(use it if you have problems with the one above)

I’ve made a temporary fix for this issue (until a new stable version of either UI or core is release).

There’s a bug with jQuery 1.8 interacting with jQuery UI 1.8.22 which stores the text in the parent button‘s text attribute instead of creating a textNode inside the span.ui-button-text:

Use this snippet after initializing jQuery UI dialogs or any other interface which has this UI button bug:

//iterate through all UI button text spans in the document
$('.ui-button-text').each(function() {
    var $this = $(this);
    if ($this.text() == '') //if it has no text (bugged)
        $this.text($this.parent().attr('text')); //sets the text which was passed
});

jsFiddle

The script checks if the UI button has no text before doing anything, so it’s harmless to keep even if you forget it there when upgrading to future non-bugged versions of core/UI.

If you have a better solution or information on this bug I’ll glad accept it. =]

Note that you can downgrade to jQuery 1.7.2 or use a pre-release of UI 1.9.0 as mentioned in the question if you can’t wait for a stable release and still want to use the latest stable versions.