Question

I am creating two buttons for use in a dialog box and it does not seem what I do, I cannot get the icon to display with the text. I can do this elsewhere just fine.

This works (which is almost copy and pasted from the docs:

$("#signout_button").button({label:"Sign Out", icons: { primary: 'ui-icon-key'}});

This does not work:

              $("#dialog_link").dialog({draggable: true, title: "Are you sure?", show: "slide", modal: true, width:500,height:200,
                buttons: [{

                  label:'Yes, I am sure',
                  icons: { primary: 'ui-icon-alert' },
                  click: function(){
                    alert('well alrighty then');
                  }    
                },{
                  text:'No, please make it stop',
                  icons: { primary: 'ui-icon-alert' },
                  click: function(){
                    alert('well alrighty then');
                  }
                }]
              });

The div already exists and is very simple

<div id="dialog_link"></div>

It’s some sort of weird syntax error I think. The dialog box pops open just fine and the click events fire so the javascript did not crash.

The first button, which is the way I am familiar with results in a button with no icon and no text. The 2nd button is an icon with only text.

I have also tried:

text:true,
label: 'test label',
icons: {primary: 'ui-icon-alert'},
click: function(){ alert('testing');}

The signout button at the renders with both icon and label. Is this a JQuery bug in the dialog box creation or I am missing something really stupid and simple?

Answer 1

It seems that its not built-in the dialog to create buttons with icons.

Your problem with the empty button is simple: don’t write “label” use “text” instead (as you do on your second button).

To use an icon anyway see this solution jQuery UI Dialog Button Icons. I think the last answer is the best.

I put that all together in this fiddle and it works: http://jsfiddle.net/GzeMT/