You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.
You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/
I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)
Related
So I have a table of records, where everyone of them has a remove button. I want to add a confirmation popup, which will shows up when button clicked.
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
My remove button event:
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
var name = $(this).siblings(".someClassForNameHolder").text();
var urlPath = $("#hiddenForUrl").val();
Application.postRecord(name, "Remove", urlPath);
}
});
Btw, i have few following points:
1) I can't provide every record in the table with unique ids, so I have to keep my data collections (name variable) inside my removeButton event (to be able to use this.sibling...).
2) I want my script to wait until $confirmDialog returns value and only then continue code execution.
Just assign your urlPath to a global variable, and execute the POST inside the OK handler:
var nameToRemove, urlPathToRemove;
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
Application.postRecord(nameToRemove, "Remove", urlPathToRemove);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
nameToRemove = $(this).siblings(".someClassForNameHolder").text();
urlPathToRemove= $("#hiddenForUrl").val();
}
});
I am returning nothing to window.onbeforeunload which results in the default pop-up box not displaying.
Like so:
window.onbeforeunload = function() {
return;
}
Brilliant.
Now my issue is, I want to call another function which displays a custom dialog box as such:
window.onbeforeunload = function() {
dialogBox() // function that generates a custom dialog box.
return;
}
I positioned the function above the return. This displays the dialog box momentarily and continues with the refresh. How can I pause the refresh completely when the dialog box is displayed?
Thank you all for your time.
Edit: My Dialog box does not return anything.
Here's the code for that:
function dialogBox(){
$( "#dialog" ).dialog({
modal: true,
width: 500,
buttons: {
"Save": function() {
},
Cancel: function() {
$(this).dialog("close");
},
"Close": function() {
window.location.href = document.referrer;
}
}
})
}
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.
I have a page with a button on it. I need a dialog to be opened when user click it (I'm using JQuery UI).
Dialog has two buttons: run server code or close dialog.
The problem is that dialog could wait for user action only if OnClientClick returns false, but in this case OnClick won't fire.
So far I have this code, dialog window closes a moment after it opens.
Any ideas?
$(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 240,
width: 440,
modal: true,
buttons: {
"RUN SERVER PART": function () {
$(this).dialog("close");
return true;
},
"CLOSE": function () {
$(this).dialog("close");
return false;
}
}
});
});
function shwindow() {
if ($("#dialog-confirm").dialog("open"))
return true;
else
return false;
}
<asp:Button ID="aspbt" runat="server" OnClientClick="if(!shwindow()) return false;" OnClick="aspbt_Click" />
managed to postpone OnClick event by setting FALSE as a return value and calling postback:
"RUN SERVER PART": function () {
$(this).dialog("close");
__doPostBack($("[id$=aspbt]")[0].name, '');
return true;
}
I don't really like this solution so maybe someone has a better one...
try this:
<asp:Button ID="aspbt" runat="server" OnClientClick="return shwindow();" OnClick="aspbt_Click" />
function shwindow() {
if($("#dialog-confirm").dialog("isOpen")){
return true;
}
else{
return false;
}
}
Check dialog is visible or not by using 'isOpen'. Based on that return true or false.
Update:
if($(".ui-dialog").is(":visible")){
}
Demo:
http://jsfiddle.net/fprvt2pq/
I have a form where I need to display a confirm dialog to the user before saving.
I have done this by intercepting the form submit function as follows:
$("#my_form").submit(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
e.preventDefault();
return false;
}
});
However, the OK button does not function correctly - the dialog does not close and the form is not submitted.
If I change the OK function as follows, then the dialog is closed and the alert is shown.
"OK": function() {
$dialog.dialog('close');
alert('form will be submitted');
},
So, I am guessing that this is something to do with the $("#my_form").submit(); method.
Isn't this like calling your form submit function again and again. I see you are attaching the function to submit functionality, and when you call the submit again,it is invoking the same function.
Your $("#invoice_edit_form") is some other form.Is it like asking one form to submit other form?
The problem you've got is that your submit handler always returns false and has e.preventDefault() too for good measure. Both of these will stop the form being submitted, regardless of whether the user clicked OK or Cancel.
You need to change the logic so that your modal confirmation is shown on a button click (or any other event), not on the form submission. Then, if the user clicks ok you can call the forms' submit() method.
$("#submitButton").click(function(e) {
if ($("#id").val() > 0) {
var $dialog = $('<div></div>')
.html('Are you sure?')
.dialog({
autoOpen: false,
title: 'Save New Invoice',
modal: true,
buttons: {
"OK": function() {
$dialog.dialog('close');
$("#my_form").submit();
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$dialog.dialog('open');
}
});