Server side code not working in google app script - javascript

Hi I am trying to do a simple thing:
1) create two links in my HTML page 2) When user clicks on link1- I want it to call a server side function that displays "Hello World". But when i click on link1- I am not able to see "Hello World" getting displayed anywhere.
I have tried doing this multiple times with different variations but it is not working. Thanks in advance !!
Here is my code
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('IndexHTML').evaluate()
.setTitle('Simple App')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function doSomething(){
return ContentService.createTextOutput('Hello World');
}
IndexHTML.html
<!DOCTYPE html>
<html>
<head>
<?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
</head>
<body>
<h1>Simple App</h1>
<p>
Click on the buttons to view roles
</p>
<a href = "#" id = "index1" >I am index1</a>
<a href = "#" id = "index2" >I am index2</a>
<?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
</body>
</html>
JavaScript.html
<!-- Load the jQuery and jQuery UI libraries. -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<!-- Custom client-side JavaScript code. -->
<script>
$(document).ready(function() {
$("#index1").click(function() {
google.script.run.doSomething() ;
}
});
});
</script>
Stylesheet.html
<!-- Load the jQuery UI styles. -->
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<!-- Custom styles. -->
<style>
body
{
background-color:red;
}
</style>

You are not seeing "Hello World" displayed anywhere because you have not written any code to display it!
All your code does is run server-side doSomething() function, which returns text output. You need to add a success handler to your google.script.run and specify a callback function to run after the server-side function returns successfully, e.g:
google.script.run.withSuccessHandler(processResult).doSomething();
Then write a processResult() javascript function that accepts server return as first argument and does whatever you need to do with it, i.e.:
function processResult(data) {
console.log(data);
}
See google.script.run reference and HTML Service success handlers reference for more details.

Related

why script doesnt run?

Well i am working on a website wordpress and i want to add javascript code to the article but it doesnt run !!
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
document.write(5 + 6);
</script>
</body>
</html>
here the code , i tried custom field but it doesnt work also .
enter image description here
where i add the code exactly
If you're using gutenberg editor then you need to add custom html block to print out your script.
Check my backend screenshot: https://prnt.sc/rjqti4
Check my frontend screenshot: https://prnt.sc/rjqu3y
And if you're trying to do it on custom code then you should go for create a custom template or on single.php or on page.php file you simply use this code to load the desired items. Basically this is not the proper way to add script in WordPress though if you're using this script only on certain pages.
I would assume wordpress is stripping it out, you may need a plugin such as https://wordpress.org/plugins/simple-embed-code/#description to use script tags inside a post
You can add javascript code inside WordPress post > "Text" tab like:
<script type="text/javascript">// <![CDATA[
document.write(5 + 6);
console.log("Please check console: ", (5+6));
// ]]></script>
After adding this, save the WP post and then view the page in the browser.
<!doctype html>
<html lang="en">
<head>
<title>Greetings Page</title>
<link rel="stylesheet" href="./first.css" />
</head>
<body>
<h1>Greetings</h1>
<p id="greeting">Hello, World</p>
<script type="text/javascript">
setTimeout(function() {
document.getElementById('greeting').innerHTML = 'Hello JavaScript!';
}, 3000);
</script>
</body>
</html>

Google Apps Script switching html files

I'm wondering if it is possible with google apps script to display the contents of one html file
return HtmlService.createHtmlOutputFromFile('0');
, within the file have a button, and when the button is pressed it will cause the screen to erase the current information and replace itself with a second html file
return HtmlService.createHtmlOutputFromFile('1');
. *note I am NOT wanting to link to a google document nor another webpage. Simply wanting to know if you can switch between html files within the same script document. If it is possible, my reasoning is to have a "menu" page that will display different topics and keep everthing in one document to be more organized.
It's possible to an extent. We will imply have a function to grab the information from an HTML file and then write it on the page. If you want to be able to navigate, then each .html file you have must have the following function in the <script></script>
function changePage(page) {
document.open(); //should work fine without this
document.write(page);
document.close(); //should work fine without this
}
this bit will handle changing the content of the entire page with new content. Now we need to get that content somehow. This will be done with a function inside of a .gs file in your Google Script that looks like this
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
}
Then inside of your page, whenever you want to change to a new one you need to have let's say a button:
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
In this case the newPage() function expects a string that will say what is the name of the html. So following the logic we will do
return HtmlService.createHtmlOutputFromFile('success').getContent()`
once we press that button and once that script finishes and returns the string of an HTML we want, we then use that to set the HTML of the current page.
Here is the full example of how it would work. You can navigate between Index.html and success.html
Code.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function newPage(page) {
return HtmlService.createHtmlOutputFromFile(page).getContent()
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
First Page
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('success')">Next Page</button>
</body>
</html>
success.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<script>
function changePage(page) {
document.open();
document.write(page);
document.close();
}
</script>
<body>
It worked!
<button onclick="google.script.run.withSuccessHandler(changePage).newPage('Index')">First Page</button>
</body>
</html>

Page not loading when loaded from an hlink?

I have made a page in javascript and calls a function in his onload, but that didn't called if its loaded from hlink, but call that function if reload the page, any help will be appreciated.
i have a function name loadbody in external Js file here is my function
function loadbody(){
alert("Get values from local storage");
}
i write this function in doument.ready() . here is my index page
<body onload="loadbody()">
<h1> this is phonegap indexpage </h1>
</body>
Just use a onclick event in hlink tag :)
here is your HTML page ::
<!DOCTYPE html>
<html>
<head>
<title>Js </title>
<script src="script.js"></script>
</head>
<body>
<h1> this is phonegap indexpage </h1>
<a href='http://www.google.com' onclick='loadbody();'>mylink</a>
</body>
</html>
Here is your external JS page ::
function loadbody(){
alert("Get values from local storage");
}

Load html file passed as parameter using in jquery?

I am a newbie in jquery. I am trying to create a page, which loads the contents without reloading the page. In my test page, i have 2 links i.e. link 1 and link 2. When the default page is clicked. It just says 'Hello'. When clicked on either of link, it shoud say 'Hello link1' (if link1 is clicked), 'Hello link2' (when link2) is clicked. Link1 contents(html) is in link1.html and link2 contents is in link2.html file. Whenever either of the link is clicked, it should pass name of the link's html page as parameter.
here is what i did:
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function test(filename){
alert(filename);
var b = $("a").attr("title");
alert(b);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(b).fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
The problem is if i just pass the name of html file as parameter, it doesn't get read as string value instead it get's read as object. The first alert in code will give [object Object] message. I can read the text from title of the link by using .attr attribute and can load the page using .load attribute. I can also change the contents of page by directly giving html page name in .load attribute (commented out in code).
Can anyone tell how i can pass name of the html page as parameter rather than hardcoding or reading through title?
Thank you.
If you are using server side scripting such as PHP you may want to look into jQuery's $.ajax()
just remove the ready() and click() function, leave the test function alone
function test(filename){
alert(filename);
//$('#menuContents').load($(filename)).fadeIn("slow");
//$('#menuContents').load('link1.html').fadeIn("slow");
$('#menuContents').load(filename).fadeIn("slow");
}
ps. in fact when you define a function in jquery click function, the function can not be called outside, you need to define the test function in gloal, then you can call it in anywhere include a.href
There is a nice way to do this below
<html>
<head>
<title>Ajax Practice</title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function (e){
$('#menuContents').load($(this).attr('href')).fadeIn("slow");
e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<div id="menu">
link1
link2
</div>
<div id="menuContents">
<h1>Hello!</h1>
</div>
</div>
</body>
</html>
$("a").click(function test(filename){
filename is in fact the event object. Please check out http://api.jquery.com/click/
Besides, in your code:
link1
will call the function test, so you can define this function in your javascript code
function test(filename){
alert(filename)
// your code here
}
Try the example here http://jsfiddle.net/WUBsq/
There are many cleaner ways you can have, for instance:
<a class="refresh" data-title="link1.html">click here</a>
...
$(document).ready(function(){
$('a.refresh').click(function(){
var title = $(this).attr('data-title');
alert(title);
// your code here
})
})
Try here : http://jsfiddle.net/WUBsq/3/

Access JavaScript function in a programatically iFrame

I am trying to access a JavaScript function in a programatically created iFrame from a JavaScript function outside. I tried several ways, but was not successful. L ike window.frames['frameid'], etc.
Could you please provide me the correct syntax?
Yes, they are in the same domain. Actually, I am using ExtJS framework. I have a JSP inside an iFrame, I would like to call the javascript functions in the JSP from the a javascript function outside which is basically in a JS file.
Here's a more appropriate example based on your comments ;)
The main page
<html>
<head>
<title>Main Page</title>
</head>
<body>
<iframe src="iframe.html"></iframe>
<script>
var receiver = {
listen:function(msg){
alert(msg);
}
};
</script>
</body>
</html>
The iframe page: iframe.html, but can be a JSP with similar output
<html>
<head>
<title>iframe page</title>
<script src="external.js"></script>
</head>
<body>
<!-- some content here -->
<script>
externalFunction('hello', window);
</script>
</body>
</html>
And the JS file: external.js
function externalFunction(msg, w){
w.parent.receiver.listen(msg);
}
Place those 3 files in the same directory and open the main page.
You should get a popup with "hello".

Categories

Resources