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.
Related
I am trying to get a jquery mobile panel working. Currently, when the panel opens it slides all the way covering my page instead of just part way. I'm thinking it has to be something to do with initialization of the panel.
Any ideas?
Here is the jsfiddle
HTML
<div id="panel_home" data-role="panel" data-position="right" data-display="slide" data-theme="a">
<ul data-role="listview">
<li>Panel Button 1</li>
<li>Panel Button 2</li>
<li>Panel Button 3</li>
</ul>
</div>
<div data-role="page" id="page_home">
<div data-role="header" data-position="fixed" >
<a href="#panel_home" > <img border="0"
src="http://cdn-img.easyicon.net/png/11464/1146409.gif"
width="30" height="30">
</a>
</div>
<div data-role="content" >
<h2>Page Content</h2>
</div>
<div data-role="footer" data-position="fixed">
<h2>Footer Content</h2>
</div>
</div>
JS
$(document).one('mobileinit', function () {
$("[data-role=panel]").panel().enhanceWithin();
});
External panels should be initialized on Jquery's document.ready:
$( document ).ready(function() {
$("[data-role=panel]").panel().enhanceWithin();
});
Updated FIDDLE
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
I am searching a plugin in jQuery mobile for tab implementation. tabs must be in content of the page. This is wat I have...
<div data-role="page" id="nav">
<div data-role="page" id="nav">
<div data-role="header">
<h3>
Header
</h3>
</div>
<div data-role="content">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>
<a href="#one" data-theme="" data-icon="" class="ui-btn-active ui-state-persist">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
<li>
<a href="#" data-theme="" data-icon="">
Button
</a>
</li>
</ul>
</div>
<div data-role="page" id="one" data-transition="slide">
<div data-role="content" style="background-color:#ff0;">
<h1>One</h1>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h3>
Footer
</h3>
</div>
</div>
When i click on page id "one". it is not displaying its respective content.
Can anyone pls help me.
Or you can use my tabview plugin. Based on JQM collapsbile set, you just need to replace JQMs collapsible and collapsible set widget with my versions. Old collapsibles will continue working as normal. When you add data-type="horizontal" to a collapsible set, it becomes ... tabs...
Demo here, Repo on Github.
I like the other solution, too.
I modified jQuery.mobile-tabs to allow the tab bar to be placed anywhere within the page. Is this what you had in mind?
I am having problems with adding a page to a listview sublist (li)..
I'm doing something like this:
<ul data-role="listview">
<li>Click me
<ul>
<li data-role="page">
<div data-role="header" data-position="fixed">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer" data-position="fixed">
<h4>Page Footer</h4>
</div>
</li>
</ul>
</li>
</ul>
Is there a better way to do this as I have a few problems with it...
The fixed header and footer does'nt work on IOS 6 (iphone 3GS)
Padding and Margins need setting to 0.
Is this the best way to do this?
Normally a list will contain a sub list with links but I want to sublist to contain the page detail (information page).
Update: Trying this but the link does not link to the page gererated:
$.each(data.id, function(index, value){
output += <li>\
<a href="#mypage">\
<h3 class="h3_title">link title</h3>\
</a>\
</li>\
<div id="mypage" data-role="page">\
<div data-role="header" data-position="fixed">\
<h1>Page Title sub</h1>\
</div>\
<div data-role="content">\
one<br/>\
</div>\
<div data-role="footer" data-position="fixed">\
<h4>Page Footer</h4>\
</div>\
</div>';
...
You could just add the page as a separate div outside the ul tag and make the li a link to it. For example:
<div id="your-current-page" data-role="page">
<ul data-role="listview">
.
.
.
<li>Click me
.
.
.
</ul>
</div>
<div id="your-second-page" data-role="page">
You can put here whatever you'd like
</div>
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.