Please help,
jquery mobile multipage wont work when a page is called from another page. It only displays the buttons but doesnt navigate to its internal pages when clicked. It works fine when the page is access directly.
<!-- Page 1-->
<div data-role="page" id="description" data-title="Description">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 1-->`enter code here`
</div>
</div>
<div data-role="content">
<!--- content 1-->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
<!-- Page 2-->
<div id="Physicians" data-role="page" data-title="Physicians">
<div data-role="header" data-position="fixed" data-theme="d">
<!-- header 2 -->
</div>
<div data-role="content">
<!-- content 2 -->
</div>
<div data-role="footer" data-position="fixed" data-theme="d">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li>Description</li>
<li>Physicians</li>
</ul>
</div>
</div>
</div>
Try adding to the anchor the attribute rel="external".
Example:
Description
try giving <div data-role="page" first for your second page
When you call this page from another page, it ONLY loads the div[data-role="page"] of that page, not the other div in this multi-page file!
Actually to be precise, when you link to a page from another page, ONLY the code inside the div you are targeting is pulled in via AJAX, even if you had JS in the <head> that won't get loaded either.
Try linking to this page with an external link and you'll find it works fine.
Related
I am trying to use the panel feature from JQuery mobile, and after following some tutorials I cannot make the panel to link the pages within my app to work, and it just stays at the first page The animation works fine tho´. Any suggesting of how to fix this?
This is my code:
<body>
<!--Activity Feed Page-->
<div id="activityFeed" data-role="page">
<!--Panel-->
<div data-role="panel" id="myPanel" data-display="reveal" data-theme="a" class="ui-response">
<div data-role="listview" class="nav-seacrh">
<li>Activity</li>
<li>Messages</li>
<li>Profile</li>
<li>Settings</li>
<li>Log out</li>
</div>
</div> <!--ends panel-->
<div data-role="header">
<h1>Activity Feed</h1>
Panel
</div>
<p>Activity Feed Page</p>
</div>
<!--End Feed Page-->
<!--Messages Page-->
<div id="messagesPage"data-role="page">
<div data-role="header">
<h1>Messages</h1>
Panel
</div>
<p>Messages Page</p>
</div>
<!--Ends Messages Page-->
<!--Profile Page-->
<div id="profilePage"data-role="page">
<div data-role="header">
<h1>Profile</h1>
Panel
</div>
<div>
<p>Profile Page</p>
</div>
</div>
<!--Ends Settings Page-->
<div id="settingsPage"data-role="page">
<div data-role="header">
<h1>Settings Feed</h1>
Panel
</div>
<div>
<p>Settings Page</p>
</div>
</div>
<!--Ends Settings Page-->
The data-rel="close" inside your page links is causing JQM to override their click handlers to close the panel.
Remove that and it should navigate to page mentioned in href.
i am implementing tab bar using jquery mobile.I need to show different pages on different buttons on tab bar .But it is showing in same page.
http://jsfiddle.net/ravi1989/654gX/
<div data-role="navbar">
<ul>
<li>Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
</ul>
</div>
<div data-role="content" class="content">
<div id="tab-1">
<h2>Here is the first tab</h2>
</div>
<div id="tab-2">
<h2>Here is the second tab</h2>
</div>
<div id="tab-3">
<h2>Here is the third tab</h2>
</div>
</div>
You need to restructure you app, first follow this structure given at jquery mobile docs.
Secondly navbars are supposed to be inside footer or header, so wrap you navbar around footer then you need fixed header and footer with same data-id so the pages transition between dynamically keeping the same header and footer, which looks like tabs, example
<div data-role="page" id="one">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>This is a single page boilerplate template that you can copy to build your first jQuery Mobile page. Each link or form from here will pull a new page in via Ajax to support the animated page transitions.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page -->.
<div data-role="page" id="two">
<div data-role="header" data-position="fixed" data-id="sameheader">
<h1>Single page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Different page same footer.</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed" data-id="samefooter">
<div data-role="navbar">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page2 -->
Js fiddle example
This code is not producing a Previous button:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Actually to get the data-add-back-btn="true" work in latest version of jQuery Mobile 1.4, it should be at the header of the second page.
<div data-role="page" id="2ndPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous!">
<h1>HEADER</h1>
</div>
<div data-role="content">
hi
</div>
<div data-role="footer">
<p>FOOTER</p>
</div>
</div>
jQuery Mobile >= 1.4: https://stackoverflow.com/a/20065246/1771795
Adding data-add-btn-back to single page won't generate a button as there is no page before it in DOM nor in navigation history.
If you make two pages, it will appear on the next page.
<!-- page -->
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<a href='#p1'>page 2</a>
</div>
<!-- another page -->
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id='p1'>
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Demo: http://jsfiddle.net/uJz3E/1/
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul></div>
</div>
<div data-role="content" data-theme="c">
<p>Home</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
</div>
<!--Safety Home Page Ends Here -->
<!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topic</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Topics Page Ends Here -->
<!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Incident Page Ends Here -->
Yeah your second and third page has no closing </div> tag. You may want to try and use validators to help spot issues like this. Here is the type of thing that you see when you run your code through a validator.
Line 38, Column 56: Unclosed element div.
<div data-role="page" id="safety_report" data-theme="c">
Line 20, Column 55: Unclosed element div.
<div data-role="page" id="safety_topic" data-theme="c">
HTML5 Validators
http://validator.w3.org/
http://html5.validator.nu/
I hope this helps.