I have a page called index.html, when I click the link in index html it will navigate to the another page which has Listview populated with data taken from Server. This Works without any error.
However, when I click the back button of current page, I will be directed to the previous page.
My question is, it refreshes current page and then go back to the previous page.
I need to prevent this.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
$.mobile.allowCrossDomainPages = true;
$.mobile.ajaxEnabled = true;
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: true, changeHash: true
});
});
});
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
</script>
</head>
<body>
<div data-role="page" id="reviewsPage">
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" data-ajax="false" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("pagehide", "div[data-role=page]", function(event) {
$(event.target).remove();
});
$(document).bind('pagebeforeshow', '#twitterPage', function(){
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
unbind all events
` $("#mybtn").unbind();`
Related
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<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>
<div data-role="page" id="reviewsPage">
<script language="text/javascript">
/* VERY IMPORTANT this is before loading jquery.mobile JS */
$(document).on("mobileinit", function() {
// Make your jQuery Mobile framework configuration changes here!
});
</script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).on("pagebeforeshow", function(event) {
$("#mybtn").bind("click", function(e) {
$.mobile.showPageLoadingMsg();
$.mobile.changePage("twitter.html", {
reloadPage: false, changeHash: true,
});
});
});
</script>
<div data-role="header">
<h1>Reviews</h1>
<a href="#" id="mybtn" class="ui-btn-right" >TWEET</a>
</div>
</div>
</body>
</html>
tweet.html:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<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>
<div data-role="page" id="twitterPage" >
<script type="text/javascript">
$(document).on("mobileinit", function() {
});
$(document).bind('pageshow', '#twitterPage', function(event, ui) {
$(document).on('click', '[data-rel=back]', function() {
$.mobile.changePage('index.html');
});
});
</script>
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous" >
Back
Home
</div>
<div data-role="content">
<ul id="tweet-list" data-role="listview" data-inset="true">
<li data-role="list-divider">
<p>
Tweets
</p>
</li>
</ul>
</div>
</div>
Here I have link when the link is clicked tweet.html file will be called. But when I clicked the back button I will be directed to the previous page without any error. But second time onwards when I click the back button I will be directed to the previous page and comes to the current page again.
$("#mybtn").unbind();`
unbind event will prevent this
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 have built a jQuery Mobile application, but I have one issue I don't understand.
I am using the multi-page functionality, but when you are in a page and you change the screen orientation, it jumps back to the start page. I do not understand how to stay on the current page when changing orientation.
I have tried this:
$(window).bind("orientationchange", function (e, ui)
{
var sPage ="#"+$.mobile.activePage.attr("id");
$.mobile.changePage(sPage);
alert(sPage);
});
The alert() showed the correct page where I want to stay.
Below is an example how is made the multipage. If i select the option 'Instellingen',
This pages showed. But when i change the smartphone orientation, it jumps back to the menu.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Mobile</title>
<link rel="stylesheet" href="../css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="../css/jquery.dataTables.css" />
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="../js/DataBase.js"></script>
<script type="text/javascript" src="../js/Webservice.js"></script>
<script type="text/javascript" src="../js/Misc.js"></script>
</head>
<body>
<div id="Menu" data-role="page" data-title="Hoofdmenu">
<div data-role="header">
<h1>Menu</h1>
</div>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Hoofd Menu</li>
<li><a href="#Instellingen"><h3>Instellingen</h3>
<p>Algemene programma instellingen</p></a></li>
</ul>
</div>
<div id="Instellingen" data-role="page" data-title="Instellingen">
<div data-role="header">
<h1>Programma instellingen</h1>
<a data-role="button" data-direction="reverse" data-rel="back" href="#Menu" data-icon="arrow-l" data-iconpos="left" data-theme="b">
Back</a></div>
<div data-role="content" data-theme="b">
<ul data-role="listview" data-inset="true" >
<li><div><h1>WCF adres<input id="Adress" type="url"/></h1> </div>
<div data-role="controlgroup" data-type="horizontal">
<a id="Test" data-role="button">Test</a>
<a id="Opslaan" data-role="button">Opslaan</a>
</div></li>
</ul>
<script type="text/javascript">
$(document).ready(function () {
$("#Test").click(function () {
if ($("#Adress").val().length > 0)
CheckWebService($("#Adress").val(), function (Check) { alert(Check); })
else
alert("Geen adres of error")
});
$("#Opslaan").click(function () { saveURL($("#Adress").val()); });
$("#Dummy").click(function () { alert("dummy"); });
$("#ResetDatabase").click(function () { $.mobile.showPageLoadingMsg("b", "Sync"); ResetDatabase(); });
});
</script>
</body>
</html>
I had the exact same issue for months, until today I added the screenSize parameter to the android manifest, as follows:
android:configChanges="orientation|screenSize|keyboardHidden"
Hope that helps!
I have an index page that dynamically loads a json object. if I go to a second page and then I try to go back to the index using back button I'd like to reload index page, so it reloads the json object that could be changed. This is my index.html page code:
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="js/jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
</head>
<body>
<div data-role="page" id="pagina">
<div data-role="header" data-position="fixed" data-theme="d">
<h1 style="font-size:14px">test</h1>
</div><!-- /header -->
<div data-role="content" id="content">
<ul data-role="listview" id="ul_id" data-theme="b" data-inset="true">
</ul>
</div><!-- /content -->
</div>
</body>
</html>
<script>
$.getJSON('http://www.test.com/test.php', function(data) {
var items = [];
$.each(data, function(key, val) {
$('#ul_id').append($('<li><h3>' + key + '</h3></li>'));
});
$('#ul_id').listview('refresh');
});
</script>
How can I do it?
You can utilize pagebeforeshow or pageshow event like so:
$(document).on("pagebeforeshow", "#pagina", function() {
//put your code here to manipulate the content
});
Stripped down code shows that I can change an attribute, in this case data-split-icon, but cannot get a refresh. Console.log show it has changed, so does the element view in chrome developer tools.
http://jsfiddle.net/mckennatim/MQ9rj/ 'Get' button simulates a programmatically created list. 'Change' button simulates changing an attribute.
Refresh, listview, trigger, create, pagecreate I try all combinations. Nothing works
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
</head>
<body>
<div id="thelists" data-role="page">
<div data-role="header">
<a href="#" data-icon="back" id="get" data-role="button" >get</a>
<h2>TestPage</h2>
change
</div><!-- /header -->
<div data-role="content">
<ul id="list" class="current" data-split-icon="gear" data-role="listview" data-filter="false"></ul>
</div><!-- /content -->
</div><!-- /page -->
<script>
$('#get').click(function() {
for (i=1; i<6; i++){
$('#list').append('<li><a>list</a><a class="orig">items</a></li>');
}
$('#list').listview('refresh');
return false;
});
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
//$('#list').listview();
//$('#list').listview('refresh');
$('#thelists').trigger('create');
$('#thelists').trigger('pagecreate');
$('#list').listview();
$('#list').listview('refresh');
return false;
});
</script>
</body>
</html>
Looks like jQM also adds some markup on the children span tags, try something like this
http://jsfiddle.net/phillpafford/MQ9rj/18/
JS
$('#change').click(function() {
console.log($('ul').attr('data-split-icon'));
$('#list').attr('data-split-icon', 'info'); //jqmData doesn't work either
console.log($('ul').attr('data-split-icon'));
$("[data-icon=gear]").each(function() {
var $this = $(this);
$this.attr('data-icon','info');
$this.children().children().removeClass('ui-icon-gear').addClass('ui-icon-info');
});
$('#list').listview('refresh',true);
return false;
});