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
});
Related
I replace a listview item in a jQuery mobile page based on some condition (date of the month, whatever) and I appear to be able to apply the styling only partially. The example below formats the new listview item partially correct, the link is missing its styling. What I am missing here?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../js/jquery.mobile-1.4.0-beta.1.min.css"/>
<script src="../js/jquery-1.10.2.min.js"></script>
<script src="../js/jquery.mobile-1.4.0-beta.1.min.js"></script>
<script type="text/javascript">
$(document).delegate("#index", "pageinit", function() {
var newItem;
if (false) {
newItem = $("#templ1")[0].innerHTML
} else {
newItem = $("#templ2")[0].innerHTML
}
$("#item1")[0].innerHTML = newItem;
$("#item1").parent().listview("refresh");
});
</script>
<meta charset="utf-8">
</head>
<body>
<div data-role="page" id="index">
<script id="templ1" type="text/template">
<li id="item1">item1 templ1</li>
</script>
<script id="templ2" type="text/template">
<li id="item1">item1 templ2</li>
</script>
<div data-role="header" data-position="fixed">
<h1>test</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li data-role="list-divider">divider 1</li>
<li id="item1">item1</li>
</ul>
</div>
</div>
</body>
</html>
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();`
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 am trying to figure out how to use $.mobile.loadPage. I am having problem loading external page. Here is my code snippet:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width; initial-scale=1">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
<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>
function loadme () {
$.mobile.loadPage( "external.html", {pageContainer: $('#homecontent')} );
}
///////////////////////////////////////////////////////////////////
$(document).bind ("pagebeforeload", function (event, data) {
alert ("ext - pagebeforeload");
});
$(document).bind ("pageload", function (event, data) {
alert ("ext - pageload");
});
$(document).bind ("pageloadfailed", "#page2", function (event, data) {
alert ("pageloadfailed");
});
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-id="myheader" data-position="fixed">
<h1>Home Page</h1>
</div>
<div data-role="homecontent">
<span onclick="loadme();" style="cursor:pointer;">load me</span>
</div>
<div data-role="footer" data-id="myfooter" data-position="fixed">
<h1>footer</h1>
</div>
</div>
<div data-role="page" id="page2" data-add-back-btn="true">
<div data-role="header" data-id="myheader" data-position="fixed">
<h1>Page 2</h1>
</div>
<div data-role="page2content">
</div>
<div data-role="footer" data-id="myfooter" data-position="fixed">
<h1>footer</h1>
</div>
</div>
</body>
</html>
Below is the error that I got
XMLHttpRequest cannot load
file:///C:/Documents%20and%20Settings/.../external.html. Origin null
is not allowed by Access-Control-Allow-Origin.
I am testing on local desktop. Any suggestions are welcome. Thanks in advance
Your browser has some limitations preventing certain types of interactions will local files. Assuming you are using Chrome, you need to add a command line option to enable this type of access. In windows it would be:
chrome.exe --allow-file-access-from-files
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;
});