I have been struggling to submit a simple get request to google places api
https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx
I keep on getting an error:
XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8…ius=500&types=food&name=cruise&key=xxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '8100' is therefore not allowed access.
I looked this up online and it has something to do with CORS but I havent been able to figure anything out. If someone could point me in the right direction that would be great.
thanks
I was able to call that url restfully using ionic.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="components/lib/ionic/css/ionic.css" rel="stylesheet" />
<script src="components/lib/ionic/js/ionic.bundle.js"></script>
<script src="components/lib/ionic/js/angular/angular-resource.js"></script>
<script type="text/javascript">
angular.module('myApp',
[
'ionic',
'ngResource'
])
.factory('GetData', function ($resource)
{
return {
getg: function ()
{
return $resource('https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=-33.8670522,151.1957362&radius=500&types=food&name=cruise&key=xxxx', null).get();
}
}
})
.controller('SomeController', function (GetData)
{
GetData.getg().$promise.then(
function (answer)
{
console.log(answer);
});
});
</script>
</head>
<body ng-app="myApp" ng-controller="SomeController"></body>
</html>
What worked for me was to install this addon:
cordova-plugin-whitelist
Console:
cordova plugin add cordova-plugin-whitelist
Related
I have just done a fresh install of inertia on an app with vuejs (v2) and am getting this error:
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
But I don't see why it's trying to mount on those elements? As far as I can tell I've followed the inertia installation guide....
web.php
Route::get('test', function(){return \Inertia\Inertia::render('master');});
app-ihf.js
import { App, plugin } from '#inertiajs/inertia-vue'
import Vue from 'vue'
import { InertiaProgress } from '#inertiajs/progress'
Vue.use(plugin)
const el = document.getElementById('app')
new Vue({
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
InertiaProgress.init()
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app-ihf.css">
<script src="{{ mix('/js/app-ihf.js') }}"></script>
</head>
<body>
#inertia
</body>
</html>
Can anyone see what's going wrong here? This is the html when you visit that route
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app-ihf.css?id=fc17ae1fae0b57440a59">
<script src="/js/app-ihf.js?id=fa7eba2a2c660c498a3e"></script>
</head>
<body>
<div id="app" data-page="{"component":"master","props":{"errors":{}},"url":"\/test","version":"3993c0d73e25e92aa0e15607a6c438ef"}"></div>
</body></html>
I had the exact same issue and it's because I didn't put defer into the script tag so the JavaScript in app.js was running before the id="app" element existed on the page.
So in your case you need:
<script src="{{ mix('/js/app-ihf.js') }}" defer></script>
i want to sent data in controller laravel, using jquery and ajax. But when i click on button, displays this error
here is my code ajax
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(document).ready(function ()
{
$("#b").bind("click",function ()
{
var id = "888";
$.ajax({
url:"/insert_",
mehtod:"get",
data:{
id:id
}
});
});
});
here is my html code
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="js/jquery.js"></script>
<script src="js/f.js"></script>
</head>
<body>
<button id="b">do it</button>
</body>
</html>
here is my controller code
public function data(Request $request)
{
$student = $request->input('id');
DB::table("student_table")
->where("name","=",$student)->delete();
}
here is my web.php code
Route::get('/insert_',"StudentController#data");
I think that the query in the controller is wrong because you are passing the id but then you are using it to retrieve the student's name...
In my opinion, you should change this code
...
$student = $request->input('id');
DB::table("student_table")
->where("name","=",$student)->delete();
...
to
...
$student = $request->input('id');
DB::table("student_table")
->where("id","=",$student)->delete();
...
The problem is that if the student is not found then is not possible to call the delete method. I hope that this answer could help.
I am working with serving a simple polymer element from a Tomcat server. The element works fine in Chrome but fails in the recent version of Firefox 49.0.2.
I have attached the content the two elements and the problem seems to happen because the WebComponentsReady event is fired repeatedly over and over again in Firefox but in Chrome only four times.
Furthermore by including a include on the paper-slider element in the simple-element below causes Firefox to go into a loop where it keeps reloading the files over and over again ?!
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
What is going on?
simple-element-demo.html (below)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Demo of simple element">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
</script>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./simple-element.html"></link>
</head>
<body>
<div>Hello! I am going to demo simple-element. See below me.</div>
<simple-element></simple-element>
</body>
<script>
document.addEventListener('WebComponentsReady', function(e) {
console.log('WebComponentsReady', e);
debugger;
});
</script>
</html>
simple-element.html below
<!doctype html>
<html>
<head>
<title>Simple Element</title>
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="./bower_components/polymer/polymer.html">
<link rel="import" href="./bower_components/paper-slider/paper-slider.html">
</head>
<body>
<dom-module id="simple-element">
<template>
<div class="container flex-horizontal">
Hi There! I am Simple Element.
</div>
</template>
<script>
Polymer({
is: 'simple-element',
properties: {
prop1: {
type: String,
notify: true
},
},
created: function() {
console.log('Simple is created');
},
ready: function() {
console.log('Simple is ready');
}
});
</script>
</dom-module>
</body>
</html>
I was able to fix the problem by including webcomponents-lite.js only once in the main file: simple-element-demo.html.
I removed the line below from the simple-element.html and now it works just fine in all browsers.
<script src="./bower_components/webcomponentsjs/webcomponents-lite.js">
</script>
Maybe I am working with it wrong. I don't know. All I know is its something to do specifically with the XHR.js that comes with appMobi. I have the latest build as of what ever was on there site 2 days ago. I am developing on a Macbook Pro. I am attempting to Test locally with the XDK and via Local Wifi/Test anywhere with an HTC Evo 3D using the Android platform. As well as I am using an iPhone 4S and iPad2. Its the same result every time.
I see no errors in the console debug window. All I see is the words "RemoteBridge" or "RemoteBridge2". My script is simple over all. Just a plain jQuery based $.ajax post and a little html to go with it. The URL though I will be changing it when I post it as I don't want it visible via public forum is a valid URL and drops a valid JSON object as its output. So I need input, I have no idea where to go from here as my app requires a lot of dynamic data that updates on the fly. And allegedly all I had to do was include xhr.js and my standard jQuery should have worked.
Anyway here is my code.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" href="./src/global.css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="./src/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/global.js"></script>
</body>
</html>
and the contents of global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
$(document).ready(function()
{
/*
var request = $.ajax({
url: "http://this.url-has-been-changed.net/geo/suggest",
type: "POST",
data: {"entry" : "951"},
dataType: "json"
});
request.done(function(data){$('#advert').append('done');});
request.fail(function(data){$('#advert').append('fail');})
request.error(function(data){$('#advert').append('error');})
request.complete(function(data){$('#advert').append('complete');})
request.success(function(data){$('#advert').append('success');})
*/
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
});
all other files found to be included are stock from appmobi
Chris,
Just a couple of things to help you figure this one out.
Make sure you reference appMobi.js and XHR.js from
http://localhost:58888/_appMobi
in order to take advantage of JavaScript API bridge commands (http://www.appmobi.com/documentation/jsAPI.html).
Wait until the "appMobi.device.ready" event has fired before using those JavaScript API bridge commands. In your case, the XHR.js library is actually translating XMLHttp calls to native AppMobi.device.getRemoteData calls.
Try this index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--
<link rel="stylesheet" media="all" href="./src/global.css">
-->
</head>
<body style="background-color:white;">
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="global.js"></script>
</body>
</html>
Along with this global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
The XHR.js and appMobi.js libraries are provided by the wrapping application itself in order to "listen" for JavaScript calls that would require native-level functionality. For example, the AppMobi.device.getRemoteData command that would allow you to make a cross-domain data request. For convenience, the XHR.js library translates XmlHTTP calls into the AppMobi.device.getRemoteData command.
For more information on the JavaScript API, check out the documentation at:
http://www.appmobi.com/documentation
I just created a new project using the visual studio cordova starter template. However I am unable to get the javascript document ready function to be called when running from the windows phone 7 emulator. When running from a browser it is called fine.
onDeviceReady()... gets logged to the console, but $(document).ready(...) does not.
Can anyone see any obvious reason for this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>Title</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.css"/>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.mobile-1.0.1.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
</head>
<body>
<div id="home" data-role="page">
</div>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("onDeviceReady. You should see this message in Visual Studio's output window.");
}
$(document).ready(function () {
console.log("doc ready");
});
</script>
</body>
</html>
document.ready is most likely being called before the PhoneGap code has initialized the console which you are logging to. The WP7 browser does not have its own console, the console is implemented by the PhoneGap framework.