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" />
Related
Clicking a button on the main page to add a sku opens up a new window with a search field as seen in the image below. This pop-up has got a Check All button which when clicked selects all checkboxes both on the pop-up window and the main page. I don't know why it selects those on the main instead of just selecting the ones in the pop-up window.
Below is the code to select the checkboxes.
self.element.dialog({
bgiframe: true,
height: 600,
width: 838,
modal: true,
autoOpen: false,
resizable: true,
closeOnEscape: true,
title: "Add skus",
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Add Skus': function() {
self._save();
$(this).dialog('close');
},
'Check all' : function(){
$(':checkbox').attr('checked', true);
}
}
});
Try this statement:
$(':checkbox', this).attr('checked', true);
This adds context (the dialog box in this case) to the selector.
I'm stuck on a old project using Jquery UI to display Modals on view. The issue that I am having is that the dialog modal view is closing when user clicks outside of Model Dialog. In Jquery is there a property to prevent this? I know that backdrop and keyboard property in Bootstrap would help in Boostrap in preventing closing of modal base on outside click but what is the case with Jquery UI?
Here's my Javascript code below:
// EDit Dialog
var updateBanquetTicketDialog = function () {
var s = $('<div></div>').dialog({
title: "Edit Banquet Ticket",
autoOpen: false,
dialogClass: "success-dialog",
modal: true,
buttons: [
{
text: "Update"
, 'class': "btn-primary"
, click: function () {
updateBanquetTicket();
}
},
{
text: "Cancel"
, 'class': "btn-warning"
, click: function () {
editBanTicketDiag.dialog('destroy');
}
}
]
});
return s;
}
I Figured it out. You must go to jquery.dialog.js file
and on line number 117 on show function replace it's code with:
var show = function () {
//call the bootstrap modal to handle the show events (fade effects, body class and backdrop div)
//$msgbox.modal('show');
$msgbox.modal({
show: true,
backdrop: 'static',
keyboard: true
});
};
I was looking at this answere jQuery how to close dialog from iframe within dialog?.
I have the same situation i.e. a page that calls a jqueryui dialog in this way:
var message = '<div id="pickDialog"><iframe frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe></div>'
$(message).dialog({
modal: true,
width: 'auto',
title: 'Seleziona'
});
In the Anagrafica page, when the user press a button I run another jqueryui dialog as follows
var message = '<div>Hai selezionato ' + value + '.</div><div>Confermi?</div>'
$('<div></div>').html(message).dialog({
modal: true,
title: 'Conferma',
buttons: {
"Si": function () {
window.parent.setCodice(value);
$(this).dialog("close");
window.parent.closePick();
},
"No": function () {
$(this).dialog("close");
}
}
});
Function closePick in main page is:
function closePick() {
$('#pickDialog').dialog('close');
return false;
}
This code works... but only first time! When I open the iframe id="pickDialog" the second time, when I press Si button the dialog doesn't close.
The function closePick is executed and I haven't errore in Javascript console.
What could it be?
I've solved this issue placing in the html page this
<div id="pickDialog" style="display:none"></div>
and then the jquery function becomes
function pickDialog() {
var message = "<iframe width="100%" height="100%" frameborder="0" src="/Anagrafica/Pick?where=TipoAnagrafica=\'P\'"></iframe>"
$("#pickDialog").dialog({
modal: true,
width: dWidth,
height: dHeight,
title: 'Seleziona'
}).html(message);
}
The other code is unchanged. I don't know why but this solved the issue.
I have a jquery-ui dialog box with a cancel button which closes the dialog. In this dialog box there is a page which generates a string, and sends it to a Java back end. This string contains spaces. Jquery is interpreting spaces as a click, causing my popup to close before it should.
How would I make an event for cancel button that only gets fired on a mouse click, and not a space bar?
Code:
$('<div id="popup">').dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel" : {
text: "Cancel",
id: "cancelButton",
click: function(){
$('#popup').html('');
$('#popup').dialog('close');
}
},
}
});
var close = function (event, ui) {
$('#popup').unbind("dialogclose", close);
//reload page
};
$('#popup').on("dialogclose", close);
$('#popup').load("index.html").dialog('open');
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");
}
}
}
);
});