I can't find any documented way to reload the new "Sign in With Google" button in JavaScript.
I have to remove the script tag and the "button" div then re-add them both.
Does anyone know of a better way to do this?
Have you looked at the JS renderButton method ?
Assuming you have something like this to initialize the library and display the button in JS, you might be able to update locale in the second parameter to renderButton and call the method again to switch languages.
<html>
<body>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
window.onload = function () {
google.accounts.id.initialize({
client_id: "YOUR_GOOGLE_CLIENT_ID",
callback: handleCredentialResponse
});
google.accounts.id.renderButton(
document.getElementById("buttonDiv"),
{ theme: "outline", size: "large", locale: "the new locale" }
);
google.accounts.id.prompt(); // also display the One Tap dialog
}
</script>
<div id="buttonDiv"></div>
</div>
</body>
</html>
Obviously, you'd call renderButton a second time from outside of the window.onload example above, I didn't go as far as showing that in the code sample though.
Related
I've been trying to add a tooltip to a button that only shown when certain conditions are met. I'm using uikit#3.0.0-beta.35. According to the documentation, I should return false on beforeshow event.
UIkit.tooltip($element, { pos: 'top' });
$element.on('beforeshow', function(){
return false;
});
if(condition){
UIkit.tooltip($element).show();
}
The problem is that the beforeshow function never fires for some reason. I even tried this syntax mentioned in UIkit documentation:
UIkit.util.on($element, 'beforeshow', function () {
return false;
});
Unfortunately, none of these methods worked for me.
the docs has some mistake, switcher has the same problem. the event is triggered on document not the target. you can use this syntax like this:
UIkit.util.on(document, 'event', '#target-id', callback)
the docs confused me a long time :(
The problem with your code is, that you're trying to listen to an event directly on the element, while the event is triggered on the document - there is an error in the documentation, as they say it's triggered on the element, but it's not.
There is also a fresh false bug report regarding this
var $element = $('#hoverButton');
var $check = $('#tooltipToggle');
UIkit.tooltip($element);
$(document).on('beforeshow', $element, function() {
if (!$check.prop('checked')) return false;
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/css/uikit.min.css" />
<!-- UIkit JS & jQuery (not required by UIKit anymore) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.35/js/uikit.min.js"></script>
<div class="uk-position-center">
<label>show tooltip <input id="tooltipToggle" class="uk-checkbox" type="checkbox"></label><br><br>
<button id="hoverButton" class="uk-button uk-button-default" title="Hello World">Hover</button>
</div>
For Switcher:
$(document).on('show', $('#switcherId'), function(){
console.log('fired');
});
I may need this answer in the future too...
I had used the following script to integrate google authentication
//google auth code
gapi.load('auth2', function() {//load in the auth2 api's, without it gapi.auth2 will be undefined
gapi.auth2.init(
{
client_id: '1063305095705-k68gpfhi46tbu6kv8e8tidc751hte5pb.apps.googleusercontent.com'
}
);
var GoogleAuth = gapi.auth2.getAuthInstance();//get's a GoogleAuth instance with your client-id, needs to be called after gapi.auth2.init
$scope.onLogInButtonClick=function(){//add a function to the controller so ng-click can bind to it
GoogleAuth.signIn().then(function(response){//request to sign in
console.log(response);
console.log(response.wc.wc);
console.log(response.wc.hg);
console.log(response.wc.Ph);
});
};
});
I am trying to use this in some other application and getting the following error :-
gapi.auth2.ExternallyVisibleError: gapi.auth2 has been initialized with
different options. Consider calling gapi.auth2.getAuthInstance()
instead of gapi.auth2.init().
I've also included
<script src="https://apis.google.com/js/platform.js?key=xxxxxxxxx"></script>
Everything seems to be fine, don't understand why it does not work..
Next code should help:
I have been spent two hours of solving this and because I was receiving the same error, I decided to use onLoad function with custom google sign in button.
Some points, that are probably neccessary if we do not want get profile info from users...
use onload function as in code below, when using defer async method:
https://apis.google.com/js/platform.js?onload=onLoadCallback
make your own sign in button with click event on signIn function
<a onclick="signIn();">Google Sign In</a>
Full solution is here:
<script src="https://apis.google.com/js/platform.js?onload=onLoadCallback" async defer></script>
<meta name="google-signin-client_id" content="YOUR_ID.apps.googleusercontent.com"/>
<!-- I have commented default google sign in button because it didn't allow me to make my own gapi.load -->
<!--<div class="g-signin2" data-onsuccess="ConSignIn"></div>-->
<a onclick="signIn();">Google Sign In</a>
<script>
function onLoadCallback() {
console.log('onLoadCallback');
gapi.load('auth2', function() {
gapi.auth2.init({
client_id: 'YOUR_ID.apps.googleusercontent.com',
//This two lines are important not to get profile info from your users
fetch_basic_profile: false,
scope: 'email'
});
});
}
function signIn() {
console.log('I am passing signIn')
var auth2 = gapi.auth2.getAuthInstance();
// Sign the user in, and then retrieve their ID.
auth2.signIn().then(function() {
console.log(auth2.currentUser.get().getId());
});
}
</script>
Does anyone know how to include a callback in this Twitter widget? Any input would be much appreciated.
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); </script>
Twitter’s widgets JavaScript fires events on initialization and after a viewer interacts with a widget: https://dev.twitter.com/web/javascript/events.
You have to load the javascript yourself in the <head> of your page:
<script src="http://platform.twitter.com/widgets.js" id="twitter-wjs"></script>
Then add some Javascript, like:
twttr.ready(function (twttr) {
twttr.events.bind(
'rendered',
function (ev) {
// callback code
});
});
You can see an example at the end of this JS and the result on the "GET THE DIRECT" section of this page
I know this is completely simple, but it's also completely is stumping me on why it isn't working. This gets to the point of rendering the html and showing Hello World with a message below "Welcome to chat" and a button "say hello back" but what it ISN'T doing is then change the message to "work".
I have a .js file which is:
if (Meteor.isClient) {
var message="welcome to chat";
function template(message){
Template.hello.greeting = function () {
return message;
};};
template(message);
Template.hello.events({
'click input' : function () {
template("work ");
}
});
}
and a html follow as shown:
<head>
<title>chat</title>
</head>
<body>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<button value="Click">Say Hello Back!</button>
</template>
And it's embarrassingly simple but I just can't figure out what I'm doing wrong. I know I shouldn't re render the page because the whole point of using meteor is for it's live html so what do I do have to do?
I figured out the main problem!
For my html I was using a button class but I should've been using a input type="button" instead!
To make it "reactive" you should use Session that meteor provides. You can simplify your code to make it easier to read and understand.
Session provides a global object on the client that you can use to
store an arbitrary set of key-value pairs. Use it to store things like
the currently selected item in a list.
You set the session variable to "welcome to chat" first. In your click event you would set the Session variable to "work". Then you would set the template to return the value of the Session variable when it changes. Your javascript could look something like this.
if (Meteor.isClient) {
Session.set("message", "welcome to chat");
Template.hello.greeting = function () {
return Session.get("message");
}
Template.hello.events({
'click input' : function () {
Session.set("message", "work");
}
});
}
This is untested but give it a try.
i am not quite sure about what do you mean by "not working". But i am sure you will have to do following.
List item you need to prevent calling default event by the browser.
ex:-
Template.hello.events({
'click input' : function () {
//your code here
return false;
}
});
2 . use meteor methods instead of having template()
right now I have a huge Solution in which we use javascript alerts via RegisterStartupScript for all messages and errors.. We were willing to modify all this to making something similar to the modalPopupExtender, or the extender itself in a way that doesn't require too much effort... I mean, to show a modalpopup on a single page I need to create it on the aspx file, setting the attributes etc... So i'm just asking for Ideas, want to know how you guys deal with this..
I'd probably use jQuery dialog and put the markup and initialization code in a MasterPage, set with autoOpen false and hidden by default. I'd inject code that interacts with the dialog into each page as needed.
<div id="modalDialog" title="Error">
<p id='modalDialogMsg'>An error has occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#modalDialog').dialog({
autoOpen: false;
modal: true,
buttons: {
"OK" : function() {
$(this).dialog('close');
}
}
});
});
// You could "objectify" this, but I'll show as a global function
function showError( title, msg )
{
if (!title) {
title = 'Error';
}
if (!msg) {
msg = 'An error occurred.';
}
$('#modalDialogMessage').html(msg);
$('#modalDialog').attr('title',title)
.dialog('open');
}
</script>
Then, in your page you'd inject code that calls showError. Note this would need to be after the script above in order to make sure that the function has been defined. What would spit out would render like:
<script type="text/javascript">
$(function() {
showError('Database connection error', 'There was an error connecting to the database.' )'
});
</script>
Could you not place the modal popup/ modal popup extender into a user a control and embed the user control into each page?