I have the following:
<body id="body">
<div data-role="header" id="header">
<div data-role="navbar" id="navbar">
<ul>
<li><a class="ui-state-persist ui-btn-active" data-ajax="true" href="#pagex">Ouch</a></li>
<li><a class="ui-state-persist " data-ajax="true" href="#pagey">Wow</a></li>
</ul>
</div>
</div>
<div data-role="page" id="pagex">
</div>
<div data-role="page" id="pagey">
</div>
</body>
Note the toolbar is external. So to make the current page active I have the following javascript:
$(document).on('pageshow',function(event,ui){
// disable previous selected links
$('[data-role=navbar] a').removeClass("ui-btn-active");
var menuLink = $('[data-role=navbar] a[href="#'+$.mobile.activePage.attr('id')+'"]');
menuLink.addClass("ui-btn-active");
});
Unfortunately, it still doesn't work. The menu item will highlight briefly and then go back to normal.
Following the demo here: Updating toolbar contents
you just need to put your code inside the pagecontainerchangeevent, as follows:
$(document).ready(function() {
$("#navbar").navbar();
$("#header").toolbar();
});
$( document ).on( "pagecontainerchange", function(e, ui) {
$("#navbar ui-btn-active").removeClass("ui-btn-active");
var toPage = "#"+$(ui.toPage).attr("id");
$("#navbar a[href="+toPage+"]").addClass("ui-btn-active");
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="header" data-theme="a" id="header">
<div data-role="navbar" data-theme="a" id="navbar">
<ul>
<li><a class="ui-state-persist ui-btn-active" href="#pagex">Ouch</a></li>
<li><a class="ui-state-persist" href="#pagey">Wow</a></li>
</ul>
</div>
</div>
<div id="pagex" data-role="page">
<div role="main" class="ui-content">
Page x
</div>
</div>
<div id="pagey" data-role="page">
<div role="main" class="ui-content">
Page y
</div>
</div>
</body>
</html>
Related
I want to open a jquery-mobile dialog programmtically. I tried to do:
$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance
This is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p>Is this a question?</p>
</div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</body>
</html>
This is my jsfiddle page: http://jsfiddle.net/kK24p/
All I want to do is open the dialog using js instead of the button.
If someone could help me it would be great.
Thanks a lot in advance.
Working examples:
Solution 1
Page 1: - index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p>Open dialog</p>
</div>
</div>
</body>
</html>
Page 2: - dialog.html
<div data-role="page">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
Solution 2
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-dialog', function(){
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a id="open-dialog" data-role="button">Onen dialog</a></p>
</div>
</div>
<div data-role="dialog" id="jenia-dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
</body>
</html>
Correct way of programatically opening dialogs requires changePage function, like this:
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
Same thing works if you need to open external dialog:
$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});
I did couple of changes to your code please refer it. I removed the closing tag for opening div <div data-role="content"> in first page. It is wired but solve it in the future and the next point is you cannot load external page like that in a popup. Please refer this link How to load an external page in JQM popup
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
Is this a question?
</div>
<div data-role="popup" id="dialog-jenia">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
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’m currently working on a jQuery mobile page.
I need to display an error message in a dialog, which works perfectly in FF and IE.
But when I open the page in chrome, the dialog will close automatically.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Header</title>
<meta name="viewport" id="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div id="errorDialog" data-role="dialog" data-close-btn="right" data-theme="a">
<div data-role="header">
<h1>Error</h1>
</div>
<div data-role="content">
<p>Error Message...</p>
</div>
</div>
</body>
</html>
Am I doing something wrong?
it might be the issue with the jquerymobile version you are using.try with the below code:
<link rel=stylesheet href=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css />
<script src=http://code.jquery.com/jquery-1.6.min.js></script>
<script src=http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js>
</script>
<script type="text/javascript">
$(document).ready(function () {
setTimeout(function () {
$.mobile.changePage('#errorDialog', { transition: 'pop', role: 'dialog' });
}, 100);
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Home</h1>
</div>
<div data-role="footer" data-position="fixed">
<h4>Footer</h4>
</div>
</div>
<div id="errorDialog" data-role="dialog" data-close-btn="right" data-theme="a">
<div data-role="header">
<h1>Error</h1>
</div>
<div data-role="content">
<p>Error Message...</p>
</div>
</div>
</body>
</html>
I´m developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the "pageshow" event to the page div:
<!DOCTYPE HTML>
<html>
<head>
<title>Funil de Vendas</title>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="lib/jquery.mobile-1.3.0.min.js"></script>
<script>
var nice = false;
$(document).ready( function(){
$("#other_page").bind('pageshow',function() {
alert('The page was called!');
});
});
</script>
</head>
<body>
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
</div>
<div data-role="page" class="Page" id="other_page">
<div data-role="content">
...
</div>
...
...
...
</div>
</body></html>
How can I do the same using multiples HTML files. I cannot bind to the page the because this div is in another HTML file.
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
Thanks in advance!
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I'm working with jQuery Mobile pop ups and for some reason when I load the page one or more of the pop ups is not hidden. I have tried closing the pop ups on page init but this does not seem to work. Can anyone explain what is causing this.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pop Up</title>
<link rel="stylesheet" href="http://jquerymobile.com/test/css/themes/default/jquery.mobile.css"
/>
<link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"
/>
<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jquery.mobile.datebox.min.css"
rel="stylesheet" />
<link type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css"
rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0/js/jquery.mobile-1.2.0.js"></script>
</head>
<script>
$(document).bind("pageinit", function () {
$('#popup1').popup('close');
$('#popup2').popup('close');
});
</script>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f" data-position="fixed">
<div class="ui-grid-a" style="margin:15px 0px">
<div class="ui-block-a">
Pop 1
</div>
<div class="ui-block-b">
Pop 2
</div>
</div>
<!--grid-->
</div>
<!-- /header -->
<div data-role="content">
<div data-role="popup" id="popup1" data-theme="a">
<ul data-role="listview" id="cityList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li name='test value' value="us">11</li>
<li name='test value' value="us">12</li>
<li name='test value' value="us">13</li>
<li name='test value' value="us">14</li>
</ul>
</div>
<div data-role="popup" id="popup2" data-theme="a">
<ul data-role="listview" id="genreList" data-inset="true" style="min-width:210px;"
data-theme="b">
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
</ul>
</div>
<div class="content-primary"></div>
<!--content-primary-->
</div>
<!--content-->
<div data-role="footer" class="footer-docs" data-theme="c" data-position="fixed"></div>
<!--footer-->
</div>
<!-- /page -->
</body>
The Inclusion of the following external libraries fixed the problem:
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/css/themes/default/jquery.mobile-1.2.0-alpha.1.css" />
<link rel="stylesheet" href="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/css/jqm-docs.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/docs/_assets/js/jqm-docs.js"></script>
<script src="http://jquerymobile.com/demos/1.2.0-alpha.1/js/jquery.mobile-1.2.0-alpha.1.js"></script>
I had similar issue and got it solved by initiating the popup after document ready.
$(document).ready(function(){
$( "#popupDialog" ).popup();
});