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

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

Related

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.

magnific popup how to open popup via script just like as alert

I have a div with contents to be displayed as popup, however, I am not sure how to open it in a popup using magnific popup script automatically, just like as an alert.
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
focus: '#zipCode',
modal: true
});
});
when I fired the div with class "popup-modal" using click event, I am seeing screen with gray color having value rendered as true.

jquery implementation of Please Wait dialog - safari specific issue

My goal is to display a non-modal jquery-ui dialog box that will display a please wait message along with a loading animation. This dialog box would display on the page the user is coming from, not proceeding too. I largely have this working already with the code below. However, Safari will not display the the please wait dialog. Firefox and Chrome display dialog and following href. Safari just follows the href, but won't display the dialog.
If I try a preventDefault(); or a return false; in the click event handler, then safari (and all browsers) will display the please wait dialog, but of course it will not follow the href. So I do want the default behavior of going to the clicked href, just while going to the href, I want the dialog to display.
I have even tried to do a click handler and inside do a preventDefault(), then open the dialog and then set window.location or location.href, but still Safari will just follow the href and not display the dialog.
Does anyone have any other ideas?
javascript:
$(document).ready(function() {
// Register the pleaseWaitDialog element as a jquery-ui dialog widget with certain options set
$("#pleaseWaitDialog").dialog({
autoOpen: false,
buttons: {},
open: function(event, ui) { $(".ui-dialog-title, .ui-dialog-titlebar-close").hide(); }, // hide the dialog title bar
resizable: false,
show: {effect: 'fade', duration: 500},
height: 120,
width: 300
});
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
});
HTML:
Add Meeting
<div id="pleaseWaitDialog">
<div>
<p>Please wait</p>
<img src="/ripplemobile/images/ajax-loader.gif" />
</div>
</div>
A quick point, edit this function:
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// ADD
e.preventDefault();
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
This should solve your current issue.

Can't close Simplemodal from outside function

So I create a simplemodal box with an iframe inside of it. in the iframe I have a text box which calls a function once it is submitted. This function then goes off and executes its own commands. What I want to do is after the person submits their text for the simplemodal box to close. I haven't really seen a attribute that allows me to set an id for the modal so I can refer to it outside the function. Here is my code:
the modal:
$.modal('<iframe src="chrome-extension://kdcfmjjkjcgaklpmpnhcmieepkiddfen/options.min.html" height="120" width="300" style="border:0">', {
close: true,
closeHTML:"",
containerCss:{
backgroundColor:"#000",
borderColor:"#000",
height:100,
padding:0,
width:300,
height:125
},
overlayClose:true,
opacity:50,
overlayCss: {backgroundColor:"#000"}
});
the options.min.html:
the passMessage:
function passMessage() {
var value = document.getElementById('speechInput').value;
var event = "commands"
$.modal.close();
chrome.extension.sendRequest({command:value}, function(response) {});
}
as you can see the modal uses the options.min.html to create a speech input box inside the modal. Once the user stops talking another function is called in which the value is taken from that box. However the $.modal.close(); function does not actually close the modal but instead just hangs my program and it goes nowhere. I need to know how to refer to the modal that is created elsewhere.
thanks for any help
If you want to close the modal from within the iframe, use the following JavaScript:
parent.$.modal.close();
As for ID's, SimpleModal automatically adds them to the dialog elements: simplemodal-overlay, simplemodal-container, and simplemodal-data

How to attach an event to a button in an iframe

Right now I have a jQuery UI dialog with an <iframe> inside of the dialog. When the user pushes a button, the dialog pops up with a form-editing screen in the iframe.
Well, I want to have two buttons in the inner form-editing screen, "cancel" and "ok". Cancel doesn't save changes and closes the dialog, ok saves changes and closes the dialog. Pretty simple..
So how do I attach an event to the cancel button inside of the iframe from the parent page? I would also assume that you would somehow need to attach an event to the iframe's DOM-ready or else the button would not yet exist.
How do you do this?
Also, the iframe is on the same-domain and such so there is no cross-domain worries
A simple example is here at jsbin with the iframe source
Ok so here is what I did to accomplish this. I added this code to the iframe page:
$(document).ready(
function()
{
$("#cancelbutton").click(
function()
{
parent.CloseDialog();
});
});
Then in the opening page I put this:
function CloseDialog()
{
$('#diag').dialog('close');
}
So rather than try to close the dialog from the frame I just call a method in the parent page that will take care of closing it. Same effect but a lot easier. Couldn't seem to get the frame to let me use the dialog method. But this worked.
Does this get you close?
DialogBox.html:
<body>
<input type="submit" value="Edit" id="editbutton" />
<div id="diag">
<iframe src="/" ></iframe>
</div>
<script>
$(document).ready(function(){
$('#diag').dialog({
height: 100,
width: 100,
autoOpen: false
});
$('#editbutton').click(function(){
$('#diag iframe').attr('src','modal.html');
$('#diag').dialog('open');
});
$("#diag iframe").load(function() {
$("#diag iframe").contents().find('#cancelbutton').click(function() {
//close dialog here
});
});
});
</script>
</body>
onclick="parent.window.close();"

Categories