Question

I have a login form from which the user enters user name and password. When they click on an image button to submit I do an ajax call to validate the user. The response returns a destination url. Now when I try to do a “window.location.href = url” the process doesnt work in FireFox 7(FF) but It does work on other browsers IE, Chrome… etc

Here is my jquery ajax call.

var loginSubmit = function () {

    if ($('#loginForm').data('isSubmitting')) return false;

        showProgress('Logging in..');
        $('#loginErrors').empty();
        $('#login-form').fadeTo(100, 0.4);
        $.ajax({
           cache: false,
           url: '/dispatcher/user/login',
           data: {
               'user': $('#userName').val(),
               'pwd': $('#password').val(),
               'continuePath': $('#continuePath').length > 0 ? $('#continuePath').val() : '/my-account'
           },
           type: 'POST',
           success: function (data) {  
            $('#loginForm').data('isSubmitting', true);

            console.log("Data from Controller: " + data.dest);

            if (data.dest) {
                var href = data.dest;
                window.location.href = href;
                return false;
            } else {
                console.log("DATA DEST FALSE");
                $('#loginForm').data('isSubmitting', false);
                $('#login-form').fadeTo(100, 1);
                showError('Invalid username/password');
            }
           }
        });
       return false;
    };
    $('#loginForm').submit(loginSubmit);

Here is my form.

    <form id="loginForm" action="#">
        <c:if test="${sessionScope['continuePath'] != null}">
            <input type="hidden" name="continuePath" value="${sessionScope['continuePath']}"/>
        </c:if>
        <div id="progressMessage" style="color: #333; font-weight: bold;"></div>
        <div id="loginErrors" style="color: red; font-weight: bold"></div>
        <div id="login-form">
            <dl>
                <dt><label for="userName">Email Address:</label></dt>
                <dd><input name="user" id="userName" type="text" size="30" maxlength="80"/></dd>
                <dt><label for="password">Password:</label></dt>
                <dd><input name="pwd" id="password" type="password" /></dd>
            </dl>
            <div class="login_button">
                <input type="image" src="/assets/images/user/btn-log-in.gif" alt="Login"/>
                <br/><br/>
                <a href="javascript:openPopup('forgotPassword');" class="default">Forgot your password?</a>
                <!--
                <a href="#" rel="#forgotPasswordDialog" class="default">Forgot your password?</a>
                -->
            </div>
        </div>
    </form>

Why is this behavior different in FireFox 7? Can someone suggest a work around that will work in all browsers? Can you sense my frustration?

Answer 1

What about:

window.location = url; //no .href

Edit based on comment.

Since your url is relative to your site root, the “most correct” part of the window.location object to use would be pathname, as that describes the path relative to the host.

window.location.pathname = "/my/relative/path/page.html";

However, any change to the window.location object should trigger the window.location.assign() method and load a new page. If that event is not triggering when you modify the object properties, you can always try calling it directly.

window.location.assign(href);

Finally, I was checking via the console and unable to reproduce this behavior with FF7. window.location worked with relative paths and full urls.

further reference: https://developer.mozilla.org/en/window.location