CODEWITHSUNDEEP
javascriptjqueryasp.net-mvc
Sang Suantak
Sang Suantak

Reputation: 5265

Javascript redirection issue with Google Chrome

My issue is somewhat similar to this SO question. However, since my implementation is a bit different, i've created a new question.

I have a page where back button is to be disabled (got the script after a lot of googling). What this page does is that it redirects to a different location (ASP.NET MVC controller action). Since the action takes time to complete, a wait message is displayed. Below is the script i've used to disable the back button and to redirect the page.

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //redirect to the new page/controller action
        window.location.href = document.forms[0].action;
    });
</script>

My above code works in IE and Firefox but not in Chrome. Screen flickers a lot in Opera but redirection still works. In Chrome, the action in my controller does get called and the processing happens but the page isn't redirected after the processing is done. Most of you guys might feel the need to change the flow/implementation, but i don't have a say in the matter so got to stick with this flow.

Platform: ASP.NET MVC 2.0
jQuery Version: 1.4.1
Chrome Version: 16.0.912.63m

UPDATE:

Below are the screen shots taken from fiddler and chrome network tab.

Fiddler:
Fiddler Screenshot http://img43.imageshack.us/img43/638/200response.png

Chrome:
Chrome Screenshot http://img594.imageshack.us/img594/6381/chromenetwork.png

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Dummy Title</title>
</head>
<body>
    <form id="form1" method="post" action="Home/BookingConfirmation">    
        <div id="domWaitMessage">
            <img src="Content/images/preloader.gif" alt="Please Wait...." />
        </div>    
    </form>
</body>
</html>

UPDATE WORKING SCRIPT

<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();        
        //show the wait message
        $("#domWaitMessage").show();
        //ORIGINAL REDIRECTION CODE
        //window.location.href = document.forms[0].action;
        //NEW WORKING REDIRECTION CODE
        setTimeout(function () { window.location.href = document.forms[0].action; }, 100);
    });
</script>

Upvotes: 2

Views: 5083

Answers (3)

Thomas Guillory
Thomas Guillory

Reputation: 5729

In fact, this is what happens :

  1. The function changeHashOnLoad() set a timeout in order to store a second hash in the history (the '#1'). But the function is not executed now (it will be in 50ms)

  2. The main code continues to run to the line doing the redirection to document.forms[0].action

  3. Now only : the timeouted function changeHashAgain () is executed. The page is redirected to '#1' and the redirection to document.forms[0].action is canceled

A simple and quick workaround : delay the main redirection.

setTimeout(function () { window.location.href = document.forms[0].action; },100);

So you can say "Why Chrome ?" ? Chrome and his javascript engine V8 is just much faster than other browsers. In 50ms, chrome has still begun the redirection, while FF and IE not !

Upvotes: 5

Hampus Brynolf
Hampus Brynolf

Reputation: 1336

This works for me in chrome. As you didn't provide the full code, it is hard to tell where the error is, but it doesn't seem to be in the code above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="class.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
    function changeHashOnLoad() {
        window.location.href += "#";
        setTimeout(changeHashAgain, 50);
    }

    function changeHashAgain() {
        window.location.href += "1";
    }

    var storedHash = window.location.hash;
    window.setInterval(function () {
        if (window.location.hash != storedHash) {
            window.location.hash = storedHash;
        }
    }, 50);

    //do after all images have finished loading
    $(window).load(function () {    
        changeHashOnLoad();

        //show the wait message
        $("#domWaitMessage").show();
        //redirect to the new page/controller action
        window.location.href = document.forms[0].action;
    });
</script>
    </head>
    <body>
    <form method="post" action="gotothispage.page">
    <div style="display: none" id="domWaitMessage">HELLO</div>
    </form>
    </body>
</html>

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1038830

Instead of using getAttribute("action") try like this:

window.location.href = document.forms[0].action;

Upvotes: 0

Related Questions