Refreshing the main page after closing a modal window - javascript

On a given webpage I have a link that opens a modal window using Thickbox. In that window I have a form which I use to save some data. After I submit the form, I close the modal window. Now my question is: can I refresh the main page after closing the modal window?
Thank you.

Call this after the form is submitted and before the window is closed:
window.opener.location.reload();

Suppose this is the div you show in modal mode. You have to call tb_remove() to close the modal window. So just use location.reload(); before that call.
<div id="modalContent" style="display:none">
<form>
...
</form>
<p style="text-align:center">
<input type="submit" id="Login"value="Click to close"
onclick="window.opener.location.reload();tb_remove()" />
</p>
</div>

Actually Thickbox is no longer being maintained, so it might be better to use a different modal window. That being said, I know Facebox allows you to bind box open and close events like this:
$(document).bind('close.facebox', function() {
// do something here
})

If using facebox simply add window.location.reload(); around line 148, so you end up with something like...
close: function() {
$(document).trigger('close.facebox');
window.location.reload();
return false
}
If still using Thickbox I'm sure it's just as easy. Do a search for "close" and add the code.

You can do this easily with the tinybox plugin:
http://sandbox.scriptiny.com/tinybox2/
var parentWindow = window;
$('#submit-deed-button').click(function() {
TINY.box.show({iframe:'submit_deed.html', closejs:function(){parentWindow.location.reload()}, post:'id=16',width:385,height:470,opacity:20,topsplit:3, boxid:'tinybox_container'})
});
The key is to pass in the parent window to the function as a JS var then you call location.reload() on that object

Related

Destory CSS Bootstrap Modal

I have a list of data in a table and a button next to each row. When I click the buton, the modal loads up a relevant remote URL into the modal.
My submit button in said modal has the following jQuery attatched:
$('#editTrackModal').modal('hide');
When the modal hides, and I load up another remote URL into the modal, the modal appears, but on slower internet connections, the original content of the modal stays there for sometimes 4-5 seconds before being replaced.
Essentially, rather than hiding, I want to 'hide and destroy' the modal, and then re-create it.
Is this possible?
Simply destroying the modal after pressing the button closes the window, but then does not allow a subsequent modal to re-open until the page has reloaded.
You could clean the content of the modal, before show, I dont know how you load the content, you could use something like this:
$("#editTrackModal .modal-body").empty();
Hi you can do like this
// the modal is distroyed on hide event..
$('#editTrackModal').on('hidden', function(){
$(this).data('modal', null); //this will destroy you data and model means it will reset.
});
and it may be duplicate of how to destroy bootstrap modal window completely?
you can refer to that link also.
A good way to ensure that the modal's content is clean after hiding/closing it is can be done like this:
$('#editTrackModal').on('hidden.bs.modal', function () {
$('#editTrackModal div').remove(); //When the hidden event is triggered, remove all the contents of the modal.
});
And when you want to show the modal again, you can do something like this:
$('#editTrackModal').append($('.modal-contents')); //create first the contents of the modal, then attach it.
$('#editTrackModal').modal('show');
Your html may look like this:
<div id="editTrackModal" class="modal fade">
<div class='modal-contents'>
......Build your modal contents here......
</div>
</div>

How to display HTML Content using window.showModalDialog()

Will I be able to display a HTML content (not a file) in a pop up window using JS?
I am trying to open a pop up window and display an user defined HTML inside this. I am trying the below, but it doesn't work.
window.showModalDialog("<p>Pop up window text</p>","resizable: yes");
Can some one suggest me how to do this? Thanks in advance.
Contrary to window.open(), the first (URL) argument of showModalDialog() is required. Thus, you can't pass it an HTML string. You can either use window.open:
var newWindow = window.open("", "newWindow", "resizable=yes");
newWindow.document.write('<p>Pop up window text</p>');
Or alternatively, use one the existing modal plugins, such as jQuery UI Dialog or Twitter Bootstrap Modals. They allow you to easily display a modal window based on the content of an existing HTML element, e.g.:
<div id="dialog">
<p>Pop up window text</p>
</div>
$('#dialog').modal(); // Twitter Bootstrap
$("#dialog").dialog({ resizable: true }); // jQuery UI

Close child popup fire jQuery code on parent page

I am doing some twitter authentication in classic asp (I know, but I can't change it). What I am doing is opening an authentication page in a popup via jQuery/JS with window.open that handels all of the rest/oauth authentication and then returns to the same page with the oauth keys I need. I would then like to close the popup and fire off some jQuery hide/show events without refreshing the page.
Code to fireoff the popup and authentication script:
jQuery(document).ready(function() {
jQuery("#twitter-button").live("click", function() {
jQuery("#twitter-button").attr("value", "Processing");
jQuery("#twitter-button").removeClass();
jQuery("#twitter-button").addClass("twitter-button-processing");
window.open('authentication.asp','_blank','width=600,height=400');
return false;
});
});
I then have the following code on the same page nested in some ASP for when we are redirected back:
if Session("OAUTH_TOKEN") <> "" And Session("OAUTH_TOKEN_SECRET") <> "" Then
%>
<script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
window.close();
// I'd like to show/hide new buttons on the parent page here
});
</script>
<%
End If
The goal is to change the button with a class of twitter-button-processing displaying none but I can not get it to change in the parent window. I have tried placing jQuery('.twitter-button-processing').hide(); in a jQuery(window).unload() function after the close but this did not produce the correct result.
I tried the solutions from Binding jQuery event on a child window and How to run function of parent window when child window closes? to no avail. Any help would be fantastic.
So I ended up pinpointing the answer on my own. Instead of redirecting back to the same page which was getting messy, I am redirecting to a blank page from the twitter popup window with some classic ASP that checks a few session variables.
Main File
var someFunction = function(data){
//some functionality
}
Twitter Popup Redirect window in the asp checks
window.opener.someFunction();
window.close();
This did exactly what I needed to do by calling the JS on the parent window while closing the child. Maybe this will help someone else.

Refresh parent window after closing a popup window

I am opening a popup window from X.jsp and the popup is represented by Y.jsp. The second jsp has a button. What I would like to do is to refresh the parent page (the one that launches the popup) once this button is hit. The Save button below will call a method in the backing bean "copyScriptForVersion" and I close the popup on button click. How could I also refresh the parent window after closing the popup?
<h:commandButton type="submit" value="Save" action="#{copyScriptForVersion.SaveAction}" onclick="window.close()"/>
I tried adding window.opener.reload() like this onclick="window.close(); window.opener.reload();", but that didn't work.
I also tried adding the following
body onUnLoad="window.opener.location.reload(1);">
But, I got "window.opener.location is null or not an object" error.
First of all, you should do window.close() as a LAST action in the onClick handler. Otherwise, it's possible it will never get executed.
Second, if reload() doesn't work, try:
window.opener.location.href = window.opener.location.href; window.close();
Please note that this may cause problems if the parent page was produced as a result of POSTing a form.
Try this it may help other as well,,
`new = window.open(url);
new.focus();
check = setInterval(function() {
if (new.closed) {
window.location.reload(true)
}}, 1000);`

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