I am using jquerymobiles 1.4.2
Is it possible to place a page within another page before closing first page.
HTML
<div data-role="page" id="page1">
<div data-role="header">
<h1>header</h1>
</div>
<div data-role="content">
Go to Page Two
contents</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>header2</h1>
</div>
</div>
Short answer is no, you can't. Nothing can prevent you but this "page" will never work as regular page. All pages must be part of a page container which is body.
On the other hand, inner pages were possible before with some 3rd party plugins but they were not updated since jQuery Mobile 1.0.
Related
I'm a touch lost - I have taken a popup example from the jquery demo page as a template...
If I put my popup within the first page, it works - I can call it from within js script to open.
Thus... the following does work
<div data-role="page" class="page" id="Menu">
<div data-role="header" data-position="fixed" class="ui-title center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="MainContent">
<div id="MenuList"></div>
</div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
I can dynamically open it via
$("#popup").popup("open");
However if I move the popup to another (data-role) page within the same document, it does not get displayed, nor errors in console.log. Can anyone steer me forward? The following does NOT work...
<div data-role="page" class="page" id="OrderList">
<div data-role="header" data-position="fixed" class="ui-title text-center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
</div>
To avoid misunderstanding - the first code sample works, the second one does not work (meaning no errors, no modal like dialog box gets displayed).
Why?
(All help appreciated of course)
I got it (thanks to #Omar for direction). A coded answer is not easy but I will try draft and share in a few days (I'm behind on my work because of trying to fix this problem).
For the purpose of this note, when I say "this failed" I mean "no popup, no change in address bar, no console error."
I have a form. If operator attempted to navigate away, a test should be done to confirm all data was entered. All my a-href tags had page references, and jquery gives precedence to a-href tags over any other events I had applied. I had not considered the ramifications of this. The result? Form displayed, incompletely filled, operator selects to navigate elsewhere, popup call starts/ends but "failed" and jquery quickly navigates to the page named in the a-href page.
Solution:
When using popups, do not name pages in a-href tags. Thus, when using popups, avoid
<a href='#Page5'>Page 5</a>
and instead
<a href='#' id='page5'>Page 5</a>
and create an event that decides if a popup should be displayed, or if not, that page5 should be navigated to.
I hope that makes sense.
I want to have a complex header and reuse it in every page.
This is my page sample:
http://jsfiddle.net/HBgTp/2/
<div data-inset="true" id="MainScreen" data-theme="a" data-role="page">
<div class="MainHeaderPlaceHolder">
<!-- PUT HERE THE HEADER -->
</div>
</div>
<div id="MainHeaderWrapper">
<div data-inset="true" data-role="header">
</div>
</div>
I am trying to inject the header like this:
$(document).ready(function(){
$(".MainHeaderPlaceHolder").append($("#MainHeaderWrapper").html());
$('.MainHeaderPlaceHolder').trigger('create');
});
Nothing happened, What is wrong?
Thanks
Personally, If you want to go down this route
var html = "some html string";//just easier than pulling it from html - to my mind anyway
$(".MainHeaderPlaceHolder").append( html );
should work, but that's what you're doing so...
I'm building a mobile app with Cordova, Backbone for the MVC structure and jQuery Mobile for UI.
This works well except for the user experience while loading a new page. Actually a new page is created dynamically, and when it's ready, jquery mobile handles the page transition to this page. In a mobile browser this transition is slower than in a classic browser, so while page is loading the user sees a blank white screen and then appears the new page.
The matter is about my header/footer bar. I'd like it to keep showing while the content is loading, so the user will see the header/footer and only a blank/white content during the transition.
So this is a classic page structure:
<div data-role="page">
<div data-role="header"></div>
<div data-role="content"></div>
<div data-role="footer"></div>
</div>
For me the easiest way to go is like that:
<div data-role="header"></div>
<div data-role="page">
<div data-role="content"></div>
</div>
<div data-role="footer"></div>
And fix the content with CSS positioning.
But I'd like to find something smarter.
What do you think of having a single JQM page, with Backbone just updating the <div data-role="content"> for each route? What about JQM rendering? And what about transitions?
Documentation: http://jquerymobile.com/demos/1.1.0/docs/toolbars/footer-persist-d.html
Basically you put a data-role="footer" element in each page like this:
<div data-role="footer" data-id="foo-footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li><a href="d.html" >Info</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Notice the data-id, it must be the same on all data-role="footer" elements to take advantage of the persistent toolbar option. The data-role="footer" element also must have the data-position="fixed" attribute.
Here is a demo: http://jsfiddle.net/SpRAA/
I have a single page jquery mobile application in which there are few parent pages (directly under body) and few child pages dynamically generated (with backbone.js) and kept within another div.
While linking the pages the parent pages are working fine but the pages inside a simple div are not working.
The following is the simple fiddle to describe the problem. Page-2 is working fine but Page-3 within a Div is not changing.
http://jsfiddle.net/zwhEB/
You have a extra div wrapped around page 3
http://jsfiddle.net/zwhEB/1/ (Commented out the extra div, working)
HTML
<!-- Remove this extra div -->
<!-- <div id="pages"> -->
<div data-role="page" id="p3">
<div data-role="header" data-rel="back">
<h1>Header Page 2</h1>
</div>
<div data-role="content">
<p>This is page2</p>
</div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
<!-- Remove this extra closing div -->
<!-- </div> -->
Can I embed one page (data-role="page") in another page like:
<div data-role="page"> <!-- outer page -->
<div data-role="header"></div>
<div data-role="content">
<div data-role="page"> <!-- inner page -->
<div data-role="header"></div>
<div data-role="content">
inner page content goes here....
</div>
<div data-role="footer"></div>
</div> <!-- inner page -->
<div data-role="footer"></div>
</div> <!-- outer page -->
When I tried like this, i didn't see my content but outer header, footers displaying for
me.
Thanks,
nehatha.
No, you cannot. Pages are not meant to be embedding each other. May be you can probably write what are you trying to achieve by this?
You have two options.
Write your own transition logic, which will not be very difficult, you can say $('#content').html(new html); on every button click and keep only one page.
use data-position="fixed" for header and footer in jQuery mobile and use normal page, this way your header and footer will not move on scrolling, paginating.
Multi-page template structure: http://demos.jquerymobile.com/1.4.2/transitions/pages/