Question

All of the places where I was (successfully) setting jQuery UI Dialog button text have stopped working. The buttons appear and they function correctly however no text is displayed in all browsers tested (IE, Safari, Chrome, Firefox & Opera). Using Chrome’s inspector and Firebug it appears that the text is not even set on the button instead of it being a CSS issue).

The only thing which has changed recently is that we have moved to jQuery 1.8.0 with jQuery UI 1.8.22 and are not in a position to downgrade again.

A reduced example can be found on jsFiddle http://jsfiddle.net/F7pGu/

Sample HTML:

<div id="form">
    <h1>Blah</h1>
</div>

<button id="array-test">Array Test</button>
<button id="object-test">Object Test</button>

​Sample JavaScript:

var $form = $('#form'),
    $arrTest = $('#array-test'),
    $objTest = $('#object-test');

$arrTest.click(function(){
    $form.dialog({
        buttons: [
            {
                text: 'Cancel'                
            },
            {
                text: 'Save'
            }
        ]
    });
});

$objTest.click(function(){
    $form.dialog({
        buttons: {
            'Cancel': function () {},
            'Save': function () {}
        }
    });
});
​

I cannot find anything wrong reading the documentation. We always used the object-test method but the documentation now mentions the array-test method instead.

Answer 1

I did some research as that is an odd issue indeed. Turns out to be a known issue and a bug-tracker has been created for it.

Here is the bug-tracker explaining the issue and the current workaround.

For convinience here is the direct link to the ticket itself which has already been fixed and set to be included in the 1.8.23 release.

Adding the following line of code to your script will make the dialog work again:

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

See DEMO

Here is also the additional SO Post which is linked in the bug-tracker.