Strange cflocation behavior: redirecting to page but not updating url

StackOverflow https://stackoverflow.com/questions/21110122

Question

I have a basic mobile login page in ColdFusion that allows the user to enter a username and password and log in. On successful login, the page redirects to the home page using a cflocation. However, while the page redirects successfully to the home page, it still displays the login page URL in the location bar. We have used cflocation many times throughout our web application and I have never come across this behavior before and can't figure out what could be causing it.

The gist of the page code:

<cfparam name="invalidLogin" default="false">
<cfif cgi.REQUEST_METHOD EQ "POST" AND isDefined("form.email") AND isDefined("form.password") and len(trim(form.email)) and len(trim(form.password))>
    <!--- call the login method --->
    <cfinvoke component="login" method="userlogin" returnvariable="userData">
        <cfinvokeargument name="userName" value="#form.email#">
        <cfinvokeargument name="password" value="#form.password#">
    </cfinvoke>

    <cfif userData.isLoggedIn>
        <cflocation url="index.cfm" addtoken="no">
    </cfif>
    <cfset invalidLogin = true />
</cfif>

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Log In</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/jquery.mobile.structure-1.3.2.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
        <link href="css/common.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.3.2.js"></script>
        <script type="text/javascript" src="js/common.js"></script>
    </head>
    <body>
        <div data-role="page" class="bg-color">
            <div class="container">
                <div data-role="content">
                    <div class="article">
                        <div class="logoDiv">
                            <img src="img/companyLogo.png" />
                        </div>
                    </div>

                    <form action="" method="post" name="frmLogin" id="frmLogin" class="margin-top" data-transition="slide">
                        <div>
                            <input type="text" name="email" id="email" placeholder="Username">
                            <input type="password" name="password" id="password" placeholder="Password">
                        </div>
                        <cfif invalidLogin><div>Invalid Login</div></cfif>
                        <div>
                            <input type="submit" value="Log In" data-theme="b" />   
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>
Was it helpful?

Solution

To prevent jQuery Mobile from handling forms with redirect via Ajax, you need to turn Ajax Navigation off and handle the request through HTTP.

To do so, add data-ajax="false" attribute to form tag. This will stop Ajax Navigation on the form only.

Note that you will lose transition when moving for current form page to new page as Ajax is turned off, so data-transition="slide" will have no effect.

<form action="" data-ajax="false" method="post" name="frmLogin" id="frmLogin">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top