I'm using jQuery's submit() method to do some basic form validation before the user is sent to the next page
$(document).ready(function(){
$("form").submit(function() {
// form validation, set errors_detected = true on errors
if(errors_detected)
{
alert("error");
return false;
}
});
});
The problem is that if the user has passed the validation and clicks the Back button in the browser, the jquery code stops working. I'm using Opera.
Because usually when the user hits the back button, the browser shows the cached copy of the page, and doesn't run the $(document).ready() stuff again, AFAIK.
Not sure of the best way around this. Maybe setting a no-cache header?
Related
I have a webpage that makes a POST request to a PHP script. Depending on the result of the request, the onclick event for a button sets a redirect to one of two pages.
<button id="button" type="submit">Proceed</button>
...
$.post('script.php', {
key: value
}, function(result) {
if (result != null) {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/page?otherkey=othervalue";
}
} else {
document.getElementById("button").onclick = function() {
window.top.location.href = "https://example.com/otherpage?otherkey=othervalue";
};
}
});
This works fine on desktop browsers, but on Safari on iOS (specifically tested on iOS 10.3.2) upon clicking the button, the page refreshes and doesn't redirect to the correct site. In addition, it clears any URL parameters that were previously there. So for example if the page with the button is example.com/page?key=value, the page will refresh and become example.com/page?#_=_. I've tried debugging and checking a Javascript console, but it doesn't say anything.
The redirect is a page in my own domain, though the page with the button is integrated into a Facebook app page, if that's relevant.
Also, if I construct the URL on my own and try to go to it normally, it loads fine. I don't know what could cause this, so I'm not sure if there's any other relevant information worth posting, but I can say more if necessary.
Safari does not deal well with return false being done in the function, and especially with no return at all. I would include a onsubmit="return function();" in the html element, which I'm guessing is a form. You also attach this to the submit() event listener via $('[the form ID]').submit(function(){ do something here; return false;});
I was right that I suppose I didn't supply enough detail, but it seems that because the button in question was inside a <form> tag and acting as a submit button, that was messing it up. To solve the issue, I removed the form (since I was not submitting any data anywhere, just using the button to redirect the page) and it solved the issue. Now it works on desktop and mobile browsers.
I have the following beforeunload function which I have stolen from sonewhere else....
$().ready(function() {
$("#posManagerLoginForm").trigger("submit");
$(window).bind("beforeunload", function(){
window.setTimeout(function () {
window.location = "home.htm";
}, 0);
window.onbeforeunload = null; // necessary to prevent infinite loop that kills your browser
return "Press 'Stay On Page' to go to Reporting Manager home";
});
});
Regardless of what option I select I get navigated to home.htm. Is there a way that I can make the dialog box an ok button instead of the default "Leave Page" or "Stay on page" options?
Or perhaps someone else could make a suggestion on hot to better handle?
thanks
You cannot override the styling of the onbeforeunload dialog. Believe me, I tried this before in my earlier projects.
Reference: http://msdn.microsoft.com/en-us/library/ms536907%28VS.85%29.aspx
It is built into the browser object, and you have no control over it.
You can however set your own dialog to show when the onbeforeunload event triggers, but it will not disable that the regular one will show. Quite annoying, yes.
The reason you're still getting redirected is because you're actually doing nothing to prevent it.
If you want to open an alert box before the form gets submitted, make sure the default behaviour is prevented (which is to submit the form), then redirect after OK has been clicked like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
alert("Press 'OK' to go to Reporting Manager home");
window.location = "home.htm";
});
});
Though not sure what the use of this would be. If you wanted to stay on the form if a different button is pressed (say 'Cancel' for example), then you'd rather want to use a 'confirm' like this:
$().ready(function() {
$("#posManagerLoginForm").submit(function( event ) {
event.preventDefault();
if confirm(("Press 'OK' to go to Reporting Manager home"))
window.location = "home.htm";
});
});
You could replace the alert or confirm with a custom dialog box too, depending on what library you're using. Just make sure you put window.location = "home.htm" inside the dialog's function, otherwise it will execute immediately.
As an example, you may want to have a look into jQuery UI's dialog here: https://jqueryui.com/dialog/
I'm progmatically changing the page in my jQuery mobile application, on a click of button. This is the code I'm using:
$("#paymentConfrim").click(function() {
$( ".paymentDetailForm" ).submit(function( event ) {
if(!validatePaymentDetailForm()){ // if false comes from validation
return false;
}
else{
// I'm using changePage instead of jQuery pagecontainer widget as I'm using older version of jQuery mobile
$.mobile.changePage( "#submissionConfirmation", {} );
return true;
}
});
The page is getting changed successfully, but after a second or fraction of a second, the application is returned to homepage. As the application is big, with lot of legacy code, I'm unable to determine what code is causing that page change. As it happens after few milliseconds, I suspect there is some setTimeOut function that is causing that.
Strangely though the page is changed to homepage, the URL remains the same as of #submissionConfirmation page i.e. localhost/mypage.html#submissionConfirmation
How can I debug and know exactly what JavaScript code is causing that redirection?
The reload is caused by the form being submitted. You need to prevent the default form submission behaviour by calling event.preventDefault() as the first thing in your handler.
$(".paymentDetailForm").submit(function(event) {
event.preventDefault();
});
I am currently viewing all the possibilities for preventing multiple submission with button tag. The problem I am facing is that if users click submit button really fast it will enable them to submit multiple posts. I would like to restrict the submission to just one submission. I tried to use onclick="this.disabled = true, but it makes the button not working at all. The current button tag looks like this:
return "<button class='button btn btn-primary' id='gform_submit_button' onclick='this.disabled = true' type='submit'><span>Submit!/span></button>";
Can anyone guide me as to how to achieve this?
Ultimately, you cannot prevent multiple submissions on the client-side. You would have to implement these security measures on the server-side, in whatever server-side language you are using (e.g., PHP).
On the client side, you could do something like this
var canSubmit = true;
$('.button').click(function(){
if(canSubmit)
{
// fire missiles
canSubmit = false;
}
else
{
// sorry missiles loading
}
});
Now since after clicking once canSubmit has been set to false, a second click would not run the code. After validating or processing your submitted data you can set canSubmit back to true.
When the button is onClicked call this function:
function submitFunc(formId){. document.getElementById(formId).submit();
}
Submitting a page is always going to be tricky. There are two challenges with submit
As you rightly mentioned that user can submit same page multiple times
After submitting page if user refresh the page then also page is going to be resubmitted
There is one trick to handle this challenge redirect the page with GET call. The GET call which you have used to load the data. Read more about it here.
So I would recommend to redirect page to GET once form is submitted.
In this process the new form will be loaded and if user try to submit the form validations will be fired that will handle 1st challenge.
And due to redirect as your last call is GET on refresh data will be loaded and there is no harm in it.
I have a page where user needs to enter some data and click save to validate the changes, but my problem is if the user is trying to close the browser window or click on a different link to navigate to a different page..I need to delete all the entries the user has saved so far..
I am doing it the following way
window.onbeforeunload = function()
{
if(confirm('Are you sure you want to navigate'))
{
//Invoke `enter code here`server side method
}
else
{
// return false;
}
}
Everything works fine if he click on Yes, the problem comes when he click on "No"..Even if he click on No..the page unload method is getting called and it is redirected to a different page..but I want it to stay in the same page in same state...can you please help me in achieving this.
Thanks and appreciate your response....
You cannot stop the user from leaving the page. What you can do is alert a message to them, asking if they want to leave or not.
The window.onbeforeunload event should return a string (and only a string). This string will be printed on the alert box made by the browser.
You cannot use your own alert box, or block the user from leaving (or redirect them).
window.onbeforeunload = function(){
return 'Are you sure you want to leave?';
};
Or with jQuery
$(window).on('beforeunload', function(){
return 'Are you sure you want to leave?';
});
When a user leaves the page, you can use the onunload event to make an AJAX call (you may need to use async: false here).
Example:
$(window).unload(function(){
$.ajax({
url: '/path/to/page/',
async: false, // this may be needed to make sure the browser doesn't
// unload before this is done
success: function(){
// Do something
}
});
});
NOTE: Instead of doing this, why don't you just save everything when the user is completed? Instead of saving it and then removing it if the user doesn't finish?
First of all: you can't! It's impossible. onbeforeunload only accepts a string as return value and will then close if the user wants that.
But then think about what happens if the computer is being without energy and shuts down? Or the browser will closed by the Task Manager? Or even more "realistic": The internet connection get lost! => Then you got invalid data states too!
You are trying to solve a false problem! Your problem isn't this function, your problem is the state of your formular!
Why do you need some kind of function? Do you saving the data before he clicks on save? Then don't! Or make sure to have another query which detects unfinished data in your database and delete it after a timeout!
onbeforeunload only accepts a string as return value. That string will be displayed by the browser with the option to stay on the page or leave it. But that's ll you can do.
You can use something like this, just call the following function on your page
function noBack() {
window.onbeforeunload = function(){window.history.forward()}
}
this disables Back button if window.history is clean, otherwise it works only first time.