Using jQuery mobile I'm creating a simple form that displays a collapsible list of car brands. Under this collapsible list will be the different models of the car brand. When one clicks/touches the car model, I want to be able to load to another page that will display some statistics of the certain car model. I'm not quite sure how to link to another page/HTML file. This is what I have so far:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<style>
a.test {
font-weight: bold;
}
</style>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- view port sets the bar as wide as the screen -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="jquery.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Dream Ride</h1>
</div><!-- /header -->
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h1>Honda</h1>
//code to link to other HTML files or pages
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>BMW</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Mercedez</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Audi</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Ferrari</h3>
<p>sdfsdf</p>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
<h3>Lamborghini</h3>
<p>sdfsdf</p>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
I'm assuming your talking about loading a page without reloading the whole document. To do that with jQuery Mobile create another <div data-role="page"> and give it an id attribute. In your first page just link to it with an anchor tag:
Example:
<div data-role="page" id="one">
<div data-role="content">
<h1>Page One</h1>
Go to page two
</div>
</div>
<div data-role="page" id="two">
<div data-role="content">
<h1>Page Two</h1>
Go to page one
</div>
</div>
Demonstration on JSFiddle: http://jsfiddle.net/VaeCL/
Related
I'm trying to create a live-search text box that will allow me to search my collapsible list menu, along with the nested collapsible in the HTML page.
Here is the HTML Code that I'm using (note it includes a .js and .css from external links)
<!DOCTYPE html>
<html>
<head>
<title>Experts List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<style>
html, body {
padding: 0;
margin: 0;
}
html, .ui-mobile, .ui-mobile body {
height: 765px;
}
.ui-mobile, .ui-mobile .ui-page {
min-height: 765px;
}
.ui-content {
padding: 10px 15px 0px 15px;
}
</style>
</head>
<body>
<div>
<div role="main" class="ui-content">
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
<h3>Category</h3>
<p>Description</p>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Sub-Category</h3>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Location</h3>
<p>Point of Contact</p>
</div><!-- /section 1A -->
</div><!-- /section 1 -->
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
<h3>Subject</h3>
<p>Description</p>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Sub Category</h3>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Location</h3>
<p>Point of Contact</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
<h3>Subject</h3>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Section</h3>
<p>Defenition</p>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Location</h3>
<p>Point of Contact</p>
</div>
</div>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Subject2</h3>
<p>Defenition2</p>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Location2</h3>
<p>Point of Contact 2</p>
</div>
</div>
</div>
<div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
<h3>Subject 3</h3>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Section 3</h3>
<p>Definition 3</p>
<div data-role="collapsible" data-theme="a" data-content-theme="a">
<h3>Location 3</h3>
<p>Point of Contact 3</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I already tried using and creating a live search in the HTML using the following code (along with .js and .css) from below. The only problem is that when I search through the HTML page using the text box it un-collapses all the sections. And when I delete any input in the text box it just stays as is, it doesn't revert back to it's original collapsed form.
Here is the jfiddle link https://jsfiddle.net/Lxt22gw1/
Can anyone help or at least point me in the right direction of what needs to be coded for the live search to search everything as upon deleting input it reverts the HTML back to the original collapsed version?
Thanks!
As it stood, it looks like your jQuery expression was faulty. I changed it in a fork of your fiddle, and that seemed to work: https://jsfiddle.net/dgaz8n5k/
The faulty code was [data-search-term *= ' + searchTerm + '], which I changed to [data-search-term*="' + searchTerm + '"].
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>
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/
Hello I am developing a jQuery mobile app and Here is the situation
<script>
function showPanel(info) {
alert(info.id);
alert($(info).next()[0].id);
}
</script>
<div data-role="footer" id="footer_button" onclick="showPanel(this);">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<div id="footerhigher1">
<div id="footerinner1"></div>
</div>
Now in this code onclick event of the first div I am passing this from which I am extracting the id of the first div and by the next() mothod of jQuery I am fetching the ID of the next div. Now I also want to get the id of the child whose ID is footerinner1 So how can I take that ID
I have multiple combination like these in single page
more Explicit View
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button1">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher1" class="higher">
<div id="footerinner-1-1" class="inner"></div>
<div id="footerinner-1-2" class="inner"></div>
</div>
</div>
<!-- /page -->
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button2">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher2" class="higher">
<div id="footerinner-2-1" class="inner"></div>
<div id="footerinner-2-2" class="inner"></div>
</div>
</div>
<!-- /page -->
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div>
<!-- /content -->
<div data-role="footer" id="footer_button3">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher3" class="higher">
<div id="footerinner-3-1" class="inner"></div>
</div>
</body>
</html>
You asked how to do it with jquery-style event handling:
$('#footer_button').on('click', function() {
var $this = $(this);
alert($this.attr('id');
// traversing the dom etc.
});
Also updated html:
<div data-role="footer" id="footer_button">
<h4 style="text-align: center;">Open toolbar</h4>
</div>
<!-- ... -->
<div id="footerhigher1" class="higher">
<div id="footerinner1" class="inner"></div>
</div>
try this
alert($(info).next().children('div').attr('id'));
May this work :
alert($(info).next().children().eq[0].id);