Can anybody help me and show me why in this code the back button is not working? I tried it on Chrome and also on Safari via Electric Mobile Simulator (http://www.electricplum.com/dlsim.html). I tried it also with the global setting with javascript ($.mobile.page.prototype.options.addBackBtn = true;).
The back button is correctly shown, but when I click/tap on the back button the page stays itself. In chrome I see that the Url of the subpage is shown (#sub-page) and after the tap on the back button the url changes back, but not the site itself.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
<title>Index.Mobile</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.css" rel="Stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.js" type="text/javascript"></script>
</head>
<body>
<h2>Index.Mobile</h2>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Mobile Events</h1>
</div><!-- /header -->
<div data-role="content">
<!---- BUTTON ---->
<div>some content</div>
Next Page
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>This is the main content</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width;initial-scale=1,user-scalable=0" />
<title>Index.Mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<h2>Index.Mobile</h2>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>Mobile Events</h1>
</div><!-- /header -->
<div data-role="content">
<!---- BUTTON ---->
<div>some content</div>
Next Page
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4></h4>
</div><!-- /footer -->
</div><!-- /page -->
<div data-role="page" id="sub-page"" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header">
<h1>Page Header</h1>
</div>
<div data-role="content">
<p>This is the main content</p>
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
Try this...
Related
I am trying to create a jQuerymobile app with a Nav Bar with Multiple Pages in single index.html. I am using the template Multi-page template structure
Unfortunately, I cannot get the nav bar to show different pages. Here is my code:
I did also use a script 'pageLoader.js' to force loading the pages. But that does not work either. Here is my pageLoader.js:
<!doctype html>
<html>
<head>
<title>My Page</title>
<!--https://jquerymobile.com/download/-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-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>
<!--POST page 1-->
<div data-role="page" id="postPage">
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<label for="value">value:</label>
<input type="text" name="value" id="value" placeholder="enter your value" value="" data-clear-btn="true">
<button onclick="saveValue()"> Store Key</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
<!--get Page 2-->
<div data-role="page" id ='getPage'>
<div data-role="header">
<h1>I'm a header</h1>
<div data-role="navbar">
<ul>
<li>POST</li>
<li>GET</li>
<li>PUT</li>
<li>DELETE</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div role="main" class="ui-content">
<label for="key">key:</label>
<input type="text" name="key" id="key" placeholder="enter your key" value="" data-clear-btn="true">
<button onclick ="getValue()"> Get Value</button>
<p id="status">Status: No Activity</p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<script src="scripts/client.js" type="text/javascript"></script>
<script src="scripts/pageLoader.js" type="text/javascript"></script>
</body>
</html>
I also tried to use a script to enforce change of pages. I used the pageLoader.js script with following content:
$(document).on("pageshow", function(){
if($('.ui-page-active').attr('id') === 'postPage'){
$.mobile.changePage("#postPage");
} else if ($('.ui-page-active').attr('id') === 'getPage'){
$.mobile.changePage("#getPage");
}
});
Any help would be greatly appreciated.
Good afternoon ...
My problem is this (link to issue image).
When using, for example, a COLLAPSIBLE control, this adds me a higher or lower margin.
I see no statement on the same CSS to display as well.
The code is nothing strange.
Appears well in the pages of demonstrations or others pages. This happens to me on multiple browsers including Chrome and Firefox only with my page.
Thanks for your help and sorry my English.
jQueryMobile version 1.4.5.min
jQuery version 1.11.2.min
<!doctype html>
<html>
<head>
<title>Documento sin título</title>
</head>
<meta name="viewport" content="width=device-width, initial-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.2.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" data-theme="b" data-content-theme="b">
<div data-role="header">
<h1>Definición de Formulario</h1>
<input type="text" placeholder="Nombre del formulario" value="" id="nombremapa" name="nombre" />
</div><!-- HEADER -->
<div data-role="content" data-position="fixed" id="campos">
</div><!-- CONTENT -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar" >
<ul>
<li>Agregar</li>
<li>Quitar</li>
<li>Editar</li>
<li>Información</li>
<li>Enviar</li>
</ul>
</div>
<div data-role="popup" id="popupMenuAgregar" data-theme="b">
<ul data-role="listview" data-inset="true" style="min-width:210px;">
<li data-role="list-divider">Choose an action</li>
<li><a id="add_texto">Texto</a></li>
<li><a id="add_numero">Numero</a></li>
<li><a id="add_fecha">Fecha</a></li>
<li><a id="add_lista">Lista</a></li>
</ul>
</div>
</div><!-- FOOTER -->
</div><!-- PAGE -->
</body>
</html>
http://jsfiddle.net/zwLvjrc2/
I have two pages from which i am planning to navigate using JQM mobile framework, I am planning for multiple pages, for my code to be tidy i decided to have the multiple pages in different html files. On navigating to next screen page refresh the page CSS is not loading.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Page 1</title>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript">
$(document).swipeleft(function() {
$.mobile.changePage("page2.html");
});
</script>
</head>
<body>
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
</body>
</html>
Page 2 : I have the below code
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Page 2</h3>
<p>
<a href="page3.html" data-transition="slide">I'm the
collapsible content for section 1</a>
</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
The navigation happens but when i refresh the page the css are removed.How to have multiple page and navigate between screens.
Change your page1.html to below
<!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/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Section 1</h3>
<p><a href="page2.html" data-transition="slide" >I'm the collapsible content for section 1</a></p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$('#page1').on('pageshow',function(event){
$("#page1").swiperight(function () {
$.mobile.changePage("page2.html");
});
});
</script>
</body>
</html>
and change your page2.html as below
<!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/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-dom-cache="true">
<div data-role="header"></div>
<div data-role="content">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Page 2</h3>
<p>
<a href="page3.html" data-transition="slide">I'm the
collapsible content for section 1</a>
</p>
</div>
<div data-role="collapsible">
<h3>Section 2</h3>
<p>I'm the collapsible content for section 2</p>
</div>
<div data-role="collapsible">
<h3>Section 3</h3>
<p>I'm the collapsible content for section 3</p>
</div>
</div>
</div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$('#page2').on('pageshow',function(event){
alert('page2 loaded');
});
</script>
</body>
</html>
It should work now. Please tell me what happens. I wrapped the script inside $('#page2').on('pageshow',function(event){});. That's the only change I've done.
i was referring to http://m.stanford.edu/#events which used older version JQM
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1 jquery.mobile1.0a4.1.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
and in latest version ie
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
The above issue is done for the latest version by
$(document).on("mobileinit", function () {
$.mobile.pushStateEnabled = false;
});
I have one template which consist of several pages (data-role="page").
Also I have data which should be generated by script. Generated data depends on page, where script launch.
How I can get page id or another unique info about it in events, connected with changing pages?
I've tried pageshow event, but I cant get where page id.
Thanks.
Here's an working example: http://jsfiddle.net/Gajotres/ecXuk/
Also take a look at my other article on similar question: https://stackoverflow.com/a/14010308/1848600
Here's a code example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<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/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
Back
<h3>
Second Page
</h3>
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
And js part:
$('#index').live('pagebeforeshow',function(e,data){
alert('Index Page');
});
$("#second").live('pagebeforeshow', function () {
alert('Second Page');
});
I have just started looking into jquerymobile, done simple samples using jquery.mobile-1.0a1.
I have home.html, auboutus.html pages. In home page, i have a listview with a external link to aboutus.html. It is working fine, by clicking on about us link, about us page is loading with head navigation bar with "Back" button.
Now by using jquery.mobile-1.0a2, in about us page, the header navigation bar got disappeared.
Here is my sample code:
home.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<div id="banner">
<h2></h2>
</div>
<ul data-role="listview">
<li><a href="aboutus.html" >About Us</a>
</li></ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
aboutus.html
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.0a2.min.css" />
<script src="jquery-mobile/jquery-1.4.4.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.0a2.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="b">
<h1>About Us</h1>
</div>
<div data-role="content">
<div id="banner">
<h2>About Us</h2>
</div>
<p>about us about us about us about us </p>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
You should think about using the page design JQuery mobile prefers. You can find it here, you dont need to define different .html files, you can simple add multiple 'pages' with different id's to one html file. The refering is then simple. Check out this link: http://jquerymobile.com/demos/1.0a4.1/docs/pages/docs-navmodel.html#../../docs/pages/docs-pages.html
For your link if you want to refer to external, try this: Link