Develop Reference

Jquery Button Dialog Box not Closing Immediately when Click

I have a button called "Show All", when user click it, it will pop up a window to confirm whether user wants to show all entities. I am using Jquery for this dialog box, I have:
function showAll() {
$("#" + showAllDiv).show();
$("#" + showAllDiv).dialog( {
title: XXX,
height: XXX,
width: XXX,
modal : true,
buttons: {
"Yes": function () {
$(this).dialog("close");
addLoadingFn(); // it will show a "please wait..." dialog
heavyDutyWorkFn(); //a function to get all data and show on the pop up HTML window;
deleteLoadingFn(); // it will close the "please wait..." dialog
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#" + showAllDiv).html(You sure to show all?)
}
The problem is, when I click Yes, the dialog does not close immediately. It will still stay for a while until the "heavyDutyWorkFn()" finish its work. In another world, after click "Yes", $(this).dialog("close") will not close, until heavyDutyWorkFn() finish showing all data.
Does anybody know what happened? Any help will be greatly appreciated. Thank you!

You can run heavyDutyWorkFn() asynchronously with setTimeout(), so it doesn't delay the rest of the script.
function showAll() {
$("#" + showAllDiv).dialog( {
title: XXX,
height: XXX,
width: XXX,
modal : true,
buttons: {
"Yes": function () {
$(this).dialog("close");
addLoadingFn(); // it will show a "please wait..." dialog
setTimeout(function() {
heavyDutyWorkFn(); //a function to get all data and show on the pop up HTML window;
deleteLoadingFn(); // it will close the "please wait..." dialog
}, 1);
},
Cancel: function() {
$(this).dialog("close");
}
}
}).html("You sure to show all?")
}
BTW, it's not necessary to call .show(), since .dialog() automatically shows the dialog (unless you use autoOpen: false).

An issue with jQuery dialog

Say I have the following link:
<a onclick="confirmDelete()" href="delete.do&xyz">Delete user</a>
and the following is the confirmDelete function:
function confirmDelete()
{
if(!confirm("delete user?"))
{
return false;
} else
{
return true;
}
}
Basically when click on link, it checks whether the user select ok or cancel and then perform based on it.
Problem: I have got hundreds of similar links on my platform and we decide to turn all the javascript alerts to jquery dialog.
I used the following to somehow override the alert:
$(function(){
window.confirm = function(message) {
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
};
});
It works fine and the alert comes up as a jquery dialog but the issue is because of the fact that it is not possible to return something from a handler like dialog, I am not sure how to tell my button in the filed, that the user selected ok or cancel.
Basically I m not sure how to link them all together.
Please help

The issue is because of javascript asynchronous nature . As you are using jQuery . could try following method .
$('a[onclick="confirmDelete()"]')
.attr('onclick','')
.click( function(){
var anch = this,
message = "delete user?";
$('#overrideAlert').text(message).dialog({
resizable: false,
modal: true,
buttons: {
"Ok": function() {
$( this ).dialog( "close" );
alert( "window.location=" + anch.href );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
return false ;
});
I made jsfiddle http://jsfiddle.net/wB389/

Maybe like so:
"Ok": function() {
window.location=deleteURL;
$( this ).dialog( "close" );
},
It's probably a little more complicated that that since you use relative url's but you can get the current url using window.location.protocol + window.location.port + window.location. window.location.host + window.location.pathname

jquery - How to make dialog button wait response from another dialog?

Update 1: I've done with callback function.
This is my solution. I just add a callback function when open dialog2 and a hidden element to receive what user change in dialog 2. Now everything done. Thanks you!
http://jsfiddle.net/N6qbR/2/
-------Old question----------------
My English is bad so I write easily.
I'm using Jquery Dialog and I want to show multiple dialogs. (dialog1 opens dialog2 opens dialog 3...)
But the problem is when I open dialog1 and then dialog2 (confirm dialog, So that the user can choose Yes/No in dialog2 and return value to dialog1).
I know Javascript is asynchronous, so when user opens dialog1 and click open dialog2, it won't wait for event in dialog2 to finish.
Here is my source code (simple logic)
$("#dialogForm").dialog({
autoOpen: false,
height: height,
width: width,
modal: true,
close: function() // Hàm này được gọi tự động khi đóng dialog
{
//abc();
// Sau khi thêm mới thành công thì reset lại form
resetForm();
$("#dialogForm").dialog( "close" );
},
buttons: {
"Ok": function() {
var choose = showDialogConfirm(250, 200, "Bạn có đồng ý thêm?", test);
if(choose == true)
{
// do some good
}
},
"Cancel": function() {
$("#dialogForm").dialog("close");
}
}
});
$("#dialogForm").dialog("open");
function showDialogConfirm(width, height, message)
{
$("#dialogConfirm").toggle();
$("#dialogConfirm").dialog({
autoOpen: false,
height: height,
width: width,
modal: true,
close: function() // Hàm này được gọi tự động khi đóng dialog
{
$("#dialogConfirm").dialog( "close" );
},
buttons: {
"Yes": function() {
return true;
$("#dialogConfirm").dialog("close");
},
"No": function() {
return false;
$("#dialogConfirm").dialog("close");
}
}
});
$("#dialogConfirmContent").html(message);
$("#dialogConfirm")
.dialog("open");
}

definitely you should write the code in the dialog callback functions. in the dialog1 that you just pop up the dialog2 and cuz it's confirm dialog, so it should be model dialog and you bind the code to the OK button, then you can get the "correct" result. Change the showconfirmdialog by adding a new parameter: callbackfunction.

jQuery ajax form submitting multiple times

I am having some issues with multiple form submissions with a jQuery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.
Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.
I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.
The button's id is "save-flag-button"
// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
$('.flag').click(function() {
var cellId = "flag" + String(this.getAttribute("data-client-rel"));
if (this.getAttribute("data-flag-exists") == '0') {
// create dialog
var dialog = flagDialog('Create Flag');
// Making the form ajax
$("form", dialog).ajaxForm(function(success, data) {
if (success) {
$("#" + cellId).attr("data-flag-exists", '1');
$("#" + cellId).attr("data-flag-content", data["flag_state"]);
$("#" + cellId).text(data["flag_state"]);
$("#flag-dialog").dialog("close");
} else {
alert("Failed to submit flag. Please retry.");
}
});
} else { }
}).hover(function() {
if (this.getAttribute("data-flag-exists") == '0') {
this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
}}, function() {
this.innerHTML = this.getAttribute("data-flag-content");
})
});
// jquery dialog code //
function flagDialog(dialogTitle) {
var dialog = $("#flag-dialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
minHeight: 300,
minWidth: 450,
position: "center",
title: dialogTitle,
buttons: [{
id: "flag-cancel-button",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id:"save-flag-button",
text: "Submit",
click: function() {
$("#flag-dialog").dialog("destroy");
// $("#client-relationship-flag-form").submit();
}
}],
close: function() {
//$("#notes-text").text("");
}
});
// Unbinding buttons here //
$("#save-flag-button, #flag-cancel-button").unbind();
$("#save-flag-button").unbind('click').click(function() {
$("#client-relationship-flag-form").submit();
});
$("#flag-cancel-button").click(function() {
$("#flag-dialog").dialog("close");
});
dialog.dialog("open");
return dialog;
};

ajaxForm binding should be done once only.
Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.

javascript/jQuery: how to use var from click event in jQuery dialog?

Using jQuery dialog to open a modal box to confirm e.g. to delete a specific user from friends. I would like to use the friends name in the modal box (currently I print it with php in the name-tag of the link and use jQuery to get it from there).
//create the html for the modal box
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore [put the name here], ...?</p></div>')
//set up the jQuery dialog
var dialog_ignore=$( dialog_html_ignore ).dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
alert(fName); /* this gives me the right username */
dialog_ignore.dialog('open');
return false;
});
How/what is the best way to use the username variable actually as a part of the text (in the html of the modal box)??
Any help is highly appreciated, thank you in advance!! :)

Try this:
var dialog_html_ignore = $('<div id="dialog-confirm" title="Ignore Friend Request?"><p>Some text... ignore <span class="name"></span>, ...?</p></div>')
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$(".name", dialog_html_ignore).text(fName);
dialog_ignore.dialog('open');
return false;
});
Example fiddle

Use the following code in your click event,
dialog_html_ignore.attr("name", fname);
In dialog box you can access like this
dialog_html_ignore.attr("name");

I would write the dialog HTML as actual HTML in the page, not as a string to be parsed by $. Then, I would select it by ID and dialog-ify it so it is hidden at once.
I'd also include an empty <span id='ignore-dialog-fname'></span> in the dialog HTML and then select by ID to set its textContent/innerText to fname.
<script>
$(function() {
//set up the jQuery dialog
var dialog_ignore=$("#dialog-confirm").dialog({
autoOpen:false,
resizable: false,
modal: true,
buttons: {
"No": function() {
$( this ).dialog( "close" );
},
"Yes": function() {
window.location.href = targetUrl;
}
}
});
//open the dialog on click event
$('.click_ignore').click(function() {
window.fName = $(this).attr("name");
$("#ignore-dialog-fname").text(fName);
dialog_ignore.dialog('open');
return false;
});
});
</script>
<div id="dialog-confirm" title="Ignore Friend Request?">
<p>Some text... ignore <span id='ignore-dialog-fname'></span>, ...?</p>
</div>