jQueryUI dialog - button text not appearing

Question

I have a strange error occurring with the dialog box, I'm loading the dialog box fine, but whenever I assign a button to it, although it'll display the button, it won't display the name of the button. Here is my code that launches the dialog successfully...

jQuery('#'+message_div_id).dialog({
    modal:      ui_popup_modal
,   width:      ui_popup_width
,   height:     ui_popup_height
,   resizable:  false
,   draggable:  false
,   buttons:    {
                    "Ok": function() {
                        jQuery( this ).dialog( "close" );
                    }
                }
});

This is the resulting html from bugzilla after the popup has loaded...

< button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false">< span class="ui-button-text">< /span>< /button>

The span class is the area that should contain the text, but as you can see, it is not. Any ideas?

Stertorous

Can you provide a jsFiddle of this? I can't reproduce your problem. – Stupendous

are you sure the dialog is height or width enough? – Horologe

Regardless of the width/height settings, it still displays blank. Seems to be losing the name of the button along the way. – Stertorous

Answer 1

This inspired me a lot, but it didn't work exactly for me, I made the following modifications. I think this works better.

$('div.ui-dialog-buttonset button.ui-button span.ui-button-text').each(function() {
    $(this).html($(this).parent().attr('text'));
});

Matthewmatthews

Answer 2

This works for me with jQuery UI v1.8.22 CDN (tested):

$('div.ui-dialog button.ui-button').each(function() {
   $(this).children('.ui-button-text').html($(this).attr('text'));
});

Commentate

Probably just a temporary fix until it got fixed in the UI library. – Commentate

Answer 3

I think there is something missing. It would be nice to see it working. I tried creating a test and I get no text, but the css is missing. If I do this it works:

<button type="button" text="Ok" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Text Here</span></button> 

Japheth

Couldn't resolve it in the end, however, as this is part of a bigger piece of work, what I ended up doing was this... var button1_text = ''; (ui_popup_but1 != '') ? button1_text = ui_popup_but1 : button1_text = 'OK'; jQuery('button[text="button1"] span').html(button1_text); – Stertorous

Answer 4

Sorry, new to SO.

Anyhow, as this piece of code was just part of a bigger piece of functionality and as I couldn't resolve the issue via the example code on the jQueryUI site, I ended up resolving with this :

var button1_text = '';

(ui_popup_but1 != '') ? button1_text = ui_popup_but1 : button1_text = 'OK';

jQuery('button[text="button1"] span').html(button1_text);

Stertorous

Answer 5

I had a similar problem. Finally solved it by upgrading the version of jQuery used from 1.3.2 up to current (1.7.1) at the time. I just noticed that the version of jQuery UI I used is not current (1.8.11 vs current of 1.8.18). I will try downgrading jQuery back and upgrading jQuery UI to current and see what happens.

EDIT: jQuery UI 1.8.18 fixed the issue for me in using both jQuery 1.3.2 and 1.7.1, so it looks like 1.8.11 had a defect that caused it to be not compatible with 1.3.2 (I'm assuming it was supposed to be since .18 is, I would think they wouldn't have changed compatibility between such a small version change).

Outherod

Answer 6

Had the same issue and ended up patching jquery-ui.js

--- jquery-ui-1.8.23.js 2012-09-14 11:18:34.000000000 +-1000
+++ jquery-ui-1.8.23.js 2012-09-14 11:31:07.000000000 +-1000
@@ -9088,13 +9088,16 @@
                    .appendTo(uiButtonSet);
                // can't use .attr( props, true ) with jQuery 1.3.2.
                $.each( props, function( key, value ) {
                    if ( key === "click" ) {
                        return;
                    }
-                   if ( key in button ) {
+                   if ( key == "text" ) {
+                       button.html( value );
+                   }
+                   else if ( key in button ) {
                        button[ key ]( value );
                    } else {
                        button.attr( key, value );
                    }
                });
                if ($.fn.button) {

Compressive

Answer 7

I had the same problem, but the reason why it was without text was that i had dependency issues. To put it short, i had 2 jquery ui js included in my final html file. When i left only 1 version of jquery ui everything seem to work as expected.

Platino