Response title
This is preview!
jquery mobile dialog appearing in history/back button
in jQuery Mobile
•
8 years ago
I have a site with a user login form shown in a data-rel='dialog' link. Problem is that the dialog is appearing in the history when you hit the browser back button. Screen grabs here - a) shows initial not logged in state, b) open dialog after clicking on 'login' button, c) successful login, d) I've hit the back button and get my dialog and e) I've closed the dialog with the default 'x' button, am brought back to my home page, but in a logged out state.
In the code below, the login button/link (to '/php/mobile_login.php' ) is replaced by one's name is login cookies are detected server side.
The dialog has a form (which is the primary interaction on it) and a link - submitting the form, I see this issue, but clicking the link, it works as expected. I tried submitting via javascript as suggested here but still seeing same issue.
TIA, Kevin
Main page:
Dialog:
The dialog has a form (which is the primary interaction on it) and a link - submitting the form, I see this issue, but clicking the link, it works as expected. I tried submitting via javascript as suggested here but still seeing same issue.
TIA, Kevin
Main page:
- <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
</head>
<body>
<div data-role='page' data-dom-cache='false' id='homepage'>
<div class='header'>
<div class='logo'></div>
<div class='login'><a href='/php/mobile_login.php' data-overlay-theme='b' data-transition='none' data-rel='dialog' data-role='button' data-inline='true' data-icon='arrow-r' data-iconpos='right' data-theme='a' data-mini='false'>Login</a></div>
</div>
<div class='mobile_content'>
content
</div>
</div>
</body>
</html>
Dialog:
- <!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>title</title>
<link rel='stylesheet' href='/design/mobile_style.css'>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css' />
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script src='/js/jquery_mobile_global_defaults.js'></script>
<script src='http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js'></script>
</head>
<body>
<div data-role='dialog' id='member_login_div' data-overlay-theme='b'>
<div data-role='header' data-theme='d'>
<h1>Login</h1>
</div>
<div data-role='content' data-theme='c'>
Login below to apply for jobs with your stored CV (use the desktop version of the site to upload your CV if you have not already done so).
<form data-ajax='false' method='POST' action='/php/mobile_do_login.php'>
<label for='cjloginemail' class='ui-hidden-accessible'>Email Address</label>
<input type='text' name='user_email' id='cjloginemail' value='kevin@solomon.ie' placeholder='Email Address'>
<label for='cjloginpass' class='ui-hidden-accessible'>Password</label>
<input type='password' name='password' id='cjloginpass' value='' placeholder='Password'>
<input name='Submit' type='submit' value='Login'>
</form>
<p><a href='/php/mobile_forgot_pass.php'>I forgot my password - email it to me.</a>
</div>
</div>
</body>
</html>
1