I have the problem that when I click a navigation link it shows the page as it should. But if I click on the link again it loses all of its contents.
Is there someone who knows how I solve this?
I use jquery.mobile-1.0b2.min.js
<div id="nav">
<ul>
<li class="red btn"><a class="tildig" href="#tildig" data-transition="fade" >
<p>TIL DIG</p>
</a></li>
<li class="blue btn"><a class="kontakt" href="#kontakt"data-transition="fade" >
<p>KONTAKT / BOOKMØDE</p>
</a></li>
</ul>
</div>
<!-- Start of page -->
<div data-role="page" id="tildig">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p>Dette er siden TIL DIG<br>
Jeg er nummer 3</p>
</div>
<div data-role="footer"> </div>
</div>
<!-- End of page -->
<!-- Start of page -->
<div data-role="page" id="kontakt">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p>Dette er siden KONTAKT / BOOKMØDE</p>
</div>
<div data-role="footer"> </div>
</div>
<!-- End of page -->
Java
http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js
http://code.jquery.com/jquery-1.4.4.min.js
I think i know what your problem is - at least I had some very similar stuff where a listview kept dissapearing - had to do with jqm caching.
<div data-role="page" id="book_index" data-dom-cache="true">
This attribute made the page reappear, hope it helps
Related
I try to use this on my web app http://tympanus.net/codrops/2014/09/02/tab-styles-inspiration/comment-page-1/#comments it works fine, but now what I need is to load a new page and select the fine tab.
So instead of this dynamic stuff:
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<section id="section-topline-1"><p>1</p></section>
<section id="section-topline-2"><p>2</p></section>
<section id="section-topline-3"><p>3</p></section>
<section id="section-topline-4"><p>4</p></section>
<section id="section-topline-5"><p>5</p></section>
</div><!-- /content -->
</div><!-- /tabs -->
</section>
I'd like to have
<section>
<div class="tabs tabs-style-topline">
<nav>
<ul>
<li><span>Home</span></li>
<li><span>Deals</span></li>
<li><span>Upload</span></li>
<li><span>Work</span></li>
<li><span>Settings</span></li>
</ul>
</nav>
<div class="content-wrap">
<div layout:fragment="content">
</div>
</div>
<!-- /content -->
</div>
<!-- /tabs -->
</section>
I want this to reload my page and select the tab I clicked. I think it's not a big deal to do but I'm not verry powerful in web stuff.
Thank's
I'm trying to learn jQuery mobile. I tried to use data-transition used for page transition, but it's showing the default fade transition only for other transistion, even if i using other transitions like pop, flip etc
I'm able to view all transitions displayed on jQuery docs
Here's my html body :
<div data-role="page" id="page1" data-title="Page 1">
<div data-role="header">
<h1>Heading 1</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page</p>
<!-- Have used `data-transistion` below -->
Page 2
<br/>
Pop Up
</div>
<div data-role="footer">
<h1>Footer 1</h1>
</div>
</div>
<div data-role="page" id="page2" data-theme="b" data-title="Page 2">
<div data-role="header">
<h1>Heading 2</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the page 2</p>
Page 1
<a data-role="button" data-rel="back">Back</a>
</div>
<div data-role="footer">
<h1>Footer 2</h1>
</div>
</div>
<div id="popup" data-theme="b" data-title="Pop Up">
<div data-role="header">
<h1>Pop Up</h1>
</div>
<div data-role="content">
<p>Hi! I'm the content in the Pop Up</p>
Page 1
</div>
<div data-role="footer">
<h1>Pop Up</h1>
</div>
</div>
What am i doing wrong?
I have a page with a navBar and a footer like the screenshot :
The code simplify of this page, which is the same for the pages agenda / people / info is :
<div data-role="page" data-id="access-dataid" id="page-infos-access" data-theme="a">
<div data-role="header" data-id="header-app" data-position="fixed">
<div data-role="navbar" data-id="head-navbar">
<ul>
<li>Access</li>
<li>Contact</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="a">
</div>
<div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Agenda</li>
<li>People</li>
<li>Infos</li>
</ul>
</div>
</div>
</div>
<div data-role="page" data-id="contact-dataid" id="page-infos-contact" data-theme="a">
<div data-role="header" data-id="header-app" data-position="fixed">
<div class='ui-title'>
<div data-role="navbar" data-id="head-navbar">
<ul>
<li>Access</li>
<li>Contact</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="a">
</div>
<div data-role="footer" data-id="f1" class="custom-tabbar-icon" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Agenda</li>
<li>People</li>
<li>Infos</li>
</ul>
</div>
</div>
</div>
Basically for the navBar menu I hide and show part of the html but I don't load a new page. Everything works fine, I can change from the navBar item "Access" to "Contact".
The problem is when I click at the bottom, and load a new page like "people.html", the navBar items which use exactly the same system don't work. I see the new page but when I click on the top item, nothing happen, like the JS bug...
Any idea ?
I've been searching for a solution on the internet but I didn't find any.
In my jQuery Mobile application, I have multiple HTML files each one representing a page to keep the workflow clean, therefore I use AJAX for navigation.
I have a button on a map in my page fleet.html (3rd in navigation) that opens a dialog, the opening process is done with javascript, only when I click on the button it shows me a blank dialog with no text and no buttons in it.
Here's fleet.html :
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
</div><!-- END page -->
And here's how I open the dialog :
function onSelectFeature() {
$("#fleetPage #deviceInfoDialog").dialog();
$.mobile.changePage($("#fleetPage #deviceInfoDialog"), {
transition: "slidedown"
});
}
Move your dialog div outside of the page div. Add a hidden link that when clicked would open the dialog. Rework your script function to emulate that link getting clicked.
I tested this and it works fine:
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"> onSelectFeature</div>
</div><!-- END map-container -->
</div><!-- END content -->
<script>
function onSelectFeature() {
$("#lnkDeviceInfoDialog").click();
}
</script>
<a id='lnkDeviceInfoDialog' href="#deviceInfoDialog" data-rel="dialog" data-transition="slidedown" style='display:none;'></a>
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
Try this
function onSelectFeature() {
$.mobile.changePage( "#deviceInfoDialog", { role: "dialog", transition: "slidedown" } );
}
And your html should be like this
<div data-role="page" id="fleetPage" class="no-bg">
<div data-role="header" data-theme="b">
<h1>Flotte</h1>
</div>
<div data-role="content" data-theme="a">
<div class="map-container">
<div id="fleet-map"></div>
</div><!-- END map-container -->
</div><!-- END content -->
</div><!-- END page -->
<div data-role="dialog" id="deviceInfoDialog" data-theme="b" data-close-btn="right">
<div data-role="header" data-theme="b">
<h3>Informations</h3>
</div>
<div data-role="content">
<p>POI Infos</p>
</div>
</div>
Trying to learn popup and found that JQM popup "Dialog" sample doesn't work - nothing appears when I press button "Delete page...".
My html body is:
<div data-role="page" id="page_test1" data-theme="b">
<div data-role="content">
Delete page...
</div> <!-- /content -->
</div> <!-- /page -->
<!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom 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> <!-- content -->
</div> <!-- popup -->
As you can see, my portion of html is a bit.
You can find such behaviour of popup here - http://jsfiddle.net/vbulash/YkEAj/
The popup must be inside the data-role="page" container.
<div data-role="page" id="page_test1" data-theme="b">
<div data-role="content"> Delete page...
</div>
<!-- /content -->
<!-- Exactly copied from http://view.jquerymobile.com/1.3.1/dist/demos/widgets/popup/ (sample "Dialog") -->
<div data-role="popup" id="popupDialog" data-overlay-theme="a" data-theme="c" data-dismissible="false" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Delete Page?</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom 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>
<!-- content -->
</div>
<!-- popup -->
</div>
<!-- /page -->
http://jsfiddle.net/YkEAj/1/