I am building a phonegap app for Android using jquery mobile and having some
trouble with fixed footers.
Please see the HTML code below.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="js/jquery-1.7.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<form id="searchform" action="" method="post" onsubmit="return false;"
data-ajax="false">
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
</form>
<script type="text/javascript">
$('.city').each(function() {
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
});
</script>
</div><!-- /content -->
<div data-role="footer" data-position="fixed"
data-tap-toggle="false">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#help" data-icon="info"
data-transition="none">Help</a></li>
<li><a href="#help" data-icon="star"
data-transition="none" >Favorites</a></li>
<li><a href="#help" data-icon="arrow-r"
data-transition="none" >Results</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
<div data-role="page" id="help">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Help</h1>
</div><!-- /header -->
</div>
</div>
</body>
</html>
There is a long form containing several fields including checkboxes, radio buttons, select lists etc. (using repeated select lists here to simulate). There is a fixed footer at the bottom. Things work fine on desktop browsers. But when I test on my phone having Android 2.3 I observe strange behaviour. Assuming the footer is hiding the select list underneath , if I click on any of the tabs on the navbar, the select list pops up whereas I would expect a transition to a new page. This is as if the select list is getting the click event instead of the footer. This is very annoying to the user. I have searched google but haven't seen this problem reported elsewhere.
Updated the solution yet again.
/* HACK: when clicked on navbar the select list underneath pops up
for some reason. So we just hide all content as soon as
we click on navbar and then show it whenever we load new page*/
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
if($("body").data("hold-flag") == true) {
$("body").data('hold-flag', false);
return;
}
if($(e.target).closest("[class='ui-btn-inner']").length > 0 ||
$(e.target).closest("[class~='ui-btn-right']").length > 0 ||
$(e.target).closest("[class~='ui-btn-left']").length > 0) {
$('[data-role="content"]').hide();
}
});
$(document).bind('taphold', function(e) {
/* set a flag to mark this as a taphold event */
/* BIG assumption: a 'tap' event is always fired after a
taphold event */
$("body").data('hold-flag', true);
e.preventDefault();
return false;
});
I found a workaround. I added following code. Essentially I am testing whether there has been click in the footer area. If yes then I simply hide the contents of the page. This seems to stop the annoying pop-up select list. Of course the hidden page contents must be restored after page transition is complete. I am not sure how portable and/or robust this code is. Would appreciate comments from experienced developers.
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
/* find the footer for this page*/
var footer = $(e.target).
closest('[data-role="page"]').
find('[data-role="footer"]');
var offset = footer.offset();
var scroll = e.pageY - e.clientY;
var pos = offset.top - scroll;
if(e.clientY > pos) {
//click in footer area
$('[data-role="content"]').hide();
}
});
Simplified 'tap' event handler. This also handles clicks in header area now.
$(document).bind('tap', function(e) {
if($(e.target).closest("[data-role='footer']").length > 0 ||
$(e.target).closest("[data-role='header']").length > 0) {
$('[data-role="content"]').hide();
}
});
Related
I am creating a collapsible set dynamically. Like below
div = '<div data-role="collapsible" data-inset="false" data-iconpos="right" data-collapsible="true" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d"><h3>'+
row1["name"]+'<span class="ui-li-count ui-btn-up-c ui-btn-corner-all" data-iconpos="right">'+count+'</span></h3></div>';
Now i need to add a button to the each collapsible set and upon clicking on the button i need to get the collapsible element content but collapsible list should not expand.
How can i do that?
Thanks:)
Example
Working example: http://jsfiddle.net/Gajotres/z3hsb/
Description
What you need to understand here is how to use:
e.stopPropagation();
e.stopImmediatePropagation();
Your current problem is that click event is propagating through button and hitting collapsible, which in turn opens/closes it. It can be prevented with if functions stopPropagation() and stopImmediatePropagation() are used.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<div id="List" data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div id='ListItem' data-role='collapsible' data-content-theme='b' data-collapsed='true'>
<h3><p>Title</p>
<div id="button-set">
<input type='button' data-theme='b' value='Settings' data-mini='true' data-inline='true' data-icon='gear' data-icon-pos='top' id="show-content"/>
</div>
</h3>
<p>CONTENT</p>
</div>
</div>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#index', function(){
$('#show-content').on('click', function(e) {
alert($('#ListItem').find('h3 p').text());
e.stopPropagation();
e.stopImmediatePropagation();
});
});
CSS:
#button-set {
float:right;
margin-top: -20px;
}
I'm just starting out in jQM development and have hit a bit of a brick wall.
In short, I have a javascript file and two pages. In the main page (index.html) I'm populating a listview dynamically, and registering the tap event for each and every item for this listview. The on tap event, in return, calls the changepage method to an external page (details.html). This works fine 100% of the time.
In the javascript file, I'm registering for events on pagebeforeshow for the details.html page. This works okay first time out, but any subsequent calls are not triggering the pagebeforeshow event at all. Having had a closer look i can see that the pagechange is being called, pagebeforechange event is being fired okay, but the pagebeforeshow is only fired for that particular item only (untill a complete refresh).
I have set up a sample for you to be able to look at. I would seriously appreciate any feedback given. For all I know - I may be using the wrong events!?
The closest post I could find on SO was Pagebeforeshow not fired on second time change Page event however it doesn't particularly deal with listviews so I'm not sure if it's related or not.
Thanks,
Matt
Index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="idxPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<ul id="ListItems" data-role="listview" data-inset="true" data-filter="true">
</ul>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
details.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<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-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="jquery.custom.js" type="text/javascript"></script>
</head>
<body>
<!-- All Stock Search -->
<div id="detailsPage" data-role="page" style="height:50px;" data-title="Main Menu">
<div data-role="header" class="sixteen columns">
Home
<h1>
Test
</h1>
</div>
<div data-role="content" style="text-align:center;">
<b>Page placeholder</b>
</div><!-- /content -->
<footer>
<div data-role="footer" data-id="connfooter" class="ui-footer ui-bar-a" role="contentinfo">
<h4 style="text-align: left;" class="ui-title" tabindex="0" role="heading" aria-level="1">
</h4>
</div>
</footer>
</div>
</body>
jquery.custom.js (JS Library)
$(document).on("pagebeforechange", function (event, data) {
alert('changing page...');
});
$(document).on('pageinit', function () {
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
$("#ListItems").off();
$("#ListItems").on("listviewbeforefilter", function (e, data) {
var $ul = $(this),
$input = $(data.input),
value = $input.val(),
html = "";
$ul.html("");
if (value && value.length > 2) {
$ul.html("<li><div class='ui-loader'><span class='ui-icon ui-icon-loading'></span></div></li>");
$ul.listview("refresh");
var max = 200;
var limit = 0;
var itemslist = [
{"id":1, "desc":"item1"},
{"id":2, "desc":"item2"},
{"id":3, "desc":"testitm1"},
{"id":4, "desc":"testitm2"}
];
$.each(itemslist, function (i, val) {
if (limit < max) {
if (val.desc.toString().toLowerCase().indexOf(value.toLowerCase()) != -1) {
$ul.append('<li id="' + val.id + '" ><a style="text-align:left" data-icon="arrow-r" data-iconpos="right" >' + val.desc + '</a></li>');
$('#' + val.id).off();
$('#' + val.id).on('tap', function (event) {
var elementId = $(this).attr('id');
$.mobile.changePage("details.html?Id="+elementId, { data: { "Id": elementId} });
});
limit++;
}
}
});
$ul.listview("refresh");
$ul.trigger("updatelayout");
}
});
});
You are incorrectly binding page event.
Instead of this:
$("#detailsPage").off();
$("#detailsPage").on("pagebeforeshow", function(event){
alert('about to show page...');
});
Use this:
$(document).on("pagebeforeshow", "#detailsPage",function(event){
alert('about to show page...');
});
Remember, jQuery Mobile page events must always be added with event delegation.
Also your don't need to use off() with page events, they do not suffer from multiple event binding problem. If you have more question feel free to ask in comments.
I'm trying to pass form slider values between pages so that the changed settings can be used in the target page. For that I'm just accessing the DOM on the same page as explained in the answer here.
Here is my sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/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('pageinit', '#review', function() {
$('form').submit(function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$.mobile.changePage('#front');
return false;
});
});
$(document).on('pageinit', '#front', function() {
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
});
</script>
</head>
<body>
<!-- ======================== -->
<div data-role="page" id="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
Main
</p>
</div>
</div>
</body>
</html>
This seems to work the first time and the changed setting would show on the 'front' page, but not on subsequent page calls. I tried other JQM page events than 'pageinit' but can't get this to work.
I played around with your example and got it working. I used this info from the docu
Form buttons
For ease of styling, the framework automatically converts any button
or input element with a type of submit, reset, or button into a custom
styled button — there is no need to add the data-role="button"
attribute. However, if needed, you can directly call the button plugin
on any selector, just like any jQuery plugin:
$('[type="submit"]').button();
which results in this script
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
complete corrected version of your example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/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>
</head>
<body>
<div data-role="page" id="review" data-theme="a">
<div data-role="header">
<h1>Review</h1>
</div>
<p>
Review content
</p>
<div data-role="content" data-theme="a">
<form>
<label for="first_slider">First:</label>
<input type="range" id="first_slider" value="60" min="0" max="100" />
<label for="second_slider">Second:</label>
<input type="range" id="second_slider" value="60" min="0" max="100" />
<input type="submit" value="Submit" />
</form>
</div>
</div>
<!-- ======================== -->
<div data-role="page" id="front" data-theme="a">
<div data-role="header">
<h1>Front</h1>
</div>
<div data-role="content" data-theme="a">
<p>
Front content
</p>
<p id='first_count'></p>
<p id='second_count'></p>
<p>
Main
</p>
</div>
<script>
$(document).bind('pageinit');
</script>
</div>
<script>
$('[type="submit"]').bind( "click", function() {
first_count = $('#first_slider').val();
second_count = $('#second_slider').val();
$('#first_count').text('' + first_count);
$('#second_count').text('' + second_count);
$.mobile.changePage('#front');
return false;
});
</script>
</body>
</html>
screenshot
Here is an example HTML page that demonstrates the issue:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>My Title</h1>
</div><!-- /header -->
<div data-role="content" id="cp">
<form id="form">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
<legend>Test 1:</legend>
<input type="radio" name="r1" id="r1a" value="none" checked="checked" /><label for="r1a">A</label>
<input type="radio" name="r1" id="r1b" value="detail"/><label for="r1b">B</label>
<input type="radio" name="r1" id="r1c" value="measure"/><label for="r1c">C</label>
</fieldset>
</div>
</form>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$(document).ready(function() {
var form = $('#form');
form.append('<div data-role="fieldcontain">');
form.append(' <fieldset data-role="controlgroup" data-type="horizontal">');
form.append(' <legend>Test 2:</legend>');
form.append(' <input type="radio" name="r2" id="r2a" value="none" checked="checked" /><label for="r2a">A</label>');
form.append(' <input type="radio" name="r2" id="r2b" value="detail"/><label for="r2b">B</label>');
form.append(' <input type="radio" name="r2" id="r2c" value="measure"/><label for="r2c">C</label>');
form.append(' </fieldset>');
form.append('</div');
form.trigger('create');
});
</script>
</body>
</html>
Save this page and load it in a borwser. You will see that the "Test 1" radio list comes up horizontal (as it should because of the data-type="horizontal" attribute). However the "Test 2" radio list, which is added dynamically, comes up vertically, which is the default setting. It seems the data-type="horizontal" has no effect on the dynamically created radio list.
Is there a refresh or event anyone knows about which I should trigger somewhere in the DOM to get this to work?
The problem is the way you are adding your new elements to the form. If you change your javascript function to this you'll see that it works:
$(document).ready(function() {
var form = $('#form');
var newElement = '';
newElement += '<div data-role="fieldcontain" data-type="horizontal">';
newElement += ' <fieldset data-role="controlgroup" data-type="horizontal">';
newElement += ' <legend>Test 3:</legend>';
newElement += ' <input type="radio" name="r3" id="r3a" value="none" checked="checked" /><label for="r3a">A</label>';
newElement += ' <input type="radio" name="r3" id="r3b" value="detail"/><label for="r3b">B</label>';
newElement += ' <input type="radio" name="r3" id="r3c" value="measure"/><label for="r3c">C</label>';
newElement += ' </fieldset>';
newElement += '</div>';
form.append(newElement);
form.trigger('create');
});
Think about it this way: Each time the append() function is used the browser attempts to add whatever you've given it to the DOM. But because you have broken your elements across different calls to append() the browser has to try to make sense of it. So when you have this:
form.append('<div data-role="fieldcontain">');
The browser sees that you've left off a closing div tag and tries to fix it for you by adding it. This means your next call to append() will not go inside the div you just added but after it because the browser has automatically closed it for you.
You should add complete, well-formed elements to avoid this issue.
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>