Setting Button Text for a jQuery UI Dialog

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.

@DavidThomas which browser/OS? I've tried on a Windows 7 box, an iPad and an iPhone to no avail. Which test worked? Did both work? — Metalshark
– Metalshark, Commented Aug 12, 2012 at 10:13

Community · Accepted Answer · 2017-05-23 12:09:20Z

7

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.

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Aug 12, 2012 at 10:22

Nope

22.4k8 gold badges50 silver badges73 bronze badges

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

2 Comments

Metalshark Over a year ago

Thanks - couldn't find the previous SO Post.

Nope Over a year ago

@Metalshark: Same here, I found the bug-tracker first and only the SO Post for it after as it was linked in the comments of the bug-tracker.

Alfred · Accepted Answer · 2012-08-12 10:27:51Z

0

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

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

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

answered Aug 12, 2012 at 10:27

Alfred

21.5k64 gold badges175 silver badges258 bronze badges

Collectives™ on Stack Overflow

Setting Button Text for a jQuery UI Dialog

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related