I have a simple index.html with two pages...
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-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.10.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div></div>
</div>
<div data-role="page" id="page2">
<div></div>
</div>
</body>
</html>
Page1 has a button.. And when user click on it, I call js function.
function openPage2() {
}
This function should load page2. How to do that ?
I tried
$.mobile.changePage("page2.html");
but its not working...What I do wrong ?
Working example: http://jsfiddle.net/Gajotres/gQbLw/
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<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="page1">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
Next
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Javascript:
$(document).on('pagebeforeshow', '#page1', function(){
$(document).on('click', '#next-page', function(){
$.mobile.changePage("#page2");
});
});
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 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
});
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
When run, if I click the link at the bottom of the index page to get to the map page, I see the map briefly, filling a quarter of the screen, before it vanishes. What am I doing wrong?
Here is the code for the index page, which creates the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript">
function initialize(){
if(!window.navigator.onLine){
alert("An internet connection is required to use the MetPetDB App. Please find a connection and reopen the app.");
var element = document.getElementById("mainPage");
element.parentNode.removeChild(element);
document.getElementById("mainBody").innerHTML = "<p>An internet connection is required to use this app.</p>";
}
}
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type="text/javascript">
// When map page opens get location and display map
$('.page-map').live("pagecreate", function() {
initializeMap(42,-73);
});
function initializeMap(lat,lng) {
var latlng = new google.maps.LatLng(lat, lng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
}
</script>
</head>
<body id="mainBody" onload="initialize()">
<div id="mainPage" data-role="page" data-theme="e">
<div data-role="header">
<!-- <img src="headerlogo.png" />-->
<br />
<p style="text-align:center">To begin searching for samples, select one of the following search methods.</p>
</div>
<div data-role="content" style="height: 100%;">
<a data-role="button" data-theme="a" href="useMyLocation.html">Use My Location</a>
<a data-role="button" data-theme="a" href="InputCoordinates.html">Input Coordinates</a>
<a data-role="button" data-theme="a" href="selectRegion.html">Select Region</a>
Testing
</div>
</div>
</body>
</html>
And here is the map page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
</head>
<body>
<div data-role="page" data-theme="e" class="page-map" style="width:100%; height:100%;">
<div data-role="header"><h1>Map Page</h1></div>
<div data-role="content" style="width:100%; height:100%; padding:0;">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>
</div>
</body>
</html>
The following code works: jsfiddle
I took your code, simplified it (using a single page template instead of the multi page one, but just to make it easier for jsfiddle) and moved all scripts inside the head.
Also be careful with phonegap, you should handle the onDeviceReady event, and not the body onload event. Even then there's a different method there to check if you're online.
I Am trying to fill jquery mobile listivew using knockoutjs library, but my problem is the header of the list view(list-divider) is is repeated. I was wondering how to solve this issue,
this is my code and thanks for help.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-bind="foreach:seats" data-theme="b" data-filter="true"
>
<li data-role="list-divider">List </li>
<li>
</span>
</li>
</ul>
</div>
</div>
<script type="text/javascript">
function Reservation(reservationId, covers) {
var self = this;
self.reservationId = reservationId;
self.covers = covers;
}
function ReservationsViewModel()
{
var self = this;
self.seats = ko.observableArray();
self.fillReservations=function()
{
var mydata={
"result":[
{
"reservationId": "23424574367436523452345",
"covers" : "4"
},
{
"reservationId": "23424574367436523452345",
"covers" : "4"
}
]
};
$.each(mydata.result, function (index, value) {
self.seats.push(new Reservation(this.reservationId,this.covers));
});
}//End fillReservations
self.fillReservations();
}// End ReservationsViewModel
ko.applyBindings(new ReservationsViewModel());
</script>
</body>
</html>
Thanks for help.
I solved my problem by using containerless control flow syntax.
Try Like this :
<ul data-role="listview" id="ListSearch" data-divider-theme="b" data-inset="true" >
<li data-role="list-divider" role="heading">
Criteria Selected
</li>
<!-- ko foreach: Contacts -->
<li data-theme="c">
<a href="#page3" data-transition="slide">
<span data-bind="text: FirstName " ></span>
</a>
</li>
<!-- /ko -->
</ul>