I want to update page for keyboard event.
I wired the keyboard event through $window.document.onkeydown. (I know this is not good but it is supposed to work)
However, I find that the page is not updating even the model is changed!
Where am I missing ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode); //the model is changed here
};
}
</script>
</head>
<body ng-app>
<div ng-controller="Main">
{{keyCode}}
</div>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
</body>
</html>
---Edit---
Here is the code snippet you can try
http://plnkr.co/edit/DFUfHzQPla031IEDdCo3?p=preview
Whenever you want to execute an expression that is outside Angular's scope you need to let Angular know that a change has been made so it can perform a proper digest cycle. You can do this using the $scope.$apply() method. So your example becomes:
function Main ($scope, $window) {
$scope.keyCode = 0;
$window.document.onkeydown = function (event) {
$scope.$apply(function () {
$scope.keyCode = event.keyCode;
console.log($scope.keyCode);
});
};
}
Please see updated plunker here
Related
So I'm following the examples on here: https://developers.google.com/apps-script/guides/html/reference/run and they don't work. I get the error not in the return from the failure handler. Google never asked for auths. I figured out how to add auths manually to the manifest but idk what to add to fix it.
MainScript.gs
function doGet() {
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(HtmlService.createHtmlOutputFromFile('Index'), 'test');
}
function getUnreadEmails() {
// 'got' instead of 'get' will throw an error.
Logger.log("yes");
return GmailApp.getInboxUnreadCount();
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onFailure(error) {
var div = document.getElementById('output');
div.innerHTML = error;
}
google.script.run.withFailureHandler(onFailure)
.getUnreadEmails();
</script>
</head>
<body>
<div id="output"></div>
<button onclick="google.script.host.close()">Cancel</button>
</body>
</html>
Resulting Dialogue Box:
This worked for me:
Just run showMyTestDialog();
I think the difference was that you need to add the withSuccessHandler(). Most of the time I don't use the failure handler.
html:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
google.script.run
.withFailureHandler((msg)=>{document.getElementById('output').innerHTML=msg})
.withSuccessHandler((msg)=>{document.getElementById('output').innerHTML=msg})
.getUnreadEmails();
</script>
</head>
<body>
<div id="output"></div>
<button onclick="google.script.host.close()">Cancel</button>
</body>
</html>
gs:
function getUnreadEmails() {
return "Hello World"
}
function showMyTestDialog() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile('ah1'), 'test');
}
Some of it's written slightly different but it's the same thing really. Feel free to ask questions. I tend to be rather light in the explanation department.
I was bit worry about the auto-refresh functionality in angular js. I tried with time-out concept.It worked page was refreshing for time interval what I set.
app.controller('buildCtrl', ['$timeout', function($timeout) {
dataService.getAppData($scope.periodData).success(function(response) {
$scope.loading = false;
bc.serviceGridData = response.appdata;
$scope.data = response.appdata;
$timeout(function() {
dataService.getAppData($scope.periodData);
$state.reload();
}, 20000)
}
}]);
Now, I need a button to enable and disable (on/off) this $timeout functionality.If it is on the page need to refresh if it is off page should not refresh.The time interval needs to clear.
Can you please help me on this.How a single button can work to set this on/off functionality.
Thanks in Advance.
var app = angular.module( 'app', [ ] );
app.controller( 'MainCtrl', function( $scope,$timeout ) {
$scope.StartTimeOut=false;
$scope.ON_Off=function(isOn)
{
if(isOn)
{
alert("true")
}
else
{
alert("false")
}
}
} );
<!doctype html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<input type="button" value="Click" ng-click=ON_Off(StartTimeOut=!StartTimeOut) />
</div>
<script src="app.js"></script>
</body>
</html>
You can write your timeout code in if and else part of function.
How to observe property changes if I use dom-bind? The change in property is updated inside curly brackets, so I assume that there is some event related to change, but I don't know it's name.
Example:
<!doctype html>
<html lang="">
<head >
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<style>
</style>
</head>
<body>
<template is="dom-bind" id="app2">
<p>test: <span>{{test}}</span></p>
<input type="button" value="Change" on-click="chTest">
</template>
<script>
(function (document) {
'use strict';
var app = document.querySelector('#app2');
app.test = "original value";
app.addEventListener('test-changed', function () {
console.log('change listener fired');
});
app.addEventListener('dom-change', function () {
console.log("dom-change");
});
app.chTest = function () {
console.log('click');
app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
// app.notifyPath("test", "notify value");
};
})(document);
</script>
</body>
</html>
EDIT:
There is a need to clarify my question: I want to invoke some function, when app.test changes.
You have the answer commented out. Comment the line app.test and uncomment the app.notifyPath
// app.test = "new value";
// notifyPath-setter will fire "test-changed"-event
app.notifyPath("test", "notify value");
Working jsbin below:
http://jsbin.com/vaqosi/edit?html,console,output
Edit: One workaround is to two way bind it into a child element and listen for its changes. I have updated the jsbin.
The title says it all : How do i make a div/iframe clickable only once
Im stuck with this for a long time,so I decided to ask for a little help.
Please,if you wanna help,put the whole script in here,not just a part of it so I get confused.
Thank you.
This is not very clear question though and it has no tags, but i try..
Assuming that you are using javascript. You can add counter variabel and check it every time you run the event.
window.load = function() {
var count = 0;
document.getElementById('div_or_iframe').onclick = function() {
if(count == 0) { // check if counter is 0
return true; // continue
count++; // update counter by +1
}
else { // if counter is 0 > clicking anything doesn't work
return false; // prevent action
}
}
}
I think that #aksu's answer is much easier, but I got it to work with classes and jquery. This will allow you to have several elements on your page be clickable only once.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function someFunction(obj) {
if ($(obj).hasClass("clickable")) {
// perform the code you want
alert("Function will be performed");
// make not clickable
$(obj).removeClass("clickable");
} else {
alert("Already Clicked");
}
}
</script>
</head>
<body>
<div class="clickable" onclick="someFunction(this)">CLICK HERE</span>
</body>
</html>
I have an paperscript and I need to call a function in this paperscript from my Javascript to change some values.
I know that I can write it some way, that I dont need paperscript but only javascript.
but I dont get it work.
Are there some other ways I can just export a paperscript function to javascript? or there are some other ways
I also saw something like this: but it also didnt work :-(
https://github.com/paperjs/paper.js/issues/17
--------- my current try to solve it --------
my javascript:
var paperscript = {};
my paperscript code till now:
this.someFunction = function(){ /*doSomething*/ };
//...
paper.install(window.paperscript);
the call outside of paperscript:
paperscript.someFunction(); //error, object doesnt have that function :-(
In this code (jsbin here), javascript is used to call someFunction in the paperscript, turning the rectangle red:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script type="text/javascript" src="https://raw.github.com/paperjs/paper.js/master/dist/paper.js"></script>
<script type="text/javascript">
var paperscript = {};
window.onload = function(){
paperscript.someFunction();
}
</script>
<script type="text/paperscript" canvas="p">
this.someFunction = function(){
rect1.fillColor = new Color('red');
};
var rect1 = new Path.Rectangle({
point: [0, 10],
size: [100, 100],
strokeColor: 'black'
});
paper.install(window.paperscript);
</script>
</head>
<body>
<canvas id="p" resize></canvas>
</body>
</html>
My guess is that you have not been waiting until the paperscript loads before trying to access it with your javascript. Paperscript does not (normally) load until after images have loaded; that's why this code uses window.onload to call the paperscript function.