Develop Reference

jQuery UI modal dialog: button icons do not appear

My modal dialog works perfectly (meaning I can adjust every option), except that the button icons option has no effect. Here's the code I'm using to generate the dialog:
$('#alert_div')
.attr("title", "Delete all instances?")
.text("Are you sure you want to delete all instances of this event between the specificed dates? This cannot be undone.")
.dialog({
modal: true,
draggable: false,
position: { my: "top", at: "center", of: window },
buttons: [
{
text: "No",
icons: { primary: "ui-icon-check" },
click: function() {
$(this).dialog('close');
console.log('Clicked no.');
}
},
{
text: "Yes",
click: function () {
$(this).dialog('close');
console.log('Clicked yes');
}
}
]
});
I've looked at every relevant Stack Overflow question I could find – e.g. this one. Aside from attaching an element to the button on open, I don't know how to solve this. When I create elements elsewhere in the document and give them the proper class, the icons show up properly.
Here's the HTML jQuery generates for the button when the dialog is opened:
<div class="ui-dialog-buttonset"><button type="button" icons="[object Object]" class="ui-button ui-corner-all ui-widget">OK</button></div>
I'm assuming there should be something other than '[object Object]
in the icons attribute. Why is this happening? I'm using jQuery UI v. 1.12.0 and jQuery v. 3.0.0., and I'm not using Bootstrap.

Apparently, the problem is a bug in jquery-ui 1.12.0. If you substitute 1.11.4 for 1.12.0 in your fiddle, the problem goes away.
I ran your code (the code you published above, not the code in your fiddle) in my own test environment, and everything worked fine. (I downloaded 1.11.4 in May, when it was the latest stable version.) It seems that the button() method isn't getting called when dialog() is called. As you correctly surmise, there shouldn't be an object Object in the icons element. My button code looks like this:
<button type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icons" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-check"></span>
<span class="ui-button-text">No</span>
<span class="ui-button-icon-secondary ui-icon ui-icon-circle-check"></span>
</button>
Looks like maybe this is a "real genuine bug" in jQuery-UI 1.12.0. :)
Edit: looks like actually this is a "real genuine feature" in jQuery-UI 1.12.0, along with a host of other changes, some of which break compatibility with previous versions. See Harpo's "new syntax" link. Anyone using menus (especially menus, old ones will no longer work), radiobuttons/checkboxes, or a few other things, will want to read it.
As for getting two icons on a button, it's still possible with the new syntax, but you can't do it using the buttons parameter in the dialog() method. Instead, you'll have to do the button the standard way, adding spans for the icons. (The upgrade doc says that you can just put the second icon span in the markup, and use the icon parameter for what used to be the primary icon, but I wasn't able to get that to work in this context.) So, for the markup:
<div id="alert_div">
<button id="okButton">
<span class="ui-icon ui-icon-check"></span>
Ok
<span class="ui-icon ui-icon-circle-check"></span>
</button>
</div>
And then:
$('#alert_div').dialog({
open: function(e, ui) {
$('#okButton')
.button()
.on('click', function() {
$(this).dialog('close');
});
}
});

jQuery UI 1.12 introduced a new syntax for button icons, which I have confirmed fixes this problem (see this jsFiddle). Currently, it doesn't accept the deprecated options; a PR has been submitted to fix that. See my bug report for details. The following code works with jQuery UI 1.12 and jQuery 3.1.0:
$("#alert_div")
.attr("title", "Error")
.text("Please choose a calendar and enter both start and end dates.")
.dialog({
modal: true,
draggable: false,
resizable: false,
position: { my: "top", at: "top", of: window },
buttons: [{
text: "OK",
icon: "ui-icon-check",
click: function() {
$(this).dialog("close");
}
}]
});

Please have a look this is for Example, we can do any thing to it..
use style to make changes into it...
Thanks... :)

Confirmation dialog with data using AngularJS

I am trying to make a dialog box that confirms the user wants to proceed.
The situation is this: I have a table with may events. The user can decide to delete the event.
The table is built like this:
<tbody>
<tr ng-repeat="event in EventsCtrl.events>
<td>
<a ng-click="event.updateStatusDone(event.eventid)" href="#">
<i class="delete-icon"></i>
</a>
</td>
<td>{{event.timestamp}}</td>
<td>{{event.date}}</td>
...
The relevant code in the controller looks like this:
app.controller('EventController', ['$http', function($http){
this.updateStatusDone = function(eventid){
$http.delete(serverUrl + "/manage/event/" + eventid);
}
}
Now I'd like to add a confirmation box (I read about modal), that will ask the user to confirm.
The eventid has to be passed through.
I've tried researching a lot about modal, but they all seem to alert, without passing the data required (eventid in this case).
Does anyone have a working example? A lead, some reference to give?
Thanks in advance!

Here is a partial example to get you started, from something I wrote:
function createMessageBox($dialog, title, message, buttons) {
var msgBox = $dialog.dialog({
templateUrl: 'partials/dialogs/message_dialog.html',
controller: 'MessageBoxController',
backdrop: false,
dialogClass: 'modal confirm-dialog movable',
resolve: {
model: function () {
return {
title: title,
message: message,
buttons: buttons
};
}
}
});
return msgBox;
}
As you can see I'm passing the title, message and buttons variables, and later using them in the message_dialog.html dialog.

I found the best thing so far to fit my situation here:
https://stackoverflow.com/a/19930247/5459561
It actually calls my function only if accepted.
One thing to keep in mind, it is not a good looking dialog box, that part still needs work.

How to get AlloyUI modal body to render properly when initialized as visible: false?

I'm using the AlloyUI modal "Real World Example" directly from their website at: http://alloyui.com/examples/modal/real-world/
Using the example verbatim and changing the following line from:
visible: true,
to
visible: false,
So that the modal appears only after clicking the button instead of when the page loads, as one would expect a dialog box to do. When I click the button to "show modal" the modal loads however the body of the dialog doesn't fill it's space properly, and the toolbar is mashed up against it. Upon resize everything jumps back into place nicely.
I'm looking for a clean fix, so far I figure a hacky fix might be to load the modal with a zIndex that puts it behind the page body, and alter the z-index via CSS with the button click (but this seems really hackish). I could probably also programatically resize the modal after the button fires modal.show() but that would cause a visible jump in the layout which I would like to avoid.
Any suggestions? I know AlloyUI has tons of hidden goodies, as their documentation is sparse, perhaps the visible attribute is not the one I should be using?

After some research I found an answer to my own question, this still may be a hacky fix but until someone comes up with something better here is the solution.
Step 1:
Leave visible: true intact.
Step 2:
Invoke .hide() after setting up the modal
The complete code.
YUI().use('aui-modal', function(Y) {
var modal = new Y.Modal({
bodyContent: '<div id="dialogBody"><div id="myTab"></div></div>',
centered: true,
headerContent: '<h3>Modal Goodness</h3>',
height: 600,
modal: true,
render: '#modal',
width: 900
}).render();
modal.addToolbar([
{
label: 'Save',
on: {
click: function() {
alert('You clicked save!');
}
}
},
{
label: 'Close',
on: {
click: function() {
modal.hide();
}
}
}
]);
modal.hide();
Y.one('#showModal').on(
'click',
function() {
modal.show();
}
);
});

I've done it nearly as you, just a little difference
modal = new Y.Modal(
{
centered: true,
contentBox: '#contentBox',
destroyOnHide: false,
headerContent: '<h3>Informations to your Orders</h3>',
height: 400,
modal: true,
render: '#modal',
resizable: {
handles: 'b, r'
},
visible: true,
width: 450
}
).hide();
I replaced .render() with hide(), by clicking a button this lines of codes are called:
Y.all('#showModal').on(
'click',
function() {
modal.show();
}
);
Can't find a method or parameter on YUI API Docs to stop auto render, so that seems to be the 'usual' way. I thought it might be the attribute render, but setting it to false or deleting the attribute don't make any changes to the auto init behaviour.

Opening JQuery Dialogs from JQuery Dialogs

I am currently working on a bit of JS, and have run into an interesting issue. I'm not sure what I'm doing wrong here, as I don't see any reason it shouldn't work, but I'm not getting any results. I am running the following code:
$('#am_schedDetailModal').dialog('option', 'buttons', [{
text: 'Delete',
click: function () {
$('#am_confirmationDialog').html('Are you certain you wish to delete this entry?');
$('#am_confirmationDialog').dialog('option', 'buttons', [{
text: 'Yes',
click: function () {
deleteScheduledEntryAt(cellID);
$('#am_schedDetailModal').html('');
$('#am_schedDetailModal').dialog('close');
$('div', this).html('');
$(this).dialog('close');
}
}, {
text: 'No',
click: function () {
$('div', this).html('');
$(this).dialog('close');
}
}]);
$('#am_confirmationDialog').dialog('open');
}
}]);
The problem is that when I run this code, the second dialog doesn't appear. The first dialog appears, and the other buttons work fine, but the 'Delete' button has no effect at all. There is no error (according to FireBug), but nothing shows up. Any suggestions?
EDIT: Thanks to Kevin van Hoorn, it appears that this was a pretty simple mistake- I created the second dialog in the code, but forgot to actually initialize it.

You have to append that div to something before trying to use it.
Like
document.append('<div id="am_confirmationDialog" />');

A dialog inside a dialog gets rendered N times over itself

Using ASP.NET MVC 4, jQuery 1.6.2, jQuery UI 1.8.11. Currently debugging in Firefox 16.0.2.
I am trying to make this thing work so I have a reusable jQuery UI modal dialog with autoOpen: false which gets opened from the main page. So far so good. That reusable jQuery UI dialog will open a new modal dialog which is later destroyed and created again whenever needed (I tried to make the other one reusable too but I failed, it kept appearing as a div on the first dialog, not as a new separate dialog as it should so eventually I decided to create it every time I need it).
When I first open the first dialog, I can open and close the second dialog without problems. However the problem occurs when I close the first dialog and open it again. It behaves as it has as many dialog placeholder divs as the number of times I have opened the first dialog. Although I am pretty sure I destroy the second dialog AND remove the placeholder div every time I close it.
I have put the dialog code into the /Views/Shared/_Layout.cshtml file and that layout file is referenced by the main page. For those who are not familiar with ASP.NET MVC, the layout file is a shared file which contains header, footer and other html elements which define the layout of the web page, so that you can reference it from any View in your web site. So the layout is infact rendered along with any View which references that layout.
Here is the (pseudo) code in my layout file:
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#veliki").html("");
$("#maleni").dialog("destroy");
$("body").find("#maleni").remove(); /* a desperate attempt to remove ALL divs which hold the 2nd dialog, was just: $("#maleni").remove(); */
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("#veliki").load($(this).attr('data-url'));
$("#veliki").dialog("open");
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
The code related to the second dialog is placed in one of the views which reference another layout (the layout which does not contain any jQuery code). The code in that View looks like this:
<script type="text/javascript">
$(document).ready(function () {
$(".openSubDialog").live("click", function (e) {
e.preventDefault();
$('<div id="maleni"></div>')
.appendTo("body")
.dialog({
close: function () {
$("#maleni").dialog("destroy");
$("#maleni").remove();
$("body").find("#maleni").remove(); /* delete them all. but where did "they" appear from?! */
},
modal: true,
height: 450,
width: 600,
left: 0
})
.load($(this).attr('data-url'));
});
});
</script>
To sum it up:
I open the #veliki dialog by clicking a link in the main page.
I create and open the #maleni dialog by clicking a link in the first dialog.
I close the #maleni dialog, destroying it and removing the #maleni div.
I close the #veliki dialog.
I open #veliki dialog by clicking another link in the main page.
I create and open the #maleni dialog which magically appears two times now (as seen in FireBug).
I slam the wall with my head which doesn't solve anything.
Anyone with an idea?

Why don't you use already existing window but with varying content? I have created a fiddle with this functionality : http://jsfiddle.net/scaillerie/wEX42/ .
The main point is that you don't have to handle the close event of your #maleni window : you only close it with $("#maleni").dialog("close"); and when you again need it, you re-open it : $("#maleni").dialog("open");.
An example of implementation in your case can be the following :
Layout page :
<html>
<head>
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$("#veliki").dialog({
close: function () {
$("#maleni").dialog("close");
},
modal: true,
height: 600,
width: 800,
left: 0,
autoOpen: false
});
$("body").delegate(".openDialog", "click", function (e) {
$("#veliki").dialog("open").load($(this).attr('data-url'));
});
$("#veliki").delegate(".openSubDialog", "click", function (e) {
$("#maleni").dialog("open").load($(this).attr('data-url'));
});
});
</script>
</head>
<body>
<div id="veliki"></div>
#RenderBody(); <!-- The ASP.NET MVC view gets rendered here -->
</body>
</html>
Sub-page :
<div id="maleni"></div>
<script type="text/javascript">
$(document).ready(function () {
$("#maleni").dialog({
modal: true,
height: 450,
width: 600,
left: 0,
autoOpen: false
})
.load($(this).attr('data-url'));
});
});
</script>