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?
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/