Close a JQueryUI dialog works only one time - javascript

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.

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" />

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

Jquery Dialog function executing onload

When my page loads it automatically reloads the page due to the dialog functions having window.location.reload() in one of them. I am new to making jquery dialogs so any corrections will help
Here is the code
$("#CancelConfirmDialogDiv").dialog({
autoOpen: false,
width: 600,
resizable: false,
modal: true,
buttons:
{
"Yes": function () {
$(this).dialog("close");
// redirect to the base admin/station page
var url = '#Url.Action("Users", "Admin")';
window.location.reload();
}
,
"No": function () {
$(this).dialog("close");
}
}
});
Thanks in advance
When window.location.reload() is commented out the page no longer refreshes the page
It was a version compatibility issue thanks Radio

jquery dialog popup window problem

I added this code in my PopUpWindow.js File.. in my scripts folder
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
document.getElementById('window').innerHTML = message;
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I have Included this js file in Site.Master page.
But still i am not able to access this PopUpWindow function in any of my aspx page?
is that I am doing something worng?
I am not able to execte this PopUpWindow for showing the Popup Message
PopUpWindow("Field to Show","Message","URL redirect");
Thanks
Although "window" is being held in a variable, it is not added to the page anywhere before you try to get it by id.
var window = "<div id='window' style='display: none;width:190px'></div>";
PopUpWindow = function (titles, message, redirectURL) {
// Add to body (change the selector to whatever's relevant)
$('body').append( window );
// Set the innerHTML the jQuery way :)
$('#window').html( message );
$("#window").dialog({
resizable: true,
height: 180,
title: titles,
width: 500,
modal: false,
open: function () {
$('.ui-widget-overlay').show();
$('.ui-dialog-titlebar-close.ui-corner-all').hide();
},
buttons: {
"OK": function () {
$(this).dialog("close");
if (redirectURL) {
window.location = redirectURL;
}
}
}
});
};
I've only tested this on JSFiddle, and the CSS isn't there, so I can't guarantee there's not more wrong, but this does make a dialog appear if you change display to "block" on `#window'
It would seem that either you are loading this file wrong (bad url) or something else is going on. Could you check and let us know? It could even be a syntax error.
EDIT:
Did you forget to append window to your DOM?
var window2 = "<div id='window' style='display: none;width:190px'></div>";
$(window2).appendTo("body")

ui Dialog works once in IE

I hope someone can help with this problem. I am using ui Dialog that pops up on clicking a link with the same class. The problem is that the link work great once but if i click it again or another link with the same class then only the overlay loads but not the content box in IE only. It works great in firefox.
My script includes an ajax post, if i remove the ajax code then the box works fine on every click.
My code:
$().ready(function() {
$('#dialog').dialog({
autoOpen:false,
title: $(this).attr("title"),
modal: true, width: 450, height:"auto", resizable: false,
close: function(ev, ui) { $(this).remove(); },
overlay: {
opacity: 0.5,
background: "black"
}
});
$(".mybutton").click(function(){
$.post($(this).attr("href"), { },
function(data) {
$('#dialog').html(data);
}
);
$('#dialog').dialog('open');
return false;
});
});
I have multiple links with the class "mybutton" and a div with the id #dialog . I am also using the latest version of jQuery and ui.
Any help would be greatly appreciated. Thanks
I am using IE8, jQuery 1.3.2, jQuery UI 1.7.1
The post is done asynchronously by default. It looks like you expect it to be synchronous. Try moving the open of the dialog into the callback after the data is set rather than in the click function -- which may execute before the callback returns.
move the open into the callback...
$('#dialog').html(data).dialog('open');
I was having the same problem. I resolved it by managing the state of the Dialog myself...creating a new one and disposing of it each time.
function makeDialog()
{
var html = '';
html += '<div>My dialog Html...</div>';
return $(html).dialog(
{
position: 'center',
modal: true,
width: 518,
height: 630,
autoOpen: false,
close: function() { $j(this.remove(); }
});
}

Categories

Resources