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>
Related
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'm trying to configure a slide-panel jqm 1.3.1. I always created "one page-jqm"-Pages
one index.html and several
Now im trying to get the slide panel to work but when i add a second page, the page stuck in loading screen.
My code will explain what i mean:
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<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>
<!-- Page 1 -->
<div data-role="page" id="page1">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
I thank you all for your help in advance
cracker182
EDIT: browser console shows :
Uncaught TypeError: Cannot read property 'options' of undefined
EDIT2: I forgot to Close the page Divs, thank you very much Omar
I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well pertaining to the anchor tags...
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<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>
<!-- Page 1 -->
<section id="firstpage" data-role="page">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
<p>This is page 1</p>
<p>Go to second page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
</section>
<!-- Page 2 -->
<div data-role="page" id="secondpage">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
this is page 2
<p>Go to first page</p>
</div>
<div id ="footer" data-role="footer">
footer
</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/
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