I´m using google login javascript.
I want import js after click button. The problem: Only show popup login google the second time I click the button
My Code:
function clickButton(){
$.getScript( "https://apis.google.com/js/client:plusone.js?onload=onLoadGoogleLogin");
}
function onLoadGoogleLogin()
{
var initializedGoogleCallback = false;
gapi.client.setApiKey('AIzaSyBhV6vP_D_I7ldL1YIU7LJUGtSxJ55ievw');
var myParams = {
'callback': function googleLoginCallback(result) {
debugger;
if (!initializedGoogleCallback) {
if (result) {
if (result['error'] == undefined) {
initializedGoogleCallback = true;
gapi.auth.setToken(result);
gapi.client.load('oauth2', 'v2', function () {
var request = gapi.client.oauth2.userinfo.get();
request.execute(googleLoginDataUserCallback);
});
}
} else {
alert('Empty authResult');
}
}
},
'clientid': 'xxxxx-4kragpsm6jolann6d9t74crpkthch0iq.apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/plus.login'
}
Related
I have an issue with tabulator (4.9.1) and the pagination, when I try to configure it with remote pagination and ajaxUrlGenerator function, it never pass into the generator function, after investigating the code I've noticed that the code of tabulator do the following :
Tabulator.prototype._loadInitialData = function () {
var self = this;
if (self.options.pagination && self.modExists("page")) {
self.modules.page.reset(true, true);
if (self.options.pagination == "local") {
if (self.options.data.length) {
self.rowManager.setData(self.options.data, false, true);
} else {
if ((self.options.ajaxURL || self.options.ajaxURLGenerator) && self.modExists("ajax")) {
self.modules.ajax.loadData(false, true).then(function () {}).catch(function () {
if (self.options.paginationInitialPage) {
self.modules.page.setPage(self.options.paginationInitialPage);
}
});
return;
} else {
self.rowManager.setData(self.options.data, false, true);
}
}
if (self.options.paginationInitialPage) {
self.modules.page.setPage(self.options.paginationInitialPage);
}
} else {
if (self.options.ajaxURL) {
self.modules.page.setPage(self.options.paginationInitialPage).then(function () {}).catch(function () {});
} else {
self.rowManager.setData([], false, true);
}
}
} else {
if (self.options.data.length) {
self.rowManager.setData(self.options.data);
} else {
if ((self.options.ajaxURL || self.options.ajaxURLGenerator) && self.modExists("ajax")) {
self.modules.ajax.loadData(false, true).then(function () {}).catch(function () {});
} else {
self.rowManager.setData(self.options.data, false, true);
}
}
}
};
using the ajaxURLGenerator with the 'local' configuration makes it work correctly in remote.
But then it doesn't do the progressive pagination and doesn't pass the parameters correctly in the ajaxURLGenerator function, probably due to the parsing mecanism that is not called in 'local' mode for the data :
Page.prototype.trigger = function () {
var _this81 = this;
var left;
return new Promise(function (resolve, reject) {
switch (_this81.mode) {
case "local":
left = _this81.table.rowManager.scrollLeft;
_this81.table.rowManager.refreshActiveData("page");
_this81.table.rowManager.scrollHorizontal(left);
_this81.table.options.pageLoaded.call(_this81.table, _this81.getPage());
resolve();
break;
case "remote":
case "progressive_load":
case "progressive_scroll":
_this81.table.modules.ajax.blockActiveRequest();
_this81._getRemotePage().then(function () {
resolve();
}).catch(function () {
reject();
});
break;
default:
console.warn("Pagination Error - no such pagination mode:", _this81.mode);
reject();
}
});
};
At the end it is loading, but all the data when the server return just a json list, but it fail when receiving the object expected for the remote pagination.
Does anyone had the same issue with remote pagination and ajaxURLGenerator? Anyone has an idea how to solve it, without modifying the library?
Thanks in advance
I have java script component in home component with external js. I need to remove external js when page navigate to another page. Page does not refresh.
<script>
function initFreshChat() {
window.fcWidget.init({
token: "***",
host: "https://wchat.freshchat.com"
});
}
function initialize(i,t){var e;i.getElementById(t)?initFreshChat():((e=i.createElement("script")).id=t,e.async=!0,e.src="https://wchat.freshchat.com/js/widget.js",e.onload=initFreshChat,i.head.appendChild(e))}function initiateCall(){initialize(document,"freshchat-js-sdk")}window.addEventListener?window.addEventListener("load",initiateCall,!1):window.attachEvent("load",initiateCall,!1);
</script>
This is the external js: https://wchat.freshchat.com/js/widget.js
I need this because i need to keep this freshchat window in one page.
This can be done by putting any condition. But it will works if we refresh the page. Here pages are not refreshing at all.
Therefore I need to remove the external js when navigate to another pages. And mount back when came to this page.
You can wrap the script in side a Vue component life circle,
render
remove
refresh
whenever you need.
I found this code on codepen https://codepen.io/akccakcctw/pen/LBKQZE
Vue.component("fc-button", {
template: "#fcButton",
props: {
fc: {
type: Object,
default: {},
}
},
methods: {
openWidget: function() {
document.getElementById("fc_frame").style.visibility = "visible";
window.fcWidget.open();
}
}
});
const vm = new Vue({
el: "#app",
data: function() {
return {
fc: {
isInit: false,
},
};
},
mounted: function() {
var self = this;
window.fcSettings = {
token: "8d3a4a04-5562-4f59-8f66-f84a269897a1",
host: "https://wchat.freshchat.com",
config: {
cssNames: {
widget: "custom_fc_frame",
open: "custom_fc_open",
expanded: "custom_fc_expanded"
},
headerProperty: {
hideChatButton: true
}
},
onInit: function() {
window.fcWidget.on("widget:loaded", function() {
self.fc.isInit = true;
window.fcWidget.on("unreadCount:notify", function(resp) {
console.log(resp);
test = resp;
if (resp.count > 0) {
// document.getElementById('notify').classList.add('h-btn-notify');
document.getElementById("notify").style.visibility = "visible";
} else if (resp.count == 0) {
// document.getElementById('notify').classList.remove('h-btn-notify');
document.getElementById("notify").style.visibility = "hidden";
}
});
window.fcWidget.on("widget:closed", function() {
document.getElementById("fc_frame").style.visibility = "hidden";
document.getElementById("open_fc_widget").style.visibility =
"visible";
});
window.fcWidget.on("widget:opened", function(resp) {
document.getElementById("open_fc_widget").style.visibility =
"hidden";
});
});
}
};
}
});
I am using Google Calendar JavaScript API.It works fine for single account.Problem is when user is logged-in into two of my gmail accounts, It asks user every time to select which account user want to use.
I want API to remember my last selection at least for the session or most preferably till user disconnect himself.
Here is my JS file.
var clientId = $("#CalendarClientId").val();
var scopes = 'https://www.googleapis.com/auth/calendar';
var objEventList = [];
var calendarIdAtt;
function InitilizeCalendarAPI() {
// Step 2: Reference the API key
window.setTimeout(checkAuth, 5);
}
function CheckGoogleCalAuth() {
gapi.auth.authorize({ client_id: clientId, scope: scopes }, HandleAuthCallBack);
}
function checkAuth() {
gapi.auth.authorize({ client_id: clientId, scope: scopes }, HandelCalAuthResult);
}
function CheckAuthentication() {
gapi.auth.checkSessionState({ client_id: clientId }, CheckAuthCallback);
}
function CheckAuthCallback(loginDataCallback) {
if (loginDataCallback == false) {
checkAuth();
$("#googleAuthorize-Button").hide();
}
}
function HandelCalAuthResult(authResult) {
if (authResult && !authResult.error) {
/*authorizeButton.style.visibility = 'hidden';*/
$("#googleAuthorize-Button").hide();
if ($("#googleConnected").length > 0) {
$("#googleConnected").show();
}
/*bind listing of google calendar name in addevent page*/
if ($("#divGoogleCalendarNameList").length > 0) {
GetListOfCalendarNameFromGoogle();
}
} else {
$("#googleAuthorize-Button").show();
/*authorizeButton.style.visibility = '';*/
if ($("#googleConnected").length > 0) {
$("#googleConnected").hide();
}
}
if ($('#googleAuthorized-Button').length > 0) {
$("#googleAuthorize-Button").hide();
$('#googleAuthorized-Button').show();
$('#calenderSettingIcon').attr('data-original-title', 'Connected To Google');
}
}
function CheckAutheForEventList() {
gapi.auth.checkSessionState({ client_id: clientId }, CheckAuthCallbackListEvent);
}
function CheckAuthCallbackListEvent(loginDataCallback)
{
gapi.auth.authorize({ client_id: clientId, scope: scopes }, LoadEventListinAPI);
}
function checkAuthEventList() {
ConfirmConnectionToGoogleCalendar(function (isConnect) {
if (isConnect) {
gapi.auth.authorize({ client_id: clientId, scope: scopes }, LoadEventListinAPI);
}
});
}
function LoadEventListinAPI() {
gapi.client.load('calendar', 'v3', GetAllCalendar);
}
function GetAllCalendar() {
gapi.client.load('calendar', 'v3', GetCalendarAndTheirEvents);
}
function GetCalendarAndTheirEvents() {
objEventList = [];
try {
var objDate = GetMinAndMaxDate();
var finalMinDate = (objDate.MinDate).toISOString();;
var finalMaxDate = (objDate.MaxDate).toISOString();;
var request = gapi.client.calendar.calendarList.list();
var tempCount = 0;
request.execute(function (resp) {
var calLength = resp.items.length;
$.each(resp.items, function (index, item) {
if (item.accessRole == "owner") {
try {
calendarIdAtt = item.id;
var request = gapi.client.calendar.events.list({
'calendarId': item.id,
'showDeleted': false,
'singleEvents': true,
'orderBy': 'startTime',
'maxResults': 100,
'timeMin': finalMinDate,
'timeMax': finalMaxDate
});
request.execute(function (resp) {
tempCount = tempCount + 1;
var events = resp.items;
if (events.length > 0) {
objEventList.push(events);
}
if (tempCount == calLength) {
//Binding Kendo Scheduler with Google Calenda Events
var eventsList = BindEventToCalendar();
LoadEventsScheduler(eventsList);
}
});
}
catch (error) {
tempCount = tempCount + 1;
if (tempCount == calLength) {
BindEventToCalendar();
}
}
}
else {
tempCount = tempCount + 1;
if (tempCount == calLength) {
BindEventToCalendar();
}
}
});
});
return objEventList;
}
catch (exception) {
BindEventToCalendar();
return null;
}
}
//Function will display google calendar events in the Kendo Scheduler
function LoadEventsScheduler(eventsList) {
//This will retrun all the google calendar events to the server side for the scheduler
var request = {
EventsList: eventsList, CalendarAccount: calendarIdAtt
};
$.ajax({
type: "POST",
data: JSON.stringify(request),
url: $_SetEventScheduler,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var data;
if (msg.hasOwnProperty("d")) {
data = msg.d;
}
else
data = msg;
if (data.success) {
$("#scheduler").data("kendoScheduler").dataSource.read();
}
else {
}
}
});
}
I noticed that API show me logged in but calendar is not stored in case of multiple accounts,so it asks me again to select the account.
Summary: I want to save the complete scenario (may be calendar_id or any unique identifier) which can tell API which account and which calendar should be picked up.
If you need more details, please let me know.
I simply used the auth2 implementation and it is working perfect.
Basically current session state function do not work properly in old API. That's why it was asking every time for selecting the account and calendar.
I am fetching google contacts using https://www.googleapis.com/auth/contacts.readonly in javascript working fine on website desktop view but when I am changing view to mobile for website this is not working for me please help me to find out this problem with mobile view
sample code
<script src="https://apis.google.com/js/client.js"></script>
function auth() { $('.loader').css('display','block')
var client_id = "<?php echo config::get('app.client_id') ?>";
var scope = 'https://www.googleapis.com/auth/contacts.readonly';
gapi.load('auth', function(){
gapi.auth.authorize(
{ client_id: client_id, scope: scope, immediate: false }, authResult);
})
return false;
}
function authResult(_Result){ if (_Result && !_Result.error)
{ loadPeopleApi(); }}
function loadPeopleApi(){
gapi.client.load('https://people.googleapis.com/$discovery/rest',
'v2', showContacts);
}
function showContacts()
{
var request = gapi.client.people.people.connections.list({
'resourceName': 'people/me',
'pageSize': 1999,
'requestMask.includeField':'person.email_addresses,person.names,person.photos',
'sortOrder':'FIRST_NAME_ASCENDING',
});
request.execute(function(resp) {
})
}
I have the following jquery script in a Razor view with layout set to the null.
<script type="text/javascript">
jQuery(document).ready(function () {
$('#shareapp').click(function () {
check_if_fb_is_defined();
});
window.fbactivity_id = '#Model.Id';
window.fbactivity_name = 'your-hollywood-movie';
window.wallpost_name = 'How would be your hollywood movie poster look like ?';
window.wallpost_picture = '#ViewBag.ImageURL';
window.wallpost_description = 'How would be your hollywood movie poster look like?';
window.wallpost_link = '#Html.Raw(string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority,Url.Action("campaign_result", "facebook", new { #resultid = Model.Id, #imgURL = ViewBag.ImageURL })))';
window.wallpost_caption = 'Ozhay';
window.tags = 'Naser';
function check_if_fb_is_defined() {
if (typeof (FB) === 'undefined') {
fbsharer();
} else {
PostShare('#Html.Raw(string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority,Url.Action("campaign_result", "facebook", new { #resultid = Model.Id, #imgURL = ViewBag.ImageURL})))';
}
}
function PostShare(mylink) {
FB.ui({
method: 'share',
href: mylink,
hashtag: '#Ozhay',
}, function (response) {
if (response && !response.error_message) {
ga('send', 'event', 'Wallpost', 'Facebook', window.fbactivity_name, window.fbactivity_id);
} else {
ga('send', 'event', 'Wallpost', 'No', window.fbactivity_name, window.fbactivity_id);
}
});
}
//if FB is undefined
function fbsharer() {
ga('send', 'event', 'Dialog', 'Facebook', window.fbactivity_name, window.fbactivity_id);
window.fb_sharer_url = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.wallpost_link);
window.popupWindow = window.open(window.fb_sharer_url, 'facebooksharer', 'height=567,width=572');
var popupTimer = window.setInterval(function () {
if (typeof window.popupWindow !== 'undefined') {
if (window.popupWindow.closed !== false) {
window.clearInterval(popupTimer);
}
}
}, 200);
}
})
</script>
I have added Jquery script file to the view but for whatever reason When I click on a link that has shareapp id nothing happens. This is a bit strange to me where sometimes before it worked. your thoughts about this?
FB is undefined - where do you declare FB?
function check_if_fb_is_defined() {
if (typeof (FB) === 'undefined') {
fbsharer();
} else {
Syntax error - Need ')' before ';' at end of PostShare.
PostShare('#Html.Raw(string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority,Url.Action("campaign_result", "facebook", new { #resultid = Model.Id, #imgURL = ViewBag.ImageURL})))';
}
}
})