I have a form that the user fills out and gets submitted through jquery using $("form").submit();
while the form is submitted I use a modal window from the twitter bootstrap library to disable the entire screen and tell the user that the form is being submitted.
My problem is that when the form submit is complete, a pdf file is downloaded to the client's machine as a response is some cases,
If this is the case, the user approves the download and the form is stuck with the modal window covering the entire page and I look like an idiot, because the user can't go on using the web page.
I've tried using a $("form").submit() ".success()" function, but when I use that, the jquery fails and the page ceases to function.
The only thing that I can think of that's useful is the fact that the progress bar at the bottom of the browser in IE runs and only closes when the pdf file download request pops up.
Is there anyway I can intercept the progress of the form submission, and close the modal window at the moment when the form is done submitting?
Please help
I had the same issue a few weeks back and this solution helped. Basically you have to redirect your user to a page which will also handle the downloading of the PDF.
Related
my android app automatically load a specific form from a web page and at the moment the submit button open a confirm popup. I want to automatically "click ok" in the popup to continue to the next page from the form without the human interaction necessity.
I wanted to try using javascript to force the confirm() function to return true, but the function is hidden in the submitForm() function code.
Silly solution, trigger a click at a specified coordinate:
See https://stackoverflow.com/a/3277417/14406944 for reference.
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've a problem.
I'm building a website with multiple pages.
In a page there is a form (with some AngularJS in it) when the user clicks the submit button, a second page appears where it confirms the form submission.
If there was any error, it will show a message with the error message with a button that goes back (javascript:history.go(-1)).
When the user clicks this back button, the form page is presented again but with all fields blanked (the page seems completely reloaded...). Anyway with other forms without AngularJS this mechanisms work fine...
What's wrong?
Thanks! :-)
PS: Anyway, the form page has checks that disable the submit button if there is any error, though I don't understand why the page reloads when the user returns to it via the back button while with other forms it doesn't happen...
If both the pages belong to same app (under the same app.js) then you can store the values of form in $rootScope variable instead of $scope.
Also to navigate, you can use $location.Path
In Safari Browser, on a page with a form, there is a system modal popup that opens when the user tries to close the browser's tab and the form hasn't been validated. Text says: You have entered text on “[name of the page]”. If you close the window, your changes will be lost. Do you want to close the window anyway?
This behavior is ok when the post redirects to another the page. On our site, we have a page that validates a form using an Ajax Request. As the page is not reloaded, even if the form has been submitted, the popup appears, and it might feel strange for the end user.
The post is triggered by a button:
Forms are validated using the jQuery Validation plugin
Plugin options include a submitHandler option that return false;
Date are sent via $.post, and a message informs user for success/failure.
Does anyone have an idea about how to avoid this popup to be triggered once the call returns? We'd wish not to force a reload in that case.
Note that this behavior can be changed by the user, but not very easily...
I can't replicate this in Safari on Windows.
Maybe try emptying/resetting the input fields once the form has been submitted, only if there weren't any errors with the submission of course, or better yet, remove the form completely, if it's not needed after. Of course using DOM manipulation, not by reloading the page.
On a side note, seeing the filled-out form after it's been sent (even if you're showing a confirmation message) also can be strange for the user (unless it's a multiple-use form and this behaviour is expected).
UPDATE: tested on a Mac Safari, it's behaving as you described, but if I remove what I typed (that made the browser alert me in the first place), it doesn't come up. So, simple reset of the fields should do the trick.
I am using Asp.net Javascript and C#
I have a content page, and left side has links in the master page.The content page has data entry form. If user leaves the page without submitting the form and click the cancel button. user should be prompt to save the changes made. I know i can use window.onbeforeleave and can show the confirm message.
Below is the issue.
The control moves to executing the code behind page of the clicked link.Reason is on clicking the link, a javascript function is being called. this function has below code.
window.location.href = 'anotherpage.aspx'
The confirm message appears later.
My query is, Is there any way to show the confirm message first.
I cannot write the confirmation message code in java script function as there are so many other links in left menu and same situation can arrise to prompt the user for confirmation message and logic is different in all pages to check the unsaved forms.
Suggestions?
I suggest you use jQuery for a 'dirty check' . And there are 2 ways to implement it.
Based on jQuery data feature : http://www.mydogboris.com/2009/10/using-jquery-data-feature-to-detect-form-changes/
a jQuery plugin for dirty check : http://www.novogeek.com/post/2010/01/31/Check-for-unsaved-data-on-your-web-forms-using-jQuery.aspx