Setting button text for jQuery user interface dialog box

Question

All the places where I (successfully) installed the text of the jQuery UI Dialog button stopped working. Buttons appear and they work correctly, but the text does not appear in all tested browsers (IE, Safari, Chrome, Firefox, and Opera). Using the Chrome inspector and Firebug, it seems that the text is not even set on the button, and is not a CSS problem).

The only thing that has changed recently is that we switched to jQuery 1.8.0 with jQuery UI 1.8.22 and are not able to downgrade again.

The above example can be found at jsFiddle http://jsfiddle.net/F7pGu/

HTML example :

<div id="form"> <h1>Blah</h1> </div> <button id="array-test">Array Test</button> <button id="object-test">Object Test</button> 

JavaScript example :

 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 can not find anything wrong with reading the documentation. We have always used the object test method, but the documentation now mentions an array validation method.

Answer 1

I have done some research since this is a really strange problem. It turns out that this is a known problem, and an error tracker has been created for it.

Here is a bug tracker explaining the problem and the current workaround.

For convenience, there is a direct link to a ticket that has already been fixed and installed as included in release 1.8.23.

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

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

See DEMO

An additional SO Post is also added here, which is related to the error.

Answer 2

A simpler solution is to use this snippet after turning on the jQuery library:

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

Here is the corrected working violin for you. Hope this helps.