How to close modal dialog when file download completed - javascript

I have a modal dialog which contain form and hidden iframe to which form is submitted. The result of submission is file to download.
I need to close modal dialog as soon as download dialog is opened i.e. file is ready.
I was trying to catch 'onreadystatechange' event of iframe, but after submit call changing state to 'complete' it does not trigger 'onreadystatechange' event.
Eventually, i use window.setInterval which monitoring readyState of iframe and close modal dialog when its state == 'complete'.
the solution that using window.setInterval seems not professional to me and I am looking for better solution, I saw solution with cookies but I can't use cookies in my application.
Any help will be appreciated!

There is nothing wrong or unprofessional in using window.setInterval().

function Close_Popup() {
$(".modal-backdrop").remove();
$('#div_Popup1').modal('hide');
$(".modal-backdrop fade in").remove();
}
Call this function on OnClientClick="Close_div_Popup1_Popup();"

Related

How can I know the user closes tab or browser in html?

I´m working on a webapp MVC and want to know when the user closes the browser tab, in order to destroy his session. I´m working with jsp (html, js) and java for the internal code. Some ideas?
You can use window.onunload function from javascript
window.unload = function () {
//doSomething
}
or add an eventlistener to the unload event of the window in following way:
window.addEventListener('unload', function() {
// doSomething
})";
Have a look at the full docs on more details onunload and unload event.
You can use this link and put your ajax session destroy there -> Run JavaScript code on window close or page refresh
after the Ajax call, you can easily get the session and invalidate/remove it!

How to trigger refresh on a page from another page (no redirect)?

So, what I have is a lot of pages like this, with GET parameters: benchmark.php?game_id=87
that display the information about the particular game (info is in a database) and also contains an Edit button.
The Edit button opens a new window using JS window.open("edit_game.php?game_id=87",...)
The Edit window contains a few textboxes to add/modify data and a Save button.
The desired behaviour here is that when I press the Save button on the edit_game.php page, not only that the information is saved in the DB (this works) but also the benchmark.php?game_id=87 page is maybe refreshed so that the information displayed is actual. I don't know how to do the 'submit on page x, page y is aware and refreshes'.
I assume I should use AJAX for this but I don't know where to start. What I tried is something like this
setInterval( function(){
$('#refresh_station').load('game_information.php');
}, 2000);
that every 2 seconds it refreshes the information present in benchmark.php?game_id=87 but I find this very inefficient since it refreshes the info even if no modifications happened.
Is this the only way to approach this situation?
Edit: I should mention that edit_game.php?game_id=87 is not supposed to close or anything after pressing Save. So I can't just use the submit form to redirect back to benchmark.php.
Yes you should use Ajax for it also add one field in Database table last_update, now when page edit_game.php?game_id=87 load it have last_update time, ajax check this last update on some interval time if ajax see there is any update page should be refreshed.
Running a loop that checks every few seconds whether the records have changed isn't the best solution in my opinion. There's a much easier way to trigger a page refresh when you submit a form in a popup window.
Using window.opener you can perform actions on the window that opened the popup that you're currently in. In your case:
<form onsubmit="window.opener.location.reload();">
Your form here.
<input type="submit" value="Save changes">
</form>
Or in jQuery:
$('form').submit(function() {
window.opener.location.reload();
});
https://jsfiddle.net/yqv1eh8w/1/
postMessage
can communicate with the child window. Link
window.addEventListener("message", function (event) {});
will let you listen to it from a child window.
This should be help you with what you want.
The entire thing communicates with the help of events and messages.
Also, you will need to run this locally (coz I opened popups to the same window)
IMO, the best approach is to use a popup form. If your web page is already using Bootstrap, you can add a modal popup easily with the edit form as it's content. When clicking on the edit button, instead of opening a new window, you can open this popup.
Then submit this form with ajax on click of the submit button and inside the Ajax success function, add javascript/jQuery to close the modal and refresh the page content.

Hook before refreshing a page

I have a page where a user can upload a bunch of files as part of a form. The files are uploaded to the cloud with each addition. If they cancel the form, the files are deleted from the cloud. If they refresh the page or close the browser before completing, I would also like to delete those files from the cloud. Is it possible to hook into these events?
The same way ytou have onload when the page load, you have unload when you, well, unload.
Confirmation before closing of tab/browser
How to show the "Are you sure you want to navigate away from this page?" when changes committed?
If you want to add an message before that, onbeforeunload seems to do the trick:
Implementing "this page is asking you to confirm that you want to leave"
<html>
<body onunload="javascript:alert('Beep!');" onbeforeonload="javascript:return confirm('I beep first. Continue?');">
Close me for an alert
</body>
</html>
*Disclaimer: This is a terrible example, do not inline javascript.
You are looking for window.onunload = myFunciton: http://www.w3schools.com/jsref/event_onunload.asp
Execute a JavaScript when a user unloads the document:
<body onunload="myFunction()">
You want something like this:
window.onbeforeunload = handler;
In the handler itself you also can return some string that is shown in the resulting alert box (which is always displayed by the browser, you cannot control that). However the return value does not work in Firefox which will ignore your message. Also note that you only can have one beforeunload handler.

Bootstrap Modal Window And Include Javascript Files More Then Once Failed

I'm using Twitter Bootstrap in my site. I want to show modal loaded content to user.
Modal window's content loading with ajax request.
I'm including javascript file with src attribute. When first load of modal dialog, everything seems ok but when second load of modal dialog, content is loading but javascript file isn't loading.
When modal window hidden i'm clearing all of it's content.
What my i do for load javascript file more than once and fire it's functions?
Deleted because it doesn't apply:
This is just a callback provided by bootstrap. There are 5 different callbacks:
show.bs.modal: This event fires immediately when the show instance method is called.
shown.bs.modal: This event is fired when the modal has been made visible to the user.
hide.bs.modal: This event is fired immediately when the hide instance method has been called.
hidden.bs.modal: This event is fired when the modal has finished being hidden from the user.
loaded.bs.modal: This event is fired when the modal has loaded content using the remote option.
$('#myModal').on('shown.bs.modal', function (e) {
yourFunction();
})
For more information on modal just go here: http://getbootstrap.com/javascript/#modals

Firefox not executing statements after submit

I have JSP where i submit a form using javascript. Its a popup window so after submission popup must be closed. I used following code:
document.forms["formname"].submit();
window.close();
Problem is - Form gets submitted successfully but window doesnt get closed.
Its work fine in IE.
I have a doubt how it is working in IE.
Javascript doesn't have any control after/until you submit the form and control is returned back to the browser. You should use some another mechanism to close the window after submission of form.
Instead of closing the window from a script running in the context of the window to be closed, try closing it from the context of the window that opened it. For example:
var popup;
function pop() {
popup = window.open('foo', 'mypopup', 'menubar=no,location=no,resizable=no,scrollbars=no,status=no');
console.log(popup);
}
function unpop() {
popup.close(); // close the popup
}
This works for me in Firefox. You can test it live here.
As you've discovered, once you submit the form, you've turned over control to the browser and there is no guarantee that any more javascript in that page will execute. It may just immediately start loading the result page. As such, you have several options:
You can make the result page close itself. So, when the result page loads after the submit, it contains its own window.close().
You can use ajax instead of a form submit to send the data to your server. Then, the lines after the ajax code sends the data will execute. To be safe, you may want to wait until the ajax call returns successfully before closing the window (depending upon what you're doing and how important it is to know whether it succeeded or not).
You can control things from the parent window that opened the form and close things from there.

Categories