We Keep Coding

Page failing to redirect and clearing URL parameters

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.

jQuery Mobile Debug Page Redirection

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();
});

location.reload prevents form submit when POST to iframe (Firefox 37.0.2)

Firefox version is 37.0.2
I have an MVC application where I submit forms in order to carry out CRUD functions. I POST to a hidden iframe, then refresh the page after the POST so that the user can see the new data after the database has been updated. Here is the javascript function that takes care of adding a new user:
$('#submitNewUser').click(function () {
document.getElementById("newUser").submit();
$('#newUser').remove();
location.reload();
}
submitNewUser is the button for submitting the form (id and name). newUser is the name and id of the modal form that is submitted. So on click of the submitNewUser button, the newUser form is submitted, then the newUser modal window is removed, then the page is reloaded.
This function works as intended (or at least, as I intended it to) in Chrome and IE. In Firefox, the page reloads without submitting the form. There are no errors in the console, it just looks like a page refresh occurs. When I comment out the line: location.reload();, the form submits but I then have to manually refresh the page in order to see the data changes.
I've searched for similar issues but thus far have been unable to fix the problem. Things I've tried:
changing the name parameter of the iframe to NAME
removing any capital letters from the name and id parameters of the iframe
using window.location = window.location instead of location.reload()
I changed the input type from button to submit and modified the javascript function to be an onSubmit of the form, but the behavior is identical to my original reported issue
I removed the target parameter from the form, and then removed the location.reload() line from the javascript. The behavior is then identical across all browsers: the form gets submitted and the page is redirected to my "Success!" page. This tells me that there is something going on with the location.reload() and how it interacts with the iframe in Firefox. Here is my iframe code:
<iframe id="new_user_hidden_frame" name="new_user_hidden_frame" class="hide"></iframe>
And here is where I set the target for my POST method:
<form id="newUser" method="POST" action='<c:url value="/createUser.htm" />' target="new_user_hidden_frame">
EDIT:
As per the accepted answer, Firefox was actually the only browser that was technically handing this correctly! I was refreshing the page before receiving a response, so the behavior was 100% appropriate. I added the following to my function so the page won't refresh until a response has been received:
$.ajax({
success: function() {
window.location.reload(true);
}
});

As your code says you are trying to reload page before getting the response, so request is not completed till, for this you have to delay the reload or better way submit form using ajax and reload page in the callback function.

jQuery form submission without reload (worked at first, but stopped working)

I have got this problem, i had this code
$(document).ready(function() {
$('#poll_form').ajaxForm(function() {
$("#polling_id").load("poll-results.php");
});
});
It has worked perfectly fine, submitted the form, page did not reload and the results were loaded. But now something happened and i can't seem to figure it out. Can you please provide clear code of solution ?

Try this:
$("#poll_form").submit(function(e){
e.preventDefault();
});

jQuery: submit() not working on history:back

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?