What is wrong with this script?
I'm trying to get the tasklists from google using ggogle apis for javascript.
This is the code:
<html>
<head>
<title>Google auth</title>
<script src="https://apis.google.com/js/client.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
<script>
function auth() {
var config = {
'client_id': '198071236552-5ou4utkvmknkcj48prfah7a4mpm86f5v.apps.googleusercontent.com',
'scope': 'https://www.googleapis.com/auth/tasks https://www.googleapis.com/auth/tasks.readonly'
};
gapi.auth.authorize(config, function() {
makeTasksApiCall();
});
}
function makeTasksApiCall() {
gapi.client.load('tasks', 'v1').then(function () {
var request = gapi.tasks.tasklists.list();
request.execute(function (resp) {
for (var i = 0; i < resp.items.length; i++) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(resp.items[i].summary));
document.getElementById('tasks').appendChild(li);
}
});
});
}
</script>
</head>
<body>
<button onclick="auth();">GET CONTACTS FEED</button>
<div id="tasks">
</div>
</body>
</html>
Error:
gapi.tasks is undefined
Thank you
Related
I've searched through SO before asking but I didn't find anything that fit.
I'm trying to use App Scripts in Google Workspace to create a list of users.
I'm getting the users successfully from Google.
That array is being passed to JS successfully.
I must not understand something about KO because I'm seeing this.users being updated successfully in the console log. But the view is never updated. The does empty itself when this.users = []. But when I do this.users = u or if I for loop and try this.users.push(u[i]), it does not updated.
So the main question is: Why doesn't the list updated with this.users =u; ?
Thanks!
Code.GS:
function doGet(request) {
return HtmlService.createTemplateFromFile('Page')
.evaluate();
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getUsers() {
var users = [];
var options = {
domain: 'mydomain.com', // anonymized for this.
projection: 'full',
viewType: 'admin_view',
maxResults: 100,
orderBy: 'email',
};
do {
var response = AdminDirectory.Users.list(options);
response.users.forEach(function (user) {
const u = {id:user.id,
fullName:user.name.fullName,
primaryEmail:user.primaryEmail,
org:user.orgUnitPath,
lastLogin:user.lastLoginTime,
enrolled2fa:user.isEnrolledIn2Sv}
users.push(u);
});
if (response.nextPageToken) {
options.pageToken = response.nextPageToken;
}
} while (response.nextPageToken);
Logger.log(users); // just for testing.
return users
}
Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<!-- Bootstrap CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
<?!= include('Stylesheet'); ?>
</head>
<body>
<div id="app">
<h1>User Manager</h1>
<div>
<ul id="usersUL" data-bind="foreach: users">
<li data-bind="text: primaryEmail">Loading...</li>
</ul>
</div>
</div>
<!-- KnockoutjS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.0/knockout-min.js"></script>
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous">
</script>
<?!= include('Javascript'); ?>
</body>
</html>
Javascript.html (Google requires the .html... This is the right way for app script... Also, I realize the applyBindings is in the OnLoad. I get the same results when it's not.)
<script>
var vm = {
users: ko.observableArray(),
updateUsers: function(u) {
var self = this;
self.users([{primaryEmail:"Loading"}]);
console.log(this.users);
/*
for (let i = 0; i < u.length; i++) {
this.users.push(u[i]);
}
*/
this.users = u;
console.log(this.users);
}
}
function UsersViewModel() {
var self = this;
users: ko.observableArray();
}
window.onload = function() {
console.log("applying bindings");
ko.applyBindings(vm, document.querySelector("#app"));
console.log("getting users");
google.script.run.withSuccessHandler(vm.updateUsers).getUsers();
}
</script>
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider.when('/', {
template: '',
controller: 'DefaultController as dc'
}).when('/rent', {
templateUrl: 'views/partials/rent.html',
controller: 'rentController as rc'
}).when('/buy', {
templateUrl: 'views/partials/buy.html',
controller: 'buyController as bc'
});
}); //end config
myApp.controller('DefaultController', DefaultController);
myApp.controller("rentController", rentController);
myApp.controller("buyController", buyController);
function DefaultController() {
console.log('inside of DefaultController');
var vm = this;
vm.checkPost = function() {
console.log('checkpost clicked');
};
} //end controller
function rentController(RealStateService) {
console.log('inside of rent controller');
var vm = this;
vm.rentArray = [];
vm.info = false;
vm.getProperties = function() {
console.log('port');
RealStateService.serverPractice().then(function(res) {
RealStateService.data.forEach(function(data) {
if (data.rent) {
vm.rentArray.push(data);
}
}); //end for each
}); //end then
}; //end getProperties
vm.showInfo = function(index) {
vm.info = true;
console.log('in get Info');
vm.info = vm.rentArray[index];
console.log(vm.info);
}; //end get info
}
function buyController(RealStateService) {
console.log('inside of buy controller');
var vm = this;
vm.rentArray = [];
vm.info = false;
vm.getProperties = function() {
RealStateService.serverPractice().then(function(res) {
RealStateService.data.forEach(function(data) {
if (data.cost) {
vm.rentArray.push(data);
}
}); //end for each
}); //end then
}; //end getProperties
vm.showInfo = function(index) {
vm.info = true;
console.log('in get Info');
vm.info = vm.rentArray[index];
console.log(vm.info);
}; //end get info
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Weekend Challenge #5</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles/style.css">
<script src="vendors/angular.min.js" charset="utf-8"></script>
<script src="vendors/angular-route.min.js" charset="utf-8"></script>
<script src="scripts/client.js" charset="utf-8"></script>
<script src="scripts/services/realState.js" charset="utf-8"></script>
</head>
<body ng-app='myApp'>
<div class="container-fluid">
<div class="navBar">
<h1>Weekend Challenge #5</h1>
<button type="button" name="button">See for rent</button>
<button type="button" name="button">See for sale</button>
<button type="button" name="button">post rent/sale</button>
</div>
<ng-view></ng-view>
<h1>Post</h1>
<div class="post">
<label for="type">Type: </label>
<select name='type' ng-model='dc.type'>
<option value="">Rent</option>
<option value="">Sell</option>
</select>
<button type="button" name="button" ng-click='dc.checkPost()'>Begin</button>
</div>
</div>
</body>
</html>
The app is not running here on SO, but basically I am not getting the log at the default controller when I click the begin button. I am not sure what the problem is. I should see in the console 'checkpost cliked'
I think you forgot to give angular-route.js. Try again by adding the below script link
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
I am getting "Uncaught ReferenceError: isApp is not defined" in the console,
I had tried to find solution for this error from long morning but didn't able to get much, both of my isApp.js and mApp.js are saved in folder named as "js", can someone please help me to get out of this thing....thanks in advance
//"......isApp.js file code starts from here..............."
var iA = function () {
var t = this;
this.user;
var IsInvite = false;
this.serverUrl = someLocalhostUrl;
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initialize = function () {
t.getUser();
var pk = typeof t.user;
if (!(typeof t.user === 'object')) {
t.user = null;
t.setUser();
}
}();
};
var isApp = new iA();
//"......isApp.js file code endss here..............."
//"......mApp.js file code starts from here..............."
var mApp = function () {
//var PostUrl = "http://localhost:52015/"
var PostUrl = isApp.serverUrl + "/";
var t = this;
var u = {};
this.ph, this.loc;
var user, Email, UserName;
var LoggedIn;
this.initiate = function () {
u = isApp.getUser();
if (u && u.LoggedIn) {
if (window.location.href.indexOf("index") == -1)
$.mobile.changePage("index.html#p-start");
//window.location = "index.html#p-home";
}
};
//some function - structure of functions is shown below
//this.function1 = function(){
//do something
//};
//lot of function
this.initiate();
};
m = new mApp();
//"......mApp.js file code ends here..............."
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
</style>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--css starts here-->
<link href="css/jquery.mobile-1.4.5.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<!--css ends here-->
<!--js starts here-->
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<script src="js/jquery.signalR-2.2.0.min.js"></script>
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
<script src="js/home.js"></script>
<!--js ends here-->
<!--<script>
$(function () {
$('.image').click(function () {
alert("selection needed");
});
document.getElementById("startDate").valueAsDate = new Date();
});
</script>-->
</head>
<body>
<div data-role="page" id="p-start">
<div data-role="main" class="ui-content ui-responsive ui-body-a">
<div class="align-center">
<h3>Its our Rocking app</h3>
<a href="#p-login">
<img src="images/temp-logo.jpg" class="logo" />
</a>
</div>
</div>
</div>
</body>
</html>
You load your mApp.js file before your isApp.js file and both scripts are executed right away, so naturally the function isn't defined yet when mApp.js is executed.
<script src="js/mApp.js"></script>
<script src="js/isApp.js"></script>
I am trying to implement module pattern in my code according to some examples online, what I am trying to achieve is to simply bind a button click event in my html to a function (which is not working), below is my HTML:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input type="button" id="btn-msg" value="click me"/>
</body>
</html>
and here is my JS:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
Here is as well a link to my plunker: http://plnkr.co/edit/tA94lzMPHkUOr8QuyJK8?p=preview
All what am trying to achieve is to bind the button to the function.
You need to call the anonymous function, not assign it. See the () below:
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
}());
Here's an updated plunkr with this change: http://plnkr.co/edit/uiWHmtkMFEKywvFRk6DF?p=info
I believe that Evan Knowles wanted to say this:
//CRUD Start
var Rutherford = Rutherford || {};
Rutherford.crud = (function() {
function _readLists() {
alert("am here");
}
return {
readLists: _readLists
}
})( );
Rutherford.Initiate = function() {
$("#btn-msg").click(Rutherford.crud.readLists);
}
$(function() {
Rutherford.Initiate();
});
This would work properly if you can use Rutherford as a Singleton.
In my application I am redirecting the application to some session_expiry.jsp when session has expired, so in that moment before redirecting to session_expiry.jsp if any popups were opened then I need to close using javascript. I can't use the popup names because I can't hard code the names for whole application.
please help me if you have any idea.
Thanks,
Jampanna
var WindowDialog = new function() {
this.openedWindows = {};
this.open = function(instanceName) {
var handle = window.open(Array.prototype.splice.call(arguments, 1));
this.openedWindows[instanceName] = handle;
return handle;
};
this.close = function(instanceName) {
if(this.openedWindows[instanceName])
this.openedWindows[instanceName].close();
};
this.closeAll = function() {
for(var dialog in this.openedWindows)
this.openedWindows[dialog].close();
};
};
// close all dialogs
WindowDialog.closeAll();
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
var windows = [];
function conf() {
var rand_no_c = Math.random();
var con = rand_no_c.toString();
var_win = 'child'+con.substring(2);
windows[var_win] = window.open('child.aspx',var_win,'width=1100,height=700,left=50,top=20,status=0');
}
function closewindow() {
for(w in windows) {
if(!windows[w].closed) {
windows[w].close();
}
}
}
</script>
<style type="text/css">
* {margin:0;padding:0;}
</style>
</head>
<body>
<div>
<button type="button" onclick="conf();">open child window</button>
<button type="button" onclick="closewindow();">close all windows</button>
</div>
</body>
</html>