19

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:

enter image description here

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:

enter image description here

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'); }
    }
});
6
  • No errors in the console and works fine when switching back to 1.7.2. Bug?
    – j08691
    Aug 10, 2012 at 19:01
  • @j08691 Exactly. I'd submit a report to their bugtracker but I don't have experience with it and I want to make sure it's actually a bug. Even though it's quite evident, I tend to overlook simple things. Aug 10, 2012 at 19:05
  • I've seen a few things today floating around about this. Might want to look around and then just submit the report.
    – j08691
    Aug 10, 2012 at 19:07
  • Thanks for the heads up, was it just about the dialog buttons or including other parts of the UI as well? Aug 10, 2012 at 19:07
  • 1
    @TimWithers I'm using Microsoft's CDN to load jQuery UI 1.8.22. I've tried with the jQuery CDN as well. You can see the files in the "Manage Resources" part in the left panel. Aug 10, 2012 at 19:09

1 Answer 1

18

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:

enter image description here

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.

2
  • @j08691 Yup, I should browse their BugTracker first next time. :P Hopefully this will be a good reference 'til they release a new stable build (UI 1.8.23 should have this fixed). Aug 10, 2012 at 20:54
  • Just ran into this today as well. Breaks with the [] syntax for buttons option as well. Thanks for the good question and answer
    – BLSully
    Aug 17, 2012 at 13:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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