Please can someone tell me why this isn't working before I defenestrate everything on my desk.
I have the following html document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html"; charset=utf-8 />
<title>Sample Gauge using JQuery</title>
</head>
<body>
<canvas id="gauge" width="200" height="200">
Your web browser does not support HTML 5 because you fail.
</canvas>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="gauge.js"></script>
</body>
</html>
And gauge.js:
$(document).ready(function () {
//(canvas gets assigned)
startRendering();
function startRendering() {
setInterval("render();", 1000);
}
function render() {
renderBackground();
renderNeedle(-172);
}
//(Defined functions for rendering a gauge)
});
render() does not get called, but if I change the setInterval line to just 'render()' it does.
Also, if I change setInterval() to contain something like "alert('LOL')" then it does work, it just doesn't seem to work with functions I have defined.
With or without a semicolon at the end of the function(s) to call makes no difference, nor does prefixing this. to my functions.
I'm trying to get this working so I can start using it to animate the gauge. Can anyone see why it isn't working?
I hate web development.
Change
setInterval("render();", 1000);
To
setInterval(render, 1000);
When you pass a string to setInterval(), the code inside is executed outside of the current scope. It's much more appropriate to just pass the function anyway. Functions can be passed around just like any other variable if you leave the parenthesis off.
I'm not sure why using just "render()" doesn't work but using this code will fix the problem.
function startRendering() {
setInterval(function(){
render()
}, 1000);
}
Related
I am using GoogleSheets HTMLService. I am calling google.script.run from my Html page's script. But it is always going to FailureHandler. What is wrong in it? Please see the code below. When I run it, it always shows the alert Failed. Also, the logger does not show any error. It is also not showing the console log "Inside Hello" in the hello() function. Do we also need to do some browser settings (I am using chrome - javascript allowed).
[UPDATED]
After replacing Logger.log with console.log, I am seeing it as Transport Error.
modeDialog.gs
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile("test");
html.setWidth(90).setHeight(1);
var ui = SpreadsheetApp.getUi().showModalDialog(html, "Opening ..." );
}
function hello() {
console.log("Inside Hello");
return "hello";
}
test.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
function onSuccess(str) {
window.alert("executed");
}
function onFailure(error) {
window.alert("failed");
Logger.log(error);
}
google.script.run.withSuccessHandler(onSuccess).withFailureHandler(onFailure).hello();
</script>
</head>
<body>
<div id="failureContent"></div>
Hello world
</body>
</html>
As I mentioned that it was working earlier in Chrome and is currently working in FireFox, I tested it again after changing my chrome settings to default by going to Chrome > Settings > Advanced > Reset and clean up > Restore settings to their original defaults.
It is working fine after that. So setting this as the answer.
I ran it this way:
GS:
function openDialog() {
SpreadsheetApp.getUi().showModalDialog(HtmlService.createHtmlOutputFromFile("ah3"), "Opening ..." );
}
function hello() {
return "hello";
}
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello world
<script>
window.onload=function(){
google.script.run
.withSuccessHandler(function(str){window.alert("executed");})
.withFailureHandler(function(error){window.alert("failed");})
.hello();
}
console.log('MyCode');
</script>
</body>
</html>
I just like to use onReadyState function or onload to run most javascript so that html is already loaded. Not that it makes much difference in this trivial example. Also I tend to put the scripts in the body rather than in the head.
Source.HTML
<!DOCTYPE html>
<html>
<body>
<h1 style="color:red">Hello World</h1>
<p id="demo" style="color:red">Click the button below to remove the style attribute from the header above.</p>
</body>
</html>
Parser.html
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Parse</button>
<script>
function myFunction()
{
document.getElementsByTagName("H1")[0].removeAttribute("style");
document.getElementsByTagName("P")[0].removeAttribute("style");
};
</script>
</body>
</html>
Now what i need guidance for was , i need the Parse button from parser.html to apply the functions for source.html and save as output.html in same path of source.html...
Kindly help me out ...
What Willshaw said is correct. Javascript don't have that much power to solve your problem. You need to go for some serverside scripting.
I agree with the previous answer, it is a pretty strange way to do.
But, the DOM parsing being really easy with javascript, you could do the parsing on the client side, I guess, and then send the processed html to your backend, and save it in result.html.
I will use Jquery for the example, way easier.
Parser.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>load demo</title>
<style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="btnLoad">Load Source</button>
<button id="btnParse">Parse</button>
<button id="btnSave">Save</button>
<div style="display:none" id="sourceContainer"></div>
<script>
$(document).ready( function() {
$(".btnLoad").click(function(){$("#sourceContainer").load("/source.html");})
$(".btnParse").click(function(){
$(".sourceContainer h1").removeAttr("style");
$(".sourceContainer p").removeAttr("style");
})
$(".btnSave").click(function(){
var data = {
html: $("#sourceContainer").html()
};
//replace first param by the backend url, add callback function
$.post("http://...", data, ...);
})
});
</script>
</body>
</html>
I am trying to learn about angular Directives and following the example given in here (http://docs.angularjs.org/guide/directive), have written the below code. Could anyone please guide me as what am i doing wrong that the data from the scope of the controller is not being read in the directive? The site says nothing about it! And there is no error upon executing the code, it just does not display any data. Please help.
//My Html
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>Angular Directives</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<div data-ng-controller = "MyCtrl"></div>
<div data-template-expanding-directive></div>
<script src="lib/angular.js"></script>
<script src="js/templateExpandingDirective.js"></script>
</body>
</html>
//My JS
'use strict';
var myapp = angular.module('MyApp',[]);
myapp.controller('MyCtrl',['$scope',function($scope){
$scope.customer = {
name: "Jenny",
place: "England"
};
}])
.directive('templateExpandingDirective',function(){
return {
template: 'Name: {{customer.name}}'
};
});
Regards
The directive is currently out of controller scope. So you need to have directive inside the controller scope. The html should be like this -
<div data-ng-controller = "MyCtrl">
<div data-template-expanding-directive></div>
</div>
If you do not move the directive element inside the controller div element then you can either have one more parent 'div' element or access the data from global root scope.
I am trying to implement Ooyala's player in my code and I was told that if I wanted to use buttons to switch the content of the video player then I should use the setEmbedCode function but the examples they have on their site aren't very clear.
What I want to have happen is to simply have a link that when clicked will change the video to a different URL/embed code. I've tried using the 'setQueryStringParameters'
document.getElementById('video-player'+pageNum).setQueryStringParameters({embedCode:videoURL})
All I get with that is a:
'is not a function message.'
var url = 'http://player.ooyala.com/player.js?embedCode='+videoURL+'&targetReplaceId=video-player'+pageNum+'';
var tempScript = document.createElement('script');
tempScript.type = 'text/javascript';
tempScript.src = url;
When I call this it creates the video player just fine, but I'm not sure how to change the embed code once it's created.
Check this sample code from ooyala site. "SwitchMovie" will play different video with different embedcode.
http://demo.ooyala.com/product-demos/playerScripting-demo.html
document.getElementById('player').setQueryStringParameters({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',hide:'share,fullscreen'})
UPDATE:
The following code is working perfect for me. Try it, as I mentioned in my comments below you need to have a callback function if you need to interface with the player.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Swap Video</title>
</head>
<body>
<script src="http://player.ooyala.com/player.js?callback=receiveOoyalaEvent&playerId=player&width=480&height=360&embedCode=llMDQ6rMWxVWbvdxs2yduVEtSrNCJUk1&version=2"></script>
<script>
function receiveOoyalaEvent(playerId, eventName, eventArgs) {
}
</script>
<br><br>
<button onclick="document.getElementById('player').setQueryStringParameters({embedCode:'8wNTqa-6MkpEB1c7fNGOpoSJytLptmm9',hide:'share,fullscreen'})">Switch Movie</button>
</body>
</html>
My onload function is not working for IE7 and 8:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function onload()
{
alert("Working properly")
}
</script>
</head>
<body>
</body>
</html>
The alert doesn't happen if I try to access it with IE7 or 8 but it's working properly in Mozilla.
Can anyone suggest something which works for both IE and Mozilla?
This works only for IE.
Instead
function onload() {
alert("Working properly")
}
try this..
function window.onload() {
alert("Working properly")
}
EDIT:
Common approach for both browsers
function onload() {
alert("Working properly")
}
var browserName=navigator.appName;
if(browserName=="Microsoft Internet Explorer")
{
window.onload=onload;
}
else
{
if (document.addEventListener)
{
document.addEventListener("DOMContentLoaded", onload, false);
}
}
Use a toolkit like JQuery or Mootools, which will take care entirely of these details for you.
In JQuery, you add the link to the jquery.js, then this would look like:
$(function() { alert("Working properly"); });