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?

Can you provide a jsFiddle of this? I can't reproduce your problem. — Exelian
– Exelian, Commented Feb 17, 2011 at 16:01
Regardless of the width/height settings, it still displays blank. Seems to be losing the name of the button along the way. — Vin
– Vin, Commented Feb 17, 2011 at 16:29

Magic_Cindy · Accepted Answer · 2011-09-18 17:42:52Z

4

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'));
});

edited Sep 18, 2011 at 17:42

Magic_Cindy

33 bronze badges

answered Mar 10, 2011 at 15:27

conceptacid

3482 silver badges15 bronze badges

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

Comments

Martin Zeitler · Accepted Answer · 2012-08-24 19:57:51Z

4

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'));
});

answered Aug 24, 2012 at 19:57

Martin Zeitler

79.6k20 gold badges169 silver badges243 bronze badges

1 Comment

Martin Zeitler Over a year ago

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

Jared · Accepted Answer · 2011-02-17 16:54:27Z

0

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>

answered Feb 17, 2011 at 16:54

Jared

1321 gold badge1 silver badge7 bronze badges

1 Comment

Vin Over a year ago

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);

Mutix · Accepted Answer · 2011-12-15 14:39:08Z

0

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);

edited Dec 15, 2011 at 14:39

Mutix

4,1961 gold badge29 silver badges39 bronze badges

answered Feb 18, 2011 at 12:18

Vin

711 silver badge2 bronze badges

Comments

Rich · Accepted Answer · 2012-02-28 20:55:28Z

0

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).

edited Feb 28, 2012 at 20:55

answered Feb 28, 2012 at 20:39

Rich

2,0961 gold badge15 silver badges16 bronze badges

Comments

Lodle · Accepted Answer · 2012-09-14 01:35:54Z

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) {

Igoris · Accepted Answer · 2013-01-04 07:06:16Z

0

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.

answered Jan 4, 2013 at 7:06

Igoris

1,6481 gold badge22 silver badges39 bronze badges

Collectives™ on Stack Overflow

jQueryUI dialog - button text not appearing

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related