I'm starting with jQuery Mobile and I have a problem. I have two HTML documents:
page1.html
page2.html
page2a
page2b
The problem is the following:
when I browse from page1.html to page2.html, it displays page2a, but I can't browse to page2b
when I browse from page1.html to page2a, it stays on page1.html
when I browse from page2.html to page2a or page2b, it works well
What is wrong with my solution? Is there any good solution to have that working properly?
Here is a code for reference:
Page1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 1</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Single page</h1>
</div>
<div data-role="content">
<p>See page 2.</p>
<!-- <p>See page 2a.</p> -->
</div>
</div>
</body>
</html>
Page2.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page 2</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script>
</head>
<body>
<!-- Start of first page: #a -->
<div data-role="page" id="a">
<div data-role="header">
<h1>Page 2a</h1>
</div>
<div data-role="content" >
<p>Show page "2b"</p>
</div>
</div>
<!-- Start of second page: #b -->
<div data-role="page" id="b">
<div data-role="header">
<h1>Page 2b</h1>
</div>
<div data-role="content">
<p>Back to page "2a"</p>
</div>
</div><!-- /page b -->
</body>
</html>
Check the below question. It seems it only works with data-rel="external".
JQM Multipage
UPDATE:
Note: You cannot link to a multipage document with Ajax navigation active because the framework will only load the first page it finds, not the full set of internal pages. In these cases, you must link without Ajax (see next section) for a full page refresh to prevent potential hash collisions. There is currently a subpage plugin that makes it possible to load in multi-page documents.
Source: JQM - Linking pages
Related
I have two pages: Page A and Page B, built with jquery mobile. On Page A, I have a popup dialog, in which there is a menu option displaying Page B when I click on it. On Page B there is a back button leading me back to Page A when I click on it.
Here is my problem. If the users of my app decide for some reason to reload Page B and then push the back button on Page B after reloading it, the page A will change its appearance from full screen into a dialog view. I realized that this strange behavior only occurs, a) after reloading Page B and b) when calling Page B from a popup menu on Page A, as described above.
Is there a way to tell jquery mobile not to change the appearance of Page A, no matter whether or not Page B gets reloaded? Of course, as I mentioned above, calling Page B directly (and not through a popup menu) would also solve my problem, but I would like to keep my popup menu on Page A and I'm looking for a better solution.
Here is my code causing this problem:
Page A:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<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.1.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="page">
<div data-role="header" data-theme="b">
<h2>Page A</h2>
</div>
<div data-role="content">
<a href='#popupMenu' data-rel='popup' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a'>Menu</a>
</div>
<div data-role='popup' id='popupMenu' data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
</div>
</body>
</html>
Page B:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<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.1.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="page">
<div data-role="header">
<h2>Page B</h2>
</div>
<div data-role="content">
Back
</div>
</div>
</body>
</html>
You should add data-history="false" to your popup, like this:
<div data-role='popup' id='popupMenu' data-history="false" data-theme='b'>
<ul data-role='listview' id='listview' data-inset='true' style='min-width:210px;'>
<li data-role='list-divider'>Choose an action</li>
<li><a href='pageb.html' data-rel='page'>Page B</a></li>
</ul>
</div>
This will prevent JQM to add the Popup to the history stack.
Hi i am new for jquery mobile. I gt three page inside my apps. page1.html->page2.html->page3.html.
I need to preserve page1's textbox value when page2.html back to page1.html.
After i googling, i get the answer
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
How i back my page
history.go(-1);
go to next page
$.mobile.pageContainer.pagecontainer("change", url, {
allowSamePageTransition: true,
transition: 'none',
showLoadMsg: false,
changeHash: true
})
But nw is my problem when page2 back to page1, then page1 go to page2 , page2 textbox value will keep preserved also. Is it possible that when i click back button then textbox value will be preserved, but when i click next button then pages will be refresh?
You are doing it all wrong, you should have read everything about cashing.
When page cashing is turned on you still have a option to decide which page will have it turned on and which one will not get cashed.
All you need to do to prevent second page cashing is to add attribute data-dom-cache="false" to your second page data-role="page" div container, and that is that.
Working example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.page.prototype.options.domCache = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<input type="text" value="" id="sdfsd"/>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>collapsible demo</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-dom-cache="false">
<div data-role="header">
Back
<h1>jQuery Mobile Example</h1>
</div>
<div data-role="content" class="ui-content">
<input type="text" value="" id="dffsd"/>
</div>
</div>
</body>
</html>
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
can you please tell me How to show and hide header when user click anywhere in page?
I think i need to use toggle class and ('.header').show('slow'); or hide .i don't know how to use that?
http://jsfiddle.net/ravi1989/YcxtS/
<div data-role="header">
<h1>Add Images</h1>
</div>
This is basis header .But I need to implement header having multiple images scrolling horizontally .
how to scroll images horizontally in jquery mobile?
Just add these attributes to your header: data-position="fixed" and data-fullscreen="true".
Working example: http://jsfiddle.net/uTpH4/
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Index page</h1>
Next
</div>
<div data-role="content">
</div>
</div>
</body>
</html>
I am a fresher in jquery mobile. I using the code get from stackoverflow. My problem is, this solution works well in samsung and other but not works in iphone and sonyericsson. Please help anyone...
I want to go back at the top of the page while scroll-down at bottom of the page by clicking link..
Here is my code:
<a id="uptotop" class="ui-btn-right" data-icon="arrow-u" data-theme="a">▲TOPにもどる </a>
<script type="text/javascript">
$('div').live('pagebeforecreate',function(event, ui){
$('#uptotop').live('click',function() {
$('html, body').animate({scrollTop: '0px'}, 800);
});
});
</script>
what about using a simple anchor? example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-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>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1><a name="top"></a>Header</h1>
</div> <!-- /header -->
<div data-role="content">
<p>lots of content here...<br>scroll down to find the button...
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Back to top of page ...
</p>
</div> <!-- /content -->
</div> <!-- /page -->
</body>
</html>