We Keep Coding

how to prevent close dailogbox pop up when close dialog and refresh

Hi it is very simple question, but I didn't find the answer fit in my situation.
In my jQuery dialog I have buttons which is update and close. User click 'update button' then on code behind I need to update in database then close.
when user click the close button then I close the dialog. the dialog is load aspx page. I have two problems.
The problem is if user click close button which run javascript window.close(). It will pop up the windows "Do you want to close window...."
How can I refresh the parent page and close the dialog by clicking the 'update' button.
there is the code to load the dialog:
function openDialog(url, name, width, height) {
$("#dialog-box").load(url).dialog({
autoOpen: false,
resizable: true,
height: 425,
width: 600,
modal: true
});
$('#dialog-box').dialog('open');
return false;
}
I tried to use $("#dialog-box").dialog("close"); in my function which is called in code behind. but it show the error.
there is my function
function RefreshParentAndClose() {
$("#dialog-box").dialog("close");
}
there is the code I load the dialog on parent page
<div id="dialog-box" title=" "></div>
<td width="33%" align="right"><asp:button id="btnSelect" runat="server" causesvalidation="False" text="Select Locations"
OnClientClick="javascript:return openDialog('popLocation.aspx','select',600,500);" /></td>

Use below code for close
$("#dialog-box").dialog( "close" );
and to refrsh on close use
$("#dialog-box").dialog({
close: function( event, ui ) {
window.location.reload();
}
});

1) You could close the dialog by invoking its close() method:
function OnCloseClick() {
$("#dialog-box").dialog("close");
}
2) You just need to refresh the main page. On the subsequent load the dialog should not be opened (in case you do not load it automatically). More information about the method's parameter used below could be read from this answer on StackOverflow.
function OnUpdateClick() {
window.opener.location.reload(false);
}

On Asp.net page why jquery close button not working

I work with an Asp.net and C#. When I click on a button to show the message I get one popup box, but when I click close button on popup box it’s not closing the popup.
aspx page syntax:
<div id='dialog-page' title="Modal">
</div>
<asp:LinkButton ID="lbtnModal" runat="server" Text="View" OnClientClick="javascript:return showDialog(this.name);"></asp:LinkButton>
jQuery code:
function showDialog(uniqueName) {
var url = "ReportGenerationSingleACView.aspx?id=";
var temp=document.getElementById('<% =txtCustomerID.ClientID%>').value;
url=url+temp;
$("#dialog-page").load(url).dialog({
title: "AC View Details",
autoOpen: false,
resizable: true,
height: 400,
width: 600,
modal: true,
buttons:
{
Close: function() {$(this).dialog("close");}
}
});
$('#dialog-page').dialog('open');
return false;
}
Here is some more information about the popup work but those not work for me:
Stack Overflow question: jQuery Pop up not working
Why is it not working for me? How to handle or what am I missing? Help me solve this issue.
If have any questions, please ask - thank you in advance, any type of suggestion will be acceptable.
Note: Popup X icon works properly and close button also fired but popup not close

Be sure that {$(this).dialog("close");} targets on the dialog. So you try to close the dialog in your dialog and there are none.
Try out {$(parent).dialog("close");} instead or pass the function to the parent page.

Build Modal Dynamically

How can I run the modal and build the modal from dynamically create elements.
Example, I have a button that I want to launch the modal, which is dynamically created.
I'm using this modal plugin:
http://labs.voronianski.com/jquery.avgrund.js/
I have tried this, it does work, although it doesn't work until the 2ND click of the button.
$('body').on('click','#siteSwitch', function(){
$(this).boxModal({
height: 800,
width: 800,
holderClass: 'boxModal',
showClose: true,
showCloseText: 'X',
enableStackAnimation: false,
template: '<p>So implement your design and place content here! If you want to close modal, please hit "Esc", click somewhere on the screen or use special button.</p>'
});
});
Thankyou

I found the answer guys,
It seems adding openOnEvent: false as an option for the modal fixes it. It makes complete sense, by default it was true, so it's waiting for a 'click' event to fire the launch which hasn't happened until it's built once in the background.
Thanks!
Shannon

$(this).avgrund({})
code is like this, rather than boxModal()

Stop multiple Dialog windows being opened

I'm trying to make a ajax call for the partialview of my webpage, then pull title and data from it before putting it in a Dialog window. However when I create the dialog, it opens once correctly and 6 more times as an empty Dialog - just the title bar.
In chrome I can see the partialView contains the HTMLDivElement, and 7 HTMLScriptElements so that accounts for the multiple opens - however if I open the Dialog for just that div element it will not load the scripts (and thus lookups and tabs do not work).
$.ajax(url)
.success(function (partialViewHtml) {
// get page data
$(partialViewHtml).dialog({
title: title,
modal: true,
resizable: true,
draggable: true,
height: sheight,
width: swidth
});
Any help would be greatly appreciated. I've been banging my head on a wall for a while. Thanks.

As you seem to have understood, this is normal because of the 7 elements in the jQuery collection on which you open the dialog.
You should add the script elements separately to the page, using for example
$('body').append(scriptElementHTML);
And then open your dialog on just the div :
$(divHtml).dialog({

Not sure whthere jQuery ui has a method to close all dialogs, but we can do it like this
function createDailog () {
$(".ui-dialog-content").dialog("close"); // close all dialogs
$("<div>fdfdsfdsfdsfds<div>").dialog({
title: "title",
modal: true,
resizable: true,
draggable: true,
height: 200,
width: 200
});
}
or you can put a condition like this
if(!$(".ui-dialog-content:visible").length){
// show dialog
}

Show Modal Dialog implementation using JQuery

I need to open a page as a Modal Dialog using Jquery .For Example: I have 2 pages say, Parent.aspx & Child.aspx, I need to open child.aspx in a modal dialog using JQuery when i click on a button/link in the parent.aspx. Also Postback can happen in the parent and child pages.

function test(){
openShadowBox("http://www.google.com", 400, 600, 'my google');
}
function openShadowBox(url, height, width, title){
width = parseInt(width)+60;
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="cdt_shadowbox" src="' + url + '" frameBorder="0"/>').dialog({
title: (title) ? title : 'CDT Shadowbox',
autoOpen: true,
width: width,
height: height,
modal: true,
resizable: true,
autoResize: false,
closeOnEscape: true,
//position: 'top',
overlay: {
opacity: 0.5,
background: "black"
}
}).width(width - horizontalPadding).height(height - verticalPadding);
$('html, body').scrollTop(0);
}

I think the most easiest way is to use iframe in you dialog pointing to Child.aspx.

JQuery has a number of options for creating a Modal "popup" with a page, but as I read your question I think you want to open a page in a separate browser window with a modal relationship to the original page. Javascript (Jquery) allows for Window.Open. This opens your second page in a new window,however, it does not create a modal relationship, nor (I believe) can it.

There are a number of jquery plugins to work with modal dialogs, for instance:
http://plugins.jquery.com/project/modaldialog
Depending on the user experience you're looking for, you'll probably either want an iframe in the modal dialog or perhaps an ajax call to fetch the content and load it into the dialog.

You can either use an iFrame or an UpdatePanel.
A modal dialog is really no different than any other page element. What makes it appear to be "modal" is simply CSS and nothing more.
The one difficulty you make have with ASP.NET and jQuery, though, is that ASP.NET needs everything to be inside it's single form tag. Since jQuery isn't designed specifically for ASP.NET it (and its plugins) may or may not know (or care) about this.
For example if you use simplemodal it has an option to specify where on the form the dialog is appended, you can use this to ensure it's inside #aspnetform and everything it it should work just like any other page element.