I edited the whole topic because I gave a great read about the whole API and now I'm having another problem ... I'll try to leave as much details as possible here.
The error you are giving is 401 of uber api, but, I did everything right ... My INDEX.html looks like this:
index.html
<html>
<head>
<title>Party Invitation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<h1>Party</h1>
<div class="info-container">
<span class="info-header">When</span>
<span class="info when">September 18, 2014 at 6:00pm</span>
</div>
<div class="info-container">
<span class="info-header">Where</span>
<span class="info where">Thinkful HQ</span>
</div>
<img class="map" src="http://maps.googleapis.com/maps/api/staticmap?center=40.7248,-73.99597&zoom=17&format=png&sensor=false&size=280x280&maptype=roadmap&style=element:geometry.fill|color:0xf4f4f4&markers=color:red|40.7248,-73.99597&scale=2" alt="">
<div class="button">
<p id="time">ESTIMATING TIME</p>
</div>
</section>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/uber.js"></script>
</body>
And then my uber.js is like this:
uber.js
// Uber API Constants
var uberClientId = "RxGbzH***************"
, uberServerToken = "h_hqd3L4***************";
// Create variables to store latitude and longitude
var userLatitude
, userLongitude
, partyLatitude = 19.3256725
, partyLongitude = -43.1579731;
navigator.geolocation.watchPosition(function(position) {
// Update latitude and longitude
userLatitude = position.coords.latitude;
userLongitude = position.coords.longitude;
// Query Uber API if needed
getEstimatesForUserLocation(userLatitude, userLongitude);
});
function getEstimatesForUserLocation(latitude,longitude) {
$.ajax({
url: "https://api.uber.com/v1/estimates/price",
headers: {
Authorization: "KA.ey**********************************************************************************************************************************" + uberServerToken
},
data: {
start_latitude: latitude,
start_longitude: longitude,
end_latitude: partyLatitude,
end_longitude: partyLongitude
},
success: function(result) {
console.log(result);
}
});
}
And this is the error that is appearing
And my uber control panel is like this
Can anyone tell me why they are giving these two errors on the console? I do not know what to do
=\
As I can see - your application is not set-up properly. You don't have Redirect URL, Privacy Policy and because you are making API calls from JS - Origin URL:
So add something like:
Redirect URL: http://localhost:7000/redirect
Privacy Policy: http://localhost:7000/privacy
Origin URL: http://localhost:7000
I'm not sure where did you get your access token - because you don't have your app set up properly - but even then this will not work because your header is invalid. You are missing token type "Bearer" for access_token. So, in this case, your code should be like:
headers: {
Authorization: "Bearer KA.ey**********************************************************************************************************************************"
}
If you want to use Server Token:
headers: {
Authorization: "Token uberServerToken"
}
Please read our documentation for more info.
Related
I am trying to load data from Geoserver into my website using Leaflet but I get an error "Uncaught SyntaxError: Unexpected token :" with my Url link to my GeoJSON link.
I'm confused about proxy and CORS but I expect this could be the answer but I am hoping for an easier solution. If anyone is able to help me to solve this problem I will be very grateful.
This is the code I am trying to run.
<!DOCTYPE html>
<html>
<head>
<title>Quick Start - Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/leaflet.css" />
<link rel="markers" type="images/marker-icon" href="images/marker-icon.png" />
<script src="js/leaflet.js"></script>
<script src="js/esri-leaflet.js"></script>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-1.5.min.js'></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px;"></div>
<script>
var mymap = L.map('map', {
zoomControl:true, maxZoom:28, minZoom:1
}).fitBounds([[51.0269253989,-1.34762355597],[51.1990603009,-0.951310026203]]);
L.esri.basemapLayer('Imagery').addTo(mymap);
//loads the geojson layer
var geojsonLayer = new L.GeoJSON();
function loadGeoJson(data) {
geojson.addGeoJSON(data);
}
var geoJsonUrl = "http://localhost:8080/geoserver/RSAC/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=RSAC:results_clipped_with_growth_small&maxFeatures=50&outputFormat=application%2Fjson";
$.ajax({
type: "GET",
url: geoJsonUrl + '&callback=?',
dataType: 'json',
jsonpCallback: 'loadGeoJson',
success: loadGeoJson,
});
</script>
</body>
</html>
One problem is here:
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://code.jquery.com/jquery-1.5.min.js'></script>
You included jQuery twice, version 1.5 (very old and outdated) after 1.11.0. Simply remove the second jQuery.
In your Javascript jQuery fetches data in JSONP format. However, the Geoserver URL with outputFormat=application/json will send JSON (not JSONP).
To disable the jQuery's JSONP checks you'll have to provide the parameter jsonp: false here:
Cross-domain "json" requests are converted to "jsonp" unless the request includes jsonp: false in its request options. (source)
$.ajax({
type: "GET",
url: geoJsonUrl,
dataType: 'json',
success: loadGeoJson,
jsonp: false
});
I tested this with a random public Geoserver instance and had no issues with CORS, but your mileage may vary.
I have tried so many URL variations for Flickr and all attempts have failed to load my image gallery into my own webpage.
I am pretty sure its the URL. If I replace the URL with:
"api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?"
all works fine to load public photos from Flickr, but to load my own album (URL below), it won't work.
Yes I have a valid API from Flickr. I also checked the script syntax in "jsbin.com" and all of that is good.
Can anyone help resolve this?
Here is the jQuery script:
(function() {
var flickerUrl = "https://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=<removed by edit>&user_id=135938131#N02&format=json&jsoncallback=?";
$.getJSON(flickerUrl)
.done(function(data) {
$.each(data.items, function(i, item) {
var image = $("<img>")
.attr("src", item.media.m)
.attr("title", item.title);
$("<a>")
.attr("href", item.link)
.attr("target", "_blank")
.html(image)
.appendTo("#images");
if ( i === 8 ) {
return false;
}
});
});
})
();
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Flickr Image Gallery</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<h1>Natural Scenery</h1>
<br>
<div id="images"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="./js/flickrgallery.js"></script>
</body>
</html>
I'm trying to set up a HTTP-get request on my ionic application but i keep getting this error:
XMLHttpRequest cannot load http://www.wikicode.co.uk/announcement?
date=value2&message=value3&name=value1. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:8100'
is therefore not allowed access.
I'm not really sure what's wrong. I've tried googling it but didn't have much luck.
Here's my code:
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Announcement</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="Announcement">
<ion-view view-title="Announcements">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Announcement</h1>
</ion-header-bar>
<br>
<br>
<br>
<ionic-content ng-controller="Controller">
<button class="button" ng-click="getData()">Do something</button>
<br>
name: {{name}} {{date}} {{message}}
</ionic-content>
</ion-pane>
</ion-view>
</body>
</html>
Javascript:
angular.module('starter.controllers', [])
.controller('announcementsCtrl', function($scope) {})
.controller('chatsCtrl', function($scope) {})
.controller('photosCtrl', function($scope) {})
.controller('profilesCtrl', function($scope) {})
.controller('Controller', function($scope, $http) {
$scope.getData = function() {
$http.get("http://www.wikicode.co.uk/announcement", { params: { "name": "value1", "date": "value2", "message": "value3"} })
.success(function(data) {
$scope.name = data.name;
$scope.date = data.date;
$scope.message = data.message;
})
.error(function(data) {
alert("ERROR");
});
}
});
This is a common issue with RESTful APIs that do not support CORS headers. You can work around this during development by using the proxy option in the Ionic CLI. I wrote a tutorial about this on my site http://ionicinaction.com/blog/how-to-fix-cors-issues-revisited/.
The big thing to remember is this only works for building the app. It does not solve the root of the problem. You have two options 1) get wikicode.co.uk to support CORS headers or 2) create another REST API that proxies to the real API but adds CORS headers. There are lots of ways to do #2, but here is how to build a simple Node server that does this. http://chafey.blogspot.com/2014/09/working-around-cors.html
I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,
Now I can call the Childbrowser directly with an onclick event with this javascript in the head:
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
OR directly with for example
Google
Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.
But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.
I'm happy for every helpful advice, I never coded before this app. Here's my index.html
<!DOCTYPE html>
<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;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
not working
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
OK
</p>
</div>
</section>
</body>
</html>
Thank you in advance.
Regards
Kieke
#Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.
NOTE: Assuming you are using PhoneGap 2.x
In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.
In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *requestURL =[ [ request URL ] retain ];
NSString *host = [ [ requestURL host] retain ];
// if YES, directs to WebView
// otherwise, takes OpenAllWhitelistURLsInWebView setting
// if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
// otherwise take OpenAllWhitelistURLsInWebView setting of YES
if ([host isEqualToString:#"www.loadDomainInSafari.com"]) {
return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
}
[ requestURL release ];
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?
Look in the console of your Xcode debugger as #Littm describes, you will see if your link are being blocked because they aren't in the whitelist.
You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.
I am new to jquery mobile, and am having problems getting content I have inserted dymically using pageinit to display on the first time of the form response page. It displays on subsequent refreshes of the page. I also don't want the content to cache.
I need to use querystring values like ?blah=1&blah=2 as I use these in my call to an external json file.
How should I be doing this? If I use rel="external", and setting ajax to false, I have problems with issues on android. So using pageinit in the header, how do I make the dynamically loaded content (in the example, the time in seconds) in the 2nd page display first time round?
I have simplified the problem into test pages below.
Expected behaviour. When you click on the submit button of the form you go through to the 2nd page which should display the no of seconds taken from datetime
Actual behaviour. The seconds/time does not display on the 2nd page until the page is refreshed.
Elsewhere, I have come across the suggestion to put the pageinit code into the div itself, however this has caused the content to cache on android (ie the no of seconds remains the same), so I don't want to do this.
Any ideas on how I should approach this would be much appreciated
Sample code
=======
Page 1 - form
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page1" data-add-back-btn="true">
<div data-role="content" data-theme="b">
<form action="page_2.htm" method="GET" id="form1" name="form1">
<input type="hidden" name="seconds" value="">
<div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
</form>
</div>
</div>
</body>
</html>
===
Page 2 form response page
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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="/scripts/myinit.js"></script>
</head>
<body>
<div data-role="page" id="page2" data-add-back-btn="true">
<div id="job" data-role="content">
</div>
</div>
</body>
</html>
===
custom javascript file called /scripts/myinit.js (included in both pages above)
$('#page1').live('pageinit', function(event) {
var seconds = new Date().getTime();
$('input[name=seconds]').val(seconds);
});
$('#page2').live('pageinit', function(event) {
var querystring = location.search.replace( '?', '' ).split( '&' );
var queryObj = {};
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
queryObj[name] = value;
}
var seconds = queryObj["seconds"];
$('#job').append("seconds=" + seconds);
});
try changing pageinit by pageshow. i had the same problem and it worked for me
Link to the external file like this:
HTML --
I'm a Link
JS --
$(document).delegate('#external-link', 'click', function () {
$.mobile.changePage('/path/to/file.html', { reloadPage : true });
return false;
});
Setting the reloadPage option for the changePage() function will allow the external page to be refreshed rather than loading the cached version. Since the external page will be refreshed, the pageinit code for it will run when it's initialized and your code should function properly.
Documentation: http://jquerymobile.com/demos/1.1.0-rc.1/docs/api/methods.html