Page redirect in jQuery fails randomly. Race condition?

Question

Elaborating on an example from the very good post by Felix Kling I wrote some jQuery code to authenticate a user. If the authentication is successful the window.location object should be assigned/replaced to a new URL.

The redirection occasionally fails, even though the user is authenticated correctly: based on the values of sessionStorage('Auth') the looks of the menus for an authenticated user are modified by some other JS code, so I know when the credentials were entered correctly.

Here is my code.

$(document).ready(function() {
 $('#submit').click(function() {
  var webServiceHref = window.location.href;
  var webServicePath = webServiceHref.slice(0,webServiceHref.lastIndexOf("/"));
  var serviceUrl = webServicePath + "/login.php";
  $.post(serviceUrl, 
  {
   Email: $("#Email").val(),
   Password: $("#Password").val()
  }).done(function(data, status) {
     var json = JSON.parse(data);
     if (json.valid == true){
      sessionStorage.setItem('Auth', true);  
      sessionStorage.setItem('FirstName', json.FirstName);   
      sessionStorage.setItem('Email', json.Email); 
      $("#messageLine").val("Authentication succeded");       
      $(location).attr('href', webServicePath + "/welcome.html"); 
//       window.location.href = webServicePath + "/welcome.html";  
     } else {
      sessionStorage.clear();
      $("#messageLine").val("Incorrect Username or Password");
     }
  });
 }); // click
});  // ready

This behavior does not depend from the way the redirection is called:

I left in my code, commented out, some of the JS and jQuery combinations of methods (window.location.assign, window.location.replace etc.) suggested in numerous posts on SO.
I have even tried .reload() without success.

In Chrome inspector I can even see the callback statements being executed, the assignment of the new URL being made, but when the function returns the window object sometimes does not change, and sometimes ... it does.

Perhaps the assignment of the URL is queued after other event which causes the original login.html page to be reloaded?

What am I missing? Am I using the deferred object incorrectly?

Thank you in advance for your help.

score 1 · Accepted Answer · edited May 23 '17 at 12:23

If your "#submit" element is actually submitting a form (e.g. it is an input of type "submit" within a form), that could cancel the page redirection. E.g. when no action is specified on the form, it just reloads the same page, preventing your modification of window.location.href from having any effect.

See also that post: javascript redirect not working anyway

You have 3 easy possible solutions:

Turn your element/button into a normal one (not a submit).
Prevent the element/button from submitting the form (function (event) { event.preventDefault(); /* rest of your code */}).
Attach your main callback on the form submit event. The user is then able to trigger the action by hitting "Enter", not just by clicking on the submit button.

You are absolutely right @ghybs! I had not paid enough attention to the html form (the source code was not included in my post). I had left `` which causes the click event to be occasionally responded by the form, instead by the jQuery function. Once I changed my html code to `` everything started to work as expected. Thank you! — rgulia, Nov 05 '15 at 16:09

Page redirect in jQuery fails randomly. Race condition?

1 Answers1