I have a site with a user login form shown in a data-rel='dialog' link. Problem is thatthe 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.
Also, given that I get back to the home page with data-dom-cache disabled, should it not fetch it from the server again?
Many thanks, Kevin
<!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>
Maybe you could try closing any dailog onload using $('.ui-dialog').dialog('close').
REF: JQuery mobile - Dailogs
I have read this on the same page, it is weird that it is happening to you.
**
History & Back button behavior
**
Since dialogs are typically used to support actions within a page, the framework does not include dialogs in the hash state history tracking. This means that dialogs will not appear in your browsing history chronology when the Back button is clicked. For example, if you are on a page, click a link to open a dialog, close the dialog, then navigate to another page, if you were to click the browser's Back button at that point you will navigate back to the first page, not the dialog.
UPDATE: Dialog appears on back button in FireFox browser. Works fine on IE9 and Chrome.
Related
I am using a multiple page format with a persistent header. I can successfully change page either with a straight hyperlink or using $(':mobile-pagecontainer').pagecontainer('change'
The code works fine but it seems to "load" the page an additional time each time I click on the buttons to change page.
In this code the button changes the page and outputs a console.log message.
On click I would expect the page to change and to see one "#btn - page x" console.log message.
What happens is the page changes and I get a console message for each time I've loaded the page, not just one.
Even though my code is working, this can't be right - this will just go up and up with normal user usage.
What am I not understanding here?
I've created a jsfiddle to show what I mean. For example, if I click the "goto page x" button 6 times (that's 3 times for each page), I get an output of 3 "#btn - page x" messages, not just one.
Same with the header button - each time I change the page, number of responses from the header button goes up.
the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>problem</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed" data-theme="a">
header button
</div>
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="content">
<h1>I am page 1</h1>
goto page2
</div>
</div>
<div data-role="page" id="page2" data-title="Page 2" data-theme="b">
<div data-role="content">
<h1>I am page 2</h1>
goto page1
</div>
</div>
<script src="problem.js"></script>
</body>
</html>
and the js:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
$('#btntest1').click(function(){
console.log('#btn - page1');
//$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
});
$(document).on('pagebeforeshow','#page2',function(){
console.log('#page2 pagebeforeshow');
$('#btntest2').click(function(){
console.log('#btn - page2');
//$(':mobile-pagecontainer').pagecontainer('change', '#page1', { reloadPage: false});
});
});
$(function() {
$("[data-role='header']").toolbar();
});
$(document).on('pagebeforeshow',function(){
console.log('pagebeforeshow');
$('#headerbtn').click(function(){
console.log('headerbtn click');
});
})
UPDATE:
So I've been trying all sorts of things to try to fix this, including removing data-rel="back", trying data-ajax="false" (which defeats the point of what I'm trying to do), changing page with
$(':mobile-pagecontainer').pagecontainer('change', '#page2');
or
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
but no joy. Obviously, I've tried googling but can't find anything to help.
In the full app code the buttons communicate with a database, so as the clicks increase, I'm sending and retrieving the same data to the db multiple times on each click.
I really would appreciate some guidance if anyone has any ideas what I could do?
The problem is that each time you're entering the page, you are binding a listener on the element again. So you're binding multiple listeners. The listener should not be written inside the pagebeforeshowhandler.
Take it out like this:
$(document).on('pagebeforeshow','#page1',function(){
console.log('#page1 pagebeforeshow');
});
$('#btntest1').click(function(e){
e.preventDefault();
console.log('#btn - page1');
$(':mobile-pagecontainer').pagecontainer('change', '#page2', { reloadPage: false});
});
And for page 2 likewise.
I am having trouble getting flipbox to work. It displays, but I can't get the day/month/year to roll or move at all. It's frozen.
Same if I change the mode to timeflipbox, or durationflipbox -- they display when I click them but don't respond to any mouse or keyboard activity.
code
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<title>Single page template</title>
<link rel='stylesheet' href='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css'>
<link rel='stylesheet' type='text/css' href='http://cdn.jtsage.com/datebox/latest/jqm-datebox.min.css'>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script src='http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js'></script>
<script src='jqm-datebox.core.min.js'></script>
<script src='jqm-datebox.mode.flipbox.min.js'></script>
</head>
<body>
<div data-role='page'>
<div data-role='content'>
<input type="text" data-role="datebox" data-options='{"mode":"flipbox"}'>
</div>
</div><!-- /page -->
</body>
</html>
What's wrong with this code for the flipbox to be frozen? The only thing I can think of is that the js references are off, but I just downloaded them and I'm pretty sure they are current.
Any ideas?
figured it out... I just copied/pasted the css/js references from JT Sage's Datebox page source: http://dev.jtsage.com/jQM-DateBox/
I have a header, in that i am trying to user a icon on the left side corner. I have used jquerymobile icons in that page. But i cant able to see the icon symbol, only empty icon i displayed. Find the attached screenshot for reference. below is the code from html.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"> </script>
</head>
<body>
<div data-role="page" id="test">
<div data-role="header" data-theme="a">
<h1>Home</h1>
</div>
</div>
</body>
</html>
Just tried it in a fiddle and it seems to work OK for me. http://jsfiddle.net/LYCjv/
Might be worth downloading jQueryMobile hosting the files on your own server and referencing the css/js files locally, might be some issue with the CDN?
I see some others (e.g. this post) have had trouble using external javascript scripts in JQuery Mobile - as of today I have joined their ranks.
I have a single external js script (controllers.js) which contains code that affects several pages on the site. It is loaded on every page of the site. I put the js file just before the tag it works fine on the initial page load. However when I navigate thereafter (using the JQM Ajax methods) all functions in the script stop working. I would have thought the script would remain in cache - but heyho. Anyhow there's an FAQ which answers this question and I've implemented their suggestion which is: "...to reference the same set of stylesheets and scripts in the head of every page." I have done this but when I do even on the first page load the js doesn't fire. There aren't page specific scripts - so the remainder of that FAQ does not apply.
My cut down html looks like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="/static/jquery-ui-1.10.3.custom.min.css">
<link rel="stylesheet" href="/static/jquery-mobile/css/themes/default/jquery.mobile-1.3.2.min.css">
<script src="/static/jquery-1.9.1.min.js"></script>
<script src="/static/jquery-ui/jquery-ui-1.10.3.custom/js/jquery-ui-1.10.3.custom.min.js"></script>
<script src="/static/jquery-mobile/js/jquery.mobile-1.3.2.min.js"></script>
<!-- CSS: implied media="all" -->
</head>
<body>
<div data-role="page" id = "main-page">
<div data-role="header" style="overflow:hidden;">
</div>
<div id = "home" data-role="content">
<input type ='button' id = "some_btn" value="press me">
</div>
</div>
<script type="text/javascript" src="/static/js/controllers.js"></script>
</body>
</html>
and within the javascript file
controllers.js
$('#some_btn').click(function()
{
alert('button pressed');
});
Any ideas on what I may be doing wrong here?
Since the content in the #page is loaded dynamically via ajax, click will not work, since it only works on elements that are on the page when the script is called.
You need to use the .on() method:
$('body').on('click','#some_btn',function()
{
alert('button pressed');
});
so basically I've been making a jQuery Mobile site, I've hit a lot of speed bumps but as soon as I start making progress, this happens!
The culprit: http://www.ehustudent.co.uk/cis21318140/cis3104/cw2/find-your-nearest-jospice.html
Whenever you click on a link, it just keeps spinning forever. It started happening when I actually got the map to work! The map was inline, so I put it in its own file and it's still happening.
IT STOPS HAPPENING WHEN I REMOVE THIS LINE OF CODE
<script src="map-kensington.js"></script>
Please help me :(. I need to put that line of code in the body or the map won't load, but when I do put it in there the page won't load!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Find Your Nearest Jospice | Jospice Charity Shops</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=yes">
<!-- Start of jQuery External Links -->
<link rel="stylesheet" href="CSS/jospice2.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<!-- End of jQuery External Links -->
<link rel="stylesheet" href="CSS/custom.css" />
</head>
<body>
<div data-role="page" id="homePage" data-theme="b">
<div data-role="header" data-theme="b">
Menu
<h1>Jospice</h1>
Contact
</div>
<div data-role="content" data-theme="b">
<h2>Find Your Nearest...</h2>
<p>Use the list below to find your Jospice Store of choice! Click on the button to be provided with information and directions to the store.</p>
Furniture Store (Kensington)
Allerton
Crosby
Kensington
Maghull
Netherton
Old Swan
Southport
Walton Vale
</div>
</body>
</html>
It's the same for every page, 7 hours left to finish the site, please help :(
Your script is failing with a 'google is not defined' error.
You need to add google script references to the individual map pages
Something like this:
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>