Develop Reference

Why does my dynamically confirm box only work once?

I have attempted to create a custom confirm UI dialog box, which works perfectly on the 1st attempt, and then on a second attempt of running it, I no longer get alerted of my choice as well as the window does not close. Why is that? What else am I doing wrong here that I perhaps overlooked?
Here is the HTML and Javascript in question:
<input type="button" id="Button" value="Click Me" />
$('#Button').click(function () {
confirmUI('is OK?', 'confirm', function () {
alert('click OK');
}, function () {
alert('click Cancel');
});
});
var confirmUI = function (text, title, callbackOkClose, callbackCancelClose) {
var $dialog = $('<div id="confirm_' + new Date().getTime().toString() + '"></div>');
$dialog.html('<div>' + title + '</div><div>' + text + '<div style="width:100%;"><input type="button" id="confirmCancel" value="Cancel" style="float:right;" /><input type="button" id="confirmOk" value="OK" style="float:right;margin-right: 10px" /></div></div>');
$('body').append($dialog);
var buttonString = '';
$dialog.jqxWindow({
minWidth: 300,
minHeight: 80,
draggable: true,
initContent: function () {
$('#confirmOk').jqxButton({
template: 'primary'
});
$('#confirmCancel').jqxButton({
template: 'default'
});
},
resizable: false,
closeButtonAction: 'close',
isModal: true,
okButton: $('#confirmOk'),
cancelButton: $('#confirmCancel')
});
$dialog.on('close', function (e) {
console.log('1');
if (e.args.dialogResult.OK) { //ok
if (callbackOkClose) {
callbackOkClose();
}
} else { //cancel or close
if (callbackCancelClose) {
callbackCancelClose();
}
}
});
return $dialog;
};
Here is a jsfiddle: http://jsfiddle.net/v0re8jeu/

Because you are creating that dialog for every button click, so things like $('#confirmOk') are no longer unique and return the selector for the button you clicked on first time. You should remove it from dom on close for the next one to work:
$dialog.on('close', function (e) {
console.log('1');
$dialog.remove();

jQuery ("#dialog").dialog('close') not working with button on separate view

I have an ASP.NET view in an MVC project in which I am trying to create a pop-up dialog to create data. There is another view that gets loaded and that view has a button with the id "btncancel_create". I cannot get that button to close the dialog. I am using jQuery 2.1.3 and jQuery UI 1.11.4.
Here is the code for the button:
<input type="button" value="Cancel" id="btncancel_create" />
And here is the view:
$(document).ready(function () {
//alert("Document is ready");
var url = "";
$("#dialog-create").dialog({
title: 'Create User',
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$("#lnkCreate").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-create").dialog('open');
return false;
});
//$("#btncancel_create").on("click", function (e) {
// $("#dialog-create").dialog("close");
// return false;
//});
$("#dialog-create").button("#btncancel_create").click(function (e) {
alert("btncancel_create was clicked");
$("#dialog-create").dialog('close');
return false;
});
});
<div id="dialog-create" style="display: none"></div>
<p>#Html.ActionLink("Create New", "Create", null, new { id = "lnkCreate" })</p>
As you can see, I tried something else which didn't work, which is commented out. The uncommented button click function does return the alert, but does not close the dialog. Thanks in advance for your help, and please let me know if you need any more information.

Instead of
$("#btncancel_create").on("click", function (e) {...
(in my commented out code above)
it should be
$(document).on("click", "#btncancel_create", function (e) {....
I found the answer here: Turning live() into on() in jQuery.

IE7, JQuery UI Dialog

I'm using JQuery UI Dialog. In this form, I validate something.I call this function;
MessageBox('this is message', 'Error', OpenDialog());
In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header
How to solve this?
MessageBox function
function MessageBox(text, title,Func) {
var dv = document.createElement('div');
$(function () {
dv.id = 'Dialog';
dv.innerHTML = '<table style="font-family:Calibri;"><tr><td>' + text + '</td></tr></table>';
document.forms[0].appendChild(dv);
var dlg = $('#Dialog').dialog({
autoOpen: false,
width: 400,
title: title,
modal: true,
resizable: false,
buttons: [
{
text: "Okey",
width: 80,
click: function () {
DialogClose_('Dialog');
}
}],
open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
},
close: Func,
beforeClose: function () {
var dv2 = document.getElementById("Dialog");
dv2.parentNode.removeChild(dv2);
}
});
dlg.parent().appendTo(jQuery('form:first'));
$('#Dialog').dialog("option", "minWidth", 400);
$('#Dialog').dialog('option', 'position', 'center');
$('#Dialog').dialog('open');
});
return;
}
OpenDialog function like this;
function OpenDialog() {
$(document).ready(function () {
$("#dialog").dialog("open");
});
}

Having a look around there seems to be quite a few issues with the height on dialog boxes in IE7.
You could try specifying a height, but that would take away the nice auto-height feature you get.
Alternatively you could just set the height of the browser just after where you set the "dlg" variable is IE7:
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('#Dialog').dialog("option", "height", 100);
}
You can replace the "100" with what you think. If you have a container element in your dialog box you can always use that to set the height, eg:
$("#container").height();
There is also more suggestions on StackOverflow.
Hope that helps.

JQuery Dialog Binding Event to Button

I am having some trouble with jQuery. I want to have a dialog box appear when the user clicks a link to delete something and prompt them to be sure that they actually want to delete it. The dialog box appears fine however I don't see a way to get the url of the link when user clicks the "Yes" button. I tried using the event.relatedTarget property to get the url of the a tag but it is null. Does anyone know how to do this?
Code
<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
draggable: false,
resizable: false,
buttons: {
"Yes": function(event) {
//Go to the url in $("a.delete")
},
"No": function() {
$(this).dialog("close");
}
}
});
$("a.delete").click(function(){
var url = $(this).attr("href");
$('#dialog').dialog('open');
return false;
});
});

<div id="dialog" title="Delete Run">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span>Are you sure you want to delete that run?</p>
</div>
$(document).ready(function() {
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
draggable: false,
resizable: false,
buttons: {
"Yes": function(event) {
var url = $(this).data('url');
window.location = url;
},
"No": function() {
$(this).dialog("close");
}
}
});
$("a.delete").click(function(){
$('#dialog').data('url', $(this).attr("href"));
$('#dialog').dialog('open');
return false;
});
});
A little bit of guessing, as there is no element a.delete in your code ?
Using jQuery's data() is usually a better option than global variables.

You can declare the url var at the start of the document ready in order to access that variable in any of your functions. So first do var url; after (document).ready, then remove the var declaration from the delete's click function and finally set the window location to that variable like so: window.location.href = url; You'll get something like this in the end:
$(document).ready(function() {
var url;
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
draggable: false,
resizable: false,
buttons: {
"Yes": function(event) {
window.location.href = url;
},
"No": function() {
$(this).dialog("close");
}
}
});
$("a.delete").click(function(){
url = $(this).attr("href");
$('#dialog').dialog('open');
return false;
});
});
I've set up an example with your code here: http://jsfiddle.net/dGETj/

How to open jQuery modal dialog using <input type="button"> instead of anchor tag?

We previously have:
<input type='button' value='Some Button' onClick="window.open('somefile.php')">
Now we want to activate jQuery UI modal dialog instead of having a pop-up. We can trigger the modal dialog if we use an anchor tag like so: Open Dialog.
But what if it's an input button?
I am using this script to call the dialog (and so that it can open a file into the dialog box):
$(document).ready(function() {
$('.classfordialog').each(function() {
var $link = $(this);
var $dialog = $('<div></div>')
.load($link.attr('href') + ' #content')
.dialog({
autoOpen: false,
title: $link.attr('title'),
width: 500,
height: 300
});
$link.click(function() {
$dialog.dialog('open');
return false;
});
});
});
Src: http://blog.nemikor.com/2009/04/18/loading-a-page-into-a-dialog/

You can use anything to activate the opening of the jQuery Dialog.
For example.
$(function(){
$('.classfordialog').click(function(e){ e.preventDefault(); $('#dialog').dialog(); });
});
You can add the class to either a button, input, anchor, image, etc...

Well you obviously cant get the link and title from the "Link/A" if it isnt there?
$(document).ready(function() {
$('.classfordialog').each(function() {
var $dialog = $('<div></div>')
.load('somefile.php #content')
.dialog({
autoOpen: false,
title: 'Some title',
width: 500,
height: 300
});
$('.inputdialog').click(function(e){
e.preventDefault();
$dialog.dialog('open');
});
});
});