<html>
<head>
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com" />
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script type="text/javascript">
function onSignIn(googleUser) {
console.log("Succesfully Singed in!!!");
}
</script>
</body>
</html>
With the above I can see a google-sign-in button which opens a pop-up accepts credential and signs me in. But I expect onSignIn method to be triggered when the sign in is successful, which is NOT happening.
Does anyone have any pointers at this?
Tried it on apache server on osx with safari, chrome and firefox browsers
You should add your platform.js script in head tag
<html>
<head>
<meta name="google-signin-client_id" content="MY_CLIENT_ID.apps.googleusercontent.com" />
<script src="https://apis.google.com/js/platform.js" async defer> </script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
<script type="text/javascript">
function onSignIn(googleUser) {
console.log("Succesfully Singed in!!!");
}
</script>
</body>
</html>
In my case : The callback function was inside the body tag.
Callback function not work if it is in body tag, move it to head tag.
Check Developers Console and see if Authorized redirect URIs is pointing to the origin you are running the JavaScript?
In my case, the success event wasn't firing because I was trying to hook up a function from an external js file, included on the page. For some reason, the callbacks will only work if the hooked-up functions appear on the very same page.
Never seen anything like this before. I wonder how they check for this.
It's so late to answer but I think somebody will need this:
Remember to add origin URI at google console
If you don't see anything of onSignIn on the terminal, let check at the console of your browser
Related
I am creating phonegap application for android.
I want to check internet connection for application. I am using offline.js.
But it's not working at all for me.
My code is,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>datePickerAngularTPLS</title>
<link href="css/offline.css" rel="stylesheet" />
<script src="scripts/jquery-1.11.3.min.js"></script>
<script src="scripts/offline.js"></script>
</head>
<body>
<script>
$(function () {
function on(evt) {
alert("connected successfully");
}
function off(evt) {
alert("connection failed");
}
Offline.on("up", on);
Offline.on("off", off);
});
</script>
<!-- Cordova reference, this is added to your app when it's built. -->
<script src="cordova.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/index.js"></script>
</body>
</html>
What is the problem in above code... ?
I just want to show alert on success and lose of internet connection.
I have also tried with navigator.isOnlie, but not reliable.
Please follow offline js LINK
Or other way is :
window.navigator.onLine
This will return true or false.
And one more way is using Phonegap available plugin:
Phonegap Plugin
In your first example you have forgotten to close the $ function. Its likely you would see an error message in the console, and those handlers would never have been created/attached.
If this is just a typo in your question and you are properly closing that function in your real code, then my guess is that you're adding the handlers after the up event has already occurred. Here it explains when these events are triggered.
If you load your page, then toggle your connection on and off do you see the events logged?
I've registered a practice app for soundcloud in order to get a client id. My app doesn't have an official site because I don't want to register a domain. I'm just trying to learn how to use soundcloud using a .html and .js file. I've followed the API tutorials exactly, but nothing happens whenever I try to use soundcloud. I initialized SC using my client ID, and have imported JQuery and everything I need to. Thanks for the help
my html file (practice.html):
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="//connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
my .js file (script.js):
SC.initialize({
client_id: 'the client id they gave me...'
});
$(document).ready(function() {
SC.get('/tracks/293', function(track) {
SC.oEmbed(track.permalink_url, document.getElementById('player'));
});
});
Again, nothing happens when I load the page...
Looks like you're missing the full url for the SoundCloud JavaScript SDK (missing http:):
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script src= "script.js"></script>
</head>
<body>
<div id="player"></div>
</body>
</html>
You should be able to run this locally within your browser as SoundCloud supports Cross Origin Resource Sharing headers, removing the restriction on XSS: Of CORS We Do
I'm trying to use AnyOrigin to load a url into my iframe:
Problem: It loads an empty frame, what am I doing wrong?
Code:
<!DOCTYPE HTML>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
$.getJSON('http://anyorigin.com/get?url=google.com&callback=?', function(data){
$('#output').html(data.contents);
});
</script>
</head>
<body>
<iframe id="output"></iframe>
</body>
</html>
Anyorigin uses JSONP, so you don't load it using an AJAX call. Instead, the callback query parameter should be a function name, and you should load it like a regular script tag:
<script src="http://anyorigin.com/get?url=google.com&callback=myCallbackFunction"></script>
When the script is loaded, it will automatically execute a function with the name that you specified in the callback query parameter. Of course, for it to work you need a function defined like so:
<script>
function myCallbackFunction(myData) {
//myData.contents has your html, do something here
}
</script>
Please note that the function must be defined before the script, so either the script needs to be embedded dynamically or you need to define the function before the script.
There are a few tricky parts, such as how you were populating the iframe, and how the function callback needs to be declared, so I've included a full example here:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
function myCallbackFunction(myData) {
$(function() {
$("#test").contents().find('html').html(myData.contents);
});
}
</script>
<script src="http://anyorigin.com/get?url=http://google.com/&callback=myCallbackFunction"></script>
</head>
<body>
</body>
<iframe id='test' style='width: 100%; height: 100%'>
</html>
Note that I've wrapped the call to updating the iframe's contents in a jquery document onload event. If that's not done, then the call will attempt to populate the iframe before it exists, and will silently fail.
I am really new to appMobi, HTML and JavaScript. The only thing I want to do is that I have a button with an onClick method and this method should do anything.
I have defined a Script, I have a button but the method doesn't get called. Can someone please tell my why? The examples provided by appMobi don't do anything different - I think.
Here is my code:
<head>
<!-- the line below is required for access to the appMobi JS library -->
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" language="javascript">
// 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);
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
<script type="text/javascript">
function myfunction(){
AppMobi.debug.log("test");
alert("Hallo Welt");
}
</script>
</head>
<body >
<br>
<button onclick="myfunction();">MyButton</button>
</body>
Finally, I found the solution!
Instead of onclick="myfunction" you have to use ontouchstart="myfunction"!
Would be nice if someone could tell me why.
Ah the wretched noob I am, the following html document doesn't alert anyone of my cry for help. Anyone know why?
<html>
<head>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
This works for me:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
Just fixed the src in the script tag.
Edit: Actually, the original syntax would work fine if you load the page in a non-local context. Leaving out the protocol implies that the 'current' protocol would be used depending on whether resources are loaded over http or https. Loading it locally implies that the script is loaded from file:///ajax.googleapis.com/...., which obviously won't resolve to anything. See here for more information. Thanks to #PetrolMan for pointing to the HTML 5 boiler plate site.
That same syntax is used in the HTML5 Boilerplate:
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.2.min.js'>\x3C/script>")</script>
It's
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
not
//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
You are missing an http: in front of the url in the src attribute of the <script> tag:
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('Somebody please help me.');
});
</script>
</head>
<body>
</body>
</html>
The source is jacked up. Use
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
Possible values for the Src Attribute are
•An absolute URL - points to another web site (like src="http://www.example.com/example.js")
•A relative URL - points to a file within a web site (like src="/scripts/example.js")
So you should have your URL as http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js