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>
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?
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/
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);
I have various pages in html like this
<body onload="init()">
<div data-role="page" id="home">
<div data-role="header">
<h1>Here is the index page.</h1>
</div>
<div data-role="content">
<p><center>Below you may transition to our other pages.</center></p>
About Me
</div>
</div>
<div data-role="page" id="about">
<div data-role="header">
<h1>About Us</h1>
</div>
<div data-role="content">
Back Home
</div>
</div>
</body>
Now i need to grab the id of the page which is shown currently... How to do that?
Have you tried: $.mobile.activePage.attr('id')
Any of these:
$('div:jqmData(role="page").ui-page-active').attr('id');
$('.ui-page-active').attr('id');
should also do.