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.
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
I'm doing rel="external" on the link that opens this page, so the DOM reloads which should rule out a lot of problems.
Nevertheless, with the following code I get a huge red background with a nice header and footer-- the map just doesn't initialize despite that the function is being called. Can anyone spot the problem? This bug has been holding me up forever; I've tried a million things including redesigning it as a multipage template without rel="external", but that didn't work either.
<!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">
$(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);
var crosshairLayer = new google.maps.KmlLayer('http://freezoo.alwaysdata.net/justcrosshair2.kml',
{preserveViewport: true});
crosshairLayer.setMap(map);
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
}
</script>
</head>
<body>
<div data-role="page" data-theme="e" data-add-back-btn="true" class="map1" id="testing">
<div data-role="header"><h1>Map Page</h1></div>
<div id="content" style="position:absolute; bottom:40px; top:40px; left:0px; right:0px; background:green;">
<div id="map_canvas" style="position:absolute; top:0px; bottom:0px; width:100%; background:red;"></div>
</div>
<div data-role="footer" style="position:absolute; bottom:0px; width:100%;">
<h1>Working!</h1>
</div>
</div>
</body>
</html>
Your code doesn't load the google maps script. Like this for example:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
The html below generates a google map. However, when I hover over the map, the cursor does not change from an arrow to a hand like the one in the jquery mobile example http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map. I am testing on Safari under the iPhone user agent.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="shortcut icon" href="/assets/favicon.ico" type="image/x-icon" />
<link href="/assets/gmaps4rails.css" media="screen" rel="stylesheet" type="text/css" />
<script src="/assets/gmaps4rails/googlemaps.js" type="text/javascript"></script>
</head>
<body>
<div class="container" id="container">
<div class="page" data-role="page">
<header data-role="header" data-position="inline" data-theme="b" data-position="fixed"></header>
<div data-role="content">
<div id="map" class="gmaps4rails_map"></div>
</div>
<footer data-role="footer" data-theme="b">
</footer>
<script type="text/javascript" src="//maps.google.com/maps/api/js?v=3.5&sensor=false&libraries=geometry"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.5/src/markerclusterer_packed.js"></script>
<script type="text/javascript" src="//google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/src/richmarker-compiled.js"></script>
<script type="text/javascript" charset="utf-8">
Gmaps.map = new Gmaps4RailsGoogle();
Gmaps.load_map = function() {
Gmaps.map.map_options.center_latitude = "37.7668452";
Gmaps.map.map_options.center_longitude = "-122.2537803";
Gmaps.map.map_options.disableDefaultUI = true;
Gmaps.map.map_options.draggable = true;
Gmaps.map.initialize();
Gmaps.map.markers = [{"title":"Test","lat":"37.7668452","lng":"-122.2537803"}];
Gmaps.map.create_markers();
Gmaps.map.adjustMapToBounds();
Gmaps.map.callback();
};
window.onload = function() { Gmaps.loadMaps(); };
</script>
</div>
</div>
</body>
</html>
What is the code missing and/or is Google-Maps-for-Rails mobile enabled?
Thanks!
Google-Maps-for-Rails is mobile enabled. The map that appears on mobile is an image and can't be dragged on a desktop safari browser.