emptying text field after user inserts data for next input - javascript

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

Related

Go back to previous pop up in MVC

I have a requirement to open a pop on click on a actionlink in MVC. It is working fine.
Main Page (hyperLink)--> Opens a div as popup (1st Popup) (hyperlink)--> Opens another popup (2nd Popup)
Everything is working fine, My problem is on click of a button in 2nd popup it should close the second popup and go back to first popup(it should display as a popup not as a new window)
I have tried windows.open and windows.location. Either it is opening in a new tab or the 2nd pop is not closing and there are so many popups in the page.
Any way to resolve this?
Updated:
Main Page Code to open a popup:
Javasript:
$(function () {
$('#CreateLink').click(function () {
debugger;
$.get(this.href, function (result) {
debugger;
var div = $("#DivToAppendPartialView");
div.load("/ControllerName/PopUp1", { Param1: ""});
div.dialog({
modal: true,
width: 550,
height: 500,
title: "Add New",
resizable: false,
close: function (event, ui) {
location.reload();
}
});
});
return false;
});
});
I have a empty div in Main Page:
#Html.ActionLink("Create","Create","ControllerName",new {#id="CreateLink"})
<div id="DivToAppendPartialView">
In the 1st Popup I have the following code to open the second PopUp
An empty div
<div id="DivAddlFields" style="overflow: hidden;"></div>Add Fields
Javascript:
$(function () {
$('#CreateAddlField').click(function () {
debugger;
var Param3 = "CreateNewRule";
var Param2 = $("#Param1").val();
debugger;
var div2 = $("#DivAddlFields");
div2.load("/ControllerName/PopUp2", { Param1: 0, Param2: Param2, Param3: Param3 }),
div2.dialog({
modal: true,
width: 600,
height: 600,
title: "Add Fields",
resizable: false,
close: function (event, ui) {
location.reload();
}
});
});
});
This opens the second PopUp.
In Second Pop i have this button, on click of this button i want to close the second popup and open the first popup
<input type="button" value="Add" onclick="AddFields()" id="btnAddFields" />

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 box alert updation

I have a div with some content inside and as well as several options in that div area. The div and it's options click events will updated with Ajax call. I have two buttons inside this div which have to pop up different alert boxes when some thing goes wrong. One dialog box contains below options.
$("#dialog").dialog({
autoOpen: false,
resizable: true,
height: 400,
width: 150,
position: 'center',
title: 'Term Sheet',
beforeClose: function(event, ui) {
console.log('Event Fire');
},
modal: true,
buttons: {
"Submit": function() {
$(this).dialog("close");
},
"Run": function() {
Gosomewhere();
},
"Create": function() {
dosomething();
}
}
});
If i have clicked the first button and chosen the "Submit" option in the open dialog box. Next, if i click the other button which is in the div, it opens the previous dialog box instead of my new plain dialog box written inside that button event as for example,
alert("some message");// but here i get the previous dialog box with three buttons and message content as "some message"
Is there any that i can try pop up the fresh dialog box with alert in this button event?
First u try to put three different different alert for those button with different message see the message and you will found what is the problem

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.

Jquery modal dialog and form submit

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

Categories

Resources