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.
Related
I have a form with "target" set to "_blank" in order to open a new tab when the form is submitted. The action of this form is an aspx page that does server-side processing and returns an html. I am trying to figure out whether it's possible to close the new browser tab right away without waiting for the returned html.
Thanks for any idea.
There's a window.close() property that comes with the browser API. Not sure how you're setting up your server-side processing, but you can listen for an event on that browser tab and fire off the window.close() when the HTML is returned from your server.
Combining this with the onLoad event, you should be able to pull this off:
window.addEventListener('load', e => {
window.close();
});
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.
I have the following g:submitButton:
<g:submitButton name="next" class="signup-button skyblue-btn pull-right pl-pr-36" value="${message(code:"buttons.ok")}" onclick="return showSpinnerSignUp()"/>
I define the showSpinnerSignUp() in the JS file:
$(function() {
function showSpinnerSignUp(){
$('.spinner-ctn').show();
return true;
}
});
The spinner is not displayed (the onclick doesn't work).
This is the default behaviour of a form submission in the browser. You have registered a showSpinnerSignUp() method on the click of a button while the click on that same button is responsible for submitting the enclosing form.
Since the browser's built-in behavior for submitting forms works by making a full roundtrip to the server, that immediately interrupts your code execution of onclick event because your browser is navigating away from your current page.
This can be simulated as if you had clicked your button and refreshed the page immediately. Your current setup might work when you deploy this to the production server, but the possibility of working this setup locally is low because a local development server used to run on a faster machine so the page refresh time of form submission is quite faster.
To verify this happening, open your browser's console and call the method showSpinnerSignUp() directly (remember to remove it from $(function() {}) temporarily) and see if the spinner is showing up.
Also, there is an option to Preserve Logs which keeps the Javascript console logs even after page refresh. So, put a simple console.log() inside your method call and then try hitting that button. You'll see your method is called but no spinner is displayed due to form submission.
I am developing a web application. And I wrote some JS script to be executed on document ready. But in chrome when we click on back button and go back to previous page it is executing all the js script again. But when I use same on firefox it do not execute the JS.
I have an accordion on a page and when user open any accordion and go on one of the link under the accordion and after that if again clicks the back button on the accordion page chrome is closing all the accordions as I have written the script to close all these on document ready. But firefox do not close.
Is there any way to fix this with javascript? So that I can put any condition like if(history.forward.length < 1){ do this....}
You can use the pageshow event to guarantee you always detect navigation to a particular page, regardless of whether the user presses the back/forward button or selects a link, and regardless of which browser is being used.
Then you can perform checks regarding the state of UI and perform logic as required (i.e. modify UI, prevent execution of additional JS).
window.addEventListener('pageshow', function(event) {
// check state of UI, etc.
});
The solution that came to my mind is using sessionStorage to know if it is a first time loading or not. Or even better, you can keep state of your accordions in session storage so it always be the way the user want.
In my case, the iframe was a hidden iframe (width and height zero).
This iframe is just an workaround from legacy system, developed 12 years ago. But still using nowadays on current application.
To solve it, i just redirected the page loaded into iframe to the blank page.
Example:
page_loaded_into_iframe.php
<?php
//do the php stuffs
?>
<script>
alert("hello world");
location.href = "about:blank"; // here, where the the magic happens!
</script>
Once pressed the "back button", the browser will reload a blank page.
Be aware that this might be not applicable if your case is not similar to mine.
In the Chrome Extension you can use the function:
chrome.webNavigation.onCommitted.addListener(function callback)
and in the callback function you may take a look to the arguments:
transitionType + transitionQualifiers
to look for:
"forward_back" The user used the Forward or Back button to initiate the navigation.
For deatils see chrome.webNavigation
Of course, this event can be communicated to the content script with the usual message model (refer to: Message Passing
So I'm writing a watir-webdriver script, and my app is using javascript to present a modal window that I want to interact with. When I click the element that presents the modal window, watir-webdriver just sits there until eventually it times out and i see a Timeout::Error on the console window. This is before attempting to interact with the new window at all. I'm assuming it's polling the DOM for some change and not getting it, how do I tell it to move on without waiting?
The answer ended up being, and then handling the necessary waiting manually
element.focus
element.send_keys :return
Ruby 1.9.3/ IE 9 - I had a click_no_wait error. Watir would not trigger a click on the Save button, which had to be followed by a click on a java popup 'OK' button that confirmed that the save button had saved the document correctly.
Using these two lines in place of the click_no_wait command gets the code working perfectly:
element.focus
element.send_keys :return
Thanks DVG. My code -
ie.button(:id, 'MainContent_B_Save').focus
ie.button(:id, 'MainContent_B_Save').send_keys :return
ie. javascript_dialog.button('OK').click
If this is a Alert, Confirm, or Alert type JS popup, see this answer: https://stackoverflow.com/a/8172888/409820