I am learning to develop mobile app using Phonegap and jquery mobile.
I have the main page with a list (index.html).
If user taps on an item, it should go on the next page.
Now this next page takes the id of the item, and the next page (a separate html file, second.html) contains the details related to this item.
So I need to know the id of the item tapped on the main page, and this second.html should display data accordingly.
What I want to know is, what do I use to pass the id from main page to second page? I am currently trying to pass data by using GET parameter (second.html?id=xyz), but don't know how to catch it on the second page.
I also read a method using localstorage, But i am not sure if that is a good idea, considering this will go on with the user going to third page, fourth page, and so on. so there'll be a lot of data saving into the local storage.
First page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant App</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="local">
<div data-role="main" class="ui-content">
<h2> Nearby Restaurants</h2>
<ul data-role="listview" data-inset="true" id="nearbyrestaurs">
</ul>
<script type="text/javascript">
var li = "";
$.getJSON(hostname + "/restaurants/?format=json", function(data) {
$.each(data, function(item, value) {
li = "<li><a rel=external href='menu.html?restid=" + value["id"] + "'>";
li += "<img src='";
li += hostname;
li += value["dp"];
li += "' class='ui-li-icon'>";
li += value["name"]
li += "</a></li>";
$("#nearbyrestaurs").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="js/Jquery/jquery.mobile-1.4.5.css" />
<title>Restaurant Menu</title>
<script type="text/javascript" src="js/configs/server.js"></script>
<script type="text/javascript" src="js/Jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/Jquery/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="menupage">
<script type="text/javascript">
</script>
<div data-role="main" class="ui-content">
<h2> Menu</h2>
<ul data-role="listview" data-inset="true" id="Menus">
</ul>
<script type="text/javascript">
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(location.search);
if (results == null) {
return null;
} else {
return results[1] || 0;
}
}
var li = "";
restid = $.urlParam('restid');
$.getJSON(hostname + "/menus/?format=json&restid=" + restid, function(data) {
$.each(data, function(item, value) {
li = "<li><a href='";
li += "#"
li += "' class='ui-li-icon'>";
li += value["name"];
li += "</a></li>";
$("#Menus").append(li).listview('refresh');
});
})
</script>
</div>
</div>
</body>
</html>
You can use location.search:
var params = location.search;
Params will have ?id=xyz. After that you can parse the string to obtain what you want.
Here is a related question :
Passing Data between pages with JQuery Mobile
You have a function like this already:
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
Usage:
var yourId = getParameterByName('Id');
Maybe, your specific case could be:
$.getJSON(hostname + "/menus/?format=json&restid=" + $.urlParam('restid'), function(data) {
Or possibly:
$.getJSON(hostname + "/menus/?format=json&restid=" + getParameterByName('restid'), function(data) {
Related
I am developing my application for Android Environment using IBM Worklight and the following Library: http://storelocator.googlecode.com/git/index.html
Whenever I enter any location from the textbox, I am getting the world map, not the location which I entered. I need to zoom in to see the exact location. It is working correctly on Worklight Console. But on device, Whenever I enter any city name, I am getting only world map. There is not any error on LogCat.
Also, I am getting two alerts continuously.
"Rate Limit Exceeded"
"The SQL Query is malformed. (there might be something wrong with these URL parameters: select, Where, orderBy, intersects)."
The following is HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testeApp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link href="jqueryMobile/jquery.mobile-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-png-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.inline-svg-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.structure-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.theme-1.4.3.css" rel="stylesheet">
<link href="jqueryMobile/jquery.mobile.external-png-1.4.3.css" rel="stylesheet">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.3.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script src="jqueryMobile/jquery.mobile-1.4.3.js"></script>
<script type="text/javascript" charset="utf-8"
src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript" src="js/gme.js"></script>
<script type="text/javascript" charset="utf-8" src="js/store-locator.min.js"></script>
<link rel="stylesheet" href="css/storelocator.css">
<script src="js/medicare-static-ds.js" type="text/javascript"></script>
<style type="text/css">
body { font-family: sans-serif; }
#map-canvas, #panel { height: 500px; }
#panel { width: 300px; float: left; margin-right: 10px; }
p.attribution, p.attribution a { color: #666; }
</style>
</head>
<body>
<div data-role="page" >
<div data-role="content">
<div id="panel" class="storelocator-panel" style="width : 100% ; height : 30%; " >
<form class="storelocator-filter" >
<div class="location-search" id="locationSearch" style="height :35%; ">
</div>
<div class="feature-filter">
</div>
</form>
</div>
<div id="map-canvas" >
</div>
</div>
</div>
</body>
The following is the javascript code for the Map.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(43.67023, -79.38676),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var panelDiv = document.getElementById('panel');
var data = new storeLocator.GMEDataFeed({
tableId: '12421761926155747447-06672618218968397709',
apiKey: 'AIzaSyAtunhRg0VTElV-P7n4Agpm9tYlABQDCAM',
propertiesModifier: function(props) {
var shop = ([props.NAME]);
var locality = join([props.CITY, props.POSTAL_CODE], ', ');
return {
id: props.STORE,
title: props.NAME,
address: join([shop, props.ADDRESS, locality], '<br>'),
};
}
});
var view = new storeLocator.View(map, data, {
geolocation: false
});
new storeLocator.Panel(panelDiv, {
view: view
});
});
function join(arr, sep) {
var parts = [];
for (var i = 0, ii = arr.length; i < ii; i++) {
arr[i] && parts.push(arr[i]);
}
return parts.join(sep);
}
For the zoom issue, to get to street-level zooming, I use zoom: 18.
As for the "rate limit exceeded" warning, this warning is issued by Google Maps and you need to verify your usage of Google Maps: https://developers.google.com/maps/documentation/business/articles/usage_limits
I am trying to get ng-views to work in android phoneapp app. I get the following
error when I trying to navigate to one of the views via hyperlink.
"Origin is not allowed by Access-Control-Allow-Origin"
I have tried modifying the the cordova,xml in the res folder with no luck.
From
<access origin="http://127.0.0.1*"/> <!-- allow local pages -->
To
<access origin="*"/>
Any advice is appreciated, below is the code.
Thanks.
HTML:
<html ng-app="AngApp">
<head>
<meta name="viewport" content="width=320; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Minimal AppLaud App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="angular.js"></script>
<script type="text/javascript" charset="utf-8" src="app.js"></script>
<script type="text/javascript" charset="utf-8">
var onDeviceReady = function() {
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
// The message from the service is appearing, so Angular seems
// to be working fine without having to bootstrap it.
//angular.bootstrap(document, ['AngApp']);
};
function init() {
document.addEventListener("deviceready", onDeviceReady, true);
}
</script>
</head>
<body onload="init();" id="stage" class="theme">
<h2>Angular App</h2><br/>
View1
View2
<hr/>
<div data-ng-controller="MainCtrl">
<p>{{Message}}</p>
<input type="text" data-ng-model="Message"/>
</div>
<hr/>
<div data-ng-view></div>
</body>
</html>
APP.JS:
var angApp = angular.module('AngApp',[]);
angApp.config(function ($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
angApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: TestCtrl1,
templateUrl: 'view1.html'
})
.when('/view', {
controller: TestCtrl2,
templateUrl: 'view2.html'
});
});
angApp.factory('myService',function(){
return 'I am a service';
});
function MainCtrl($scope, myService){
$scope.Message = 'This is the main controller. '+ myService;
}
function TestCtrl1($scope){
$scope.Message = 'This is controller 1.';
}
function TestCtrl2($scope){
$scope.Message = 'This is controller 2.';
}
You are missing a # sign there in href="#/view".
I am new to programming phonegap apps. I have proved one simple phonegap app example and works fine on a Samsung Galaxy Mini, but doesn't in the Android emulator. The thing is, I want to show text when I click on a specific button inside the html.
App code is shown in below:
import android.os.Bundle;
import org.apache.cordova.*;
public class cordovaExample extends DroidGap
{
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
super.init();
MyClass js = new MyClass(this,appView);
appView.getSettings().setJavaScriptEnabled(true);
appView.addJavascriptInterface(js, "JS");
super.loadUrl(Config.getStartUrl());
}
}
public class MyClass
{
private WebView mAppView;
private DroidGap mGap;
Activity activity;
public MyClass(DroidGap gap, WebView view)
{
mAppView = view;
mGap = gap;
}
public String getText()
{
return "Hello World";
}
}
HTML code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
<script type="text/javascript" src="cordova-2.5.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function Showessage()
{
var element = document.getElementById('time');
element.innerHTML = 'First Message :'+ window.JS.getText() + '<br />';
//alert('hello');
}
</script>
</head>
<body>
<div class="app">
<h1 class="event received" >Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received" id ="time" onclick="Showessage()">Device is Ready</p>
</div>
</div>
</body>
</html>
you have not to load corodova.X.X.js just the cordova.js script.
so the inclusion should be:
<script type="text/javascript" src="cordova.js"></script>
<!--- NOT <script type="text/javascript" src="cordova-2.5.0.js"></script> -->
Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.
I'm trying to call a service using jsonp on the andriod emulator:
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
receivedEvent: function(id) {
console.log('Received Event: ' + id);
$.ajaxSetup ({
cache: false
});
$.ajax({
type: "GET",
url: "http://10.0.2.2/uk-en/login/user",
dataType: "jsonp",
contentType: "application/json",
success: function(xml){
$("#result").html('123');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
$("#result").html('XMLHttpRequest = ' + JSON.stringify(XMLHttpRequest) + ", textStatus = " + textStatus + ', errorThrown = ' + JSON.stringify(errorThrown));
}
});
}
I'm doing this on the HelloWorld app create following documentation on the phonegap site. My index.html is similar to this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div class="app">
<div id="result">
</div>
</div>
<script type="text/javascript" src="cordova-2.2.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
This is the error I receive although this works from Firefox on my local machine:
XMLHttpRequest = {"READYSTATE":4,"STATUSTEXT":"SUCCESS"},TEXTSTATUS = PARSERERROR, ERRORTHROWN = {"MESSAGE":JQUERY1830456564654_32131 WAS NOT CALLED", "STACK":"ERROR:JQUERY1830456564654_32131 WAS NOT CALLED"\N AT FUNCTION.ERROR(http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js:2:13215)
Anyone able to help please?
JSONP requires that the response be wrapped in some kind of callback function.
This is all assuming you're grabbing the content from another domain. If so, you're limited by the same origin policy:
So the server should respond with:
urFunction({....});