Jquery modal dialog and form submit - javascript

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');
}
});

Related

How to display a dialog box once returning null to onbeforeunload?

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;
}
}
})
}

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.

Dialog Widget. How do I programmatically call the ok method when I hit return key

I am using jQuery UI dialog widget. I have a function associated with the "ok" key within the buttons object:
var myself = this;
this.dialogForm.dialog({
autoOpen: false,
modal: true,
buttons: {
"ok": ok,
cancel: function() {
myself.dialogForm.dialog( "close" );
}
},
close: function() {
myself.form[ 0 ].reset();
myself.dialogForm.remove();
myself.dialogForm = undefined;
if (trackMenu) trackMenu.hide();
}
});
How do I programmatically call the ok function when I press the return key. I want to get rid of the need for the user to mouse over and click the ok button.
Add an event listener when the jQuery UI modal is open.
Very basic example:
function modalEnterKeyPress (e) {
if (e.keyCode === 13)
return ok()
}
// When you open the modal
$(document.body).one('keyup', modalEnterKeyPress);
// When you close the modal
$(document.body).off('keyup', modalEnterKeyPress);

emptying text field after user inserts data for next input

I am using jquery that shows popup for input box. when the user inputs data and submits i redirected action to the same insert action so that the text field can be refreshed.at first pop up for input is shown but when i submit the popup shown previous remained as it is and new pop up for the input box is shown in which the input box is refreshed everytime i click insert.how can I close the previous popup and show only new one. and also please explain ways to empty the the textbox after user inputs data so that he can input next data.
jquery at my layout
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
minWidth: 500,
minHeight: 100,
resizable: false,
close: function () { $(this).remove() },
modal: true
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
</script>
</head>
This shows popup when i click a button to get input box
below is my jquery in insert view
</script>
<script type="text/javascript">
$(function () {
$('form').submit(function () {
$("#popUp").dialog(
{
title: $(this).attr("data-dialog-title"),
minWidth: 500,
resizable: false,
modal: true,
buttons: {
Close: function () {
$(this).dialog("close");
}
}
}
);
});
});
</script>
this shows popup for the actions that is performed from this page. ie for error message and insert another user form. Hence the popup is generated from the layout view and again next popup from insert view.I am trying to close popup from layout view when the popup from insert view is generated or some way to clear the text field in insert view without showin second popup.What should i do.
This is the line you want in the code below. I put it inline with a comment to denote but I'll put it here too for easy finding: $(this).find("input").val("");
$('form').submit(function () {
$("#popUp").dialog(
{
title: $(this).attr("data-dialog-title"),
minWidth: 500,
resizable: false,
modal: true,
buttons: {
Close: function () {
//This line below is what you need to clear the field
$(this).find("input").val("");
$(this).dialog("close");
}
}
}
);
});

Return value of jquery UI dialog Box

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 :)

Categories

Resources