I am using a similar technique as was presented in this previously asked question:
how to get value entered in UI created with the new HtmlService
However, I am seeing inconsistent behavior between web browsers and even on mobile. My problem is in some browsers (Chrome) my 2nd html page is not displaying, however, in Firefox it does.
I went so far as to use the same code was was presented by Eric Koleda in the above link. This is what I have:
function doGet(e) {
var t = HtmlService.createTemplateFromFile('page1.html');
t.action = ScriptApp.getService().getUrl();
return t.evaluate();
}
function doPost(e) {
Logger.log("In doPost = ");
var t = HtmlService.createTemplateFromFile('page2.html');
t.name = e.parameter.name;
t.comment = e.parameter.comment;
t.screenshot = e.parameter.screenshot;
return t.evaluate();
}
page1.html
<html>
<body>
<h1>Feedback Form</h1>
<form action="<?= action ?>" method="post">
Name: <input type="text" name="name" /><br/>
Comment:<br/>
<textarea name="comment"></textarea><br/>
<input type="submit" value="Submit" />
</form>
</body>
</html>
page2.html
<html>
<body>
<h1>Thanks</h1>
<p>Thank you for your feedback.</p>
Name: <?= name ?><br/>
Comment: <?= comment ?><br/>
</body>
</html>
Eric's code from his link runs fine in Chrome for me, so I am not sure why I am having this issue. Also, based on Corey G's comment in the above link, I am wondering if I should be using Templated HTML and just use HTML Service only, but Templated HTML seems to be a good fit for my app. Could it be related to my sites or something else? Thanks for your time. Larry King
Related
to demonstrate what im trying to do using a simple example:
<html>
<head>
<base target="_top">
</head>
<body>
<form id="uploaderForm" action="https://script.google.com/macros/.......exec Method="POST">
<input type="text" name="applicantName" id="applicantName">
<input type="text" name="applicantEmail" id="applicantEmail">
<input type="button" value="Submit">
</form>
<script>
.
.
.
google.script.run.withSuccessHandler(onFileUploaded)
.uploadFile(content, file.name, folderId);
</script>
so this is an example of the html and js page that is in my pc, not in the google app, i just called the google app in the form, and in the javascript part im calling a function called uploadFile, which is located in the google script, but obviously i get an error in the console , it says :
Uncaught ReferenceError: google is not defined
at uploadFiles (6166bff606ac6fee1994e592:67)
at HTMLInputElement.onclick
is it possible to call a GAS function inside JS that is not in the GAS html.
is what im trying to do even possible, the whoel reason im doing this is so that i can pass the username and email automatically from the database to the app, the app works if the html part is hosted in the google app script, but then i cant figure out how to pass the email and username to it because in this case i call the app using , so is it possible to pass the username and email through the iframe call, i dunno im very new to this i have so many questions, honestly the documentation wasn't helpful to me. please feel free to comment anything, everythign is helpful
Since you're just posting the form data, you can name the function you want to call as doPost()(instead of uploadFile) and it will receive the posted data. You have to republish the webapp as a new version after the modification.
I just ran it as a dialog. I returned the data back into the success handler and loaded by into the html to insure it was working.
HTML:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<body>
<form>
<input type="text" name="applicantName" id="applicantName"/>
<input type="text" name="applicantEmail" id="applicantEmail"/>
<input type="button" value="Submit" onclick="uploadfile(this.parentNode);" />
</form>
<div id="msg"></div>
<script>
function uploadfile(form) {
google.script.run
.withSuccessHandler((m) => document.getElementById("msg").innerHTML = m)
.uploadMyFile(form);
}
</script>
</body>
</html>
gs:
function uploadMyFile(obj) {
return `Applicant Name: ${obj.applicantName}<br />Applicant Email: ${obj.applicantEmail}`;
}
function launchFormDialog() {
SpreadsheetApp.getUi().showModelessDialog(HtmlService.createHtmlOutputFromFile('ah2'),'Test Dialog');
}
Dialog:
I'm trying to pass an object (contents of a sheet row) to an apps script template. You can see the row in the screenshot.
my function in apps script contains:
var sendableRows = rows.filter(function (row) { //ONLY CHECKED ROWS.
return row['Index'] == true;
});
var sendableRow = sendableRows[0];
Logger.log('sendableRow '+ JSON.stringify( sendableRow));
var html = HtmlService.createTemplateFromFile('RowPopup');
html.row = JSON.stringify(sendableRow);
var h =html.evaluate();
SpreadsheetApp.getUi() // Or DocumentApp or FormApp.
.showModalDialog(h, 'Create Documents');
The logger statement produces:
sendableRow {"Index":true,"Timestamp":"2019-02-12T21:09:14.000Z","FROM":222222,"CONVERSATION":"THIS IS A TEST","ME":"","relativeRow":14,"absoluteRow":15}
My Rowpopup.html is :
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
// Prevent forms from submitting.
function preventFormSubmit() {
var forms = document.querySelectorAll('forms');
for (var i = 0; i < forms.length; i++) {
forms[i].addEventListener('submit', function(event) {
event.preventDefault();
});
}
}
window.addEventListener('load', preventFormSubmit);
function handleFormSubmit(formObject) {
// the output from form goes to processDocBuildHtml
google.script.run
.withSuccessHandler(updateUrl)
.processRowPopupHTML(formObject);
}
function updateUrl(url) {
var div = document.getElementById('output');
div.innerHTML = 'Sent!';
}
</script>
</head>
<body>
<form id="myForm" onsubmit="handleFormSubmit(this)">
<div>
<label for="optionList">Click me</label>
<select id="optionList" name="email">
<option>Loading...</option>
</select>
</div>
<br>
<div>
</div>
<br>
<div>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
</div>
<div id="textboxes"></div>
<div id="insert"></div>
<input type="submit" value="Submit" />
</form>
<div id="output">
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.js"></script>
<link href="//rawgithub.com/indrimuska/jquery-editable-select/master/dist/jquery-editable-select.min.css" rel="stylesheet">
<script>
function getConversations() {
var jsonRow = <?= row ?>; //PASSED IN JSON
console.log('row');
var myObj = JSON.parse(jsonRow);
console.log(myObj['CONVERSATION']);
return myObj['CONVERSATION'];
}
</script>
</body>
When I run this I see:
Which shows some issue with "warden".
Also, I don't see the expected data outputted to console in:
console.log('row');
var myObj = JSON.parse(jsonRow);
console.log(myObj['CONVERSATION']);
What am I doing wrong?
Your client side code never calls getConversations, that is why you don't see it on the console. Among many ways to do this, you could add an IIFE to call that function by adding the following on between <script> tags
(function (){getConversations()}());
By the other hand, the referred error message on the Chrome Developers Tools Console occurs even with the simplest code like the following
function myFunction(){
var html = HtmlService.createHtmlOutputFromFile('index');
SpreadsheetApp.getUi().showModalDialog(html, 'Test')
}
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Hello world!
</body>
</html>
So it's not you, it's Google
I know this answer is not related to this OP and the place I should post is not appropriate, but for the other people who reach this page in future, I leave an answer here because I struggled to solve similar problems.
I think this error means we cannot connect from an HTML file to the scripts written in Script Editor.
So basically you can ignore this error message(maybe. If not, tell me the correct feature.)
To me, the error has occurred when executing google.script.run.myFunction(). So, at the first, I thought the error prevents this execution. However, the error was completely unrelated to this execution. It was another problem and I detected why my issue had happened by using withFailureHandler(onFailure). It emits an error message. (See more information at https://stackoverflow.com/a/33008218/3077059)
As Mr. Rubén says "So it's not you, it's Google", this error can be replayed, easily. Please don't be puzzled by this message. The error message("There was an error during the transport or processing of this request. Error code = 10, Path = /wardeninit") is useless, I think.
Ruben's great post is this -> https://stackoverflow.com/a/54756933/3077059
You have only declared the function getConversations. It's not executed until call it ().
To execute directly on loading, try
(function getConversations(){})()
I had a similar problem. But in my case, most of my users didn't have the issue. Just some users in some PCs. Then I found out that, in these cases (about 10%), if they installed Firefox and ran the app, everything worked just fine. So that was my solution: suggest Firefox when this behavior occurred.
My solution: use versioned deployments of library scripts.
I had a similar issue where I was unable to run my own functions from the sidebar in Google Sheets. The issue seemed to be connected with using a library, even though the scripts that I was attempting to execute were not dependent on the library.
When the library was connected to the container script i couldn't get functions in the sidebar to execute. When I removed the library it all worked fine. I was using the head version of the library, meaning the most current development. I decided to try managing deployments and creating versions of the project. I added a Library deployment and version, then updated my library reference, and everything works again.
References:
Why does my apps script deployed as API executable return Permission Denied?
https://developers.google.com/apps-script/concepts/deployments
A descriptive alert from Google would be helpful.
To anyone getting this error. Try to run the code in another browser, Safari, or in guest mode.
In my case, it was probably some extension, I'm still not sure but I have already spent hours on this so I won't further investigate.
This is my website. http://travelsweetnsour.com/2016/12/24/srinagar-kashmir-india/ In comment form i implemented google captcha using WP-reCAPTCHA-bp plugin. When i ignore the google captcha it does'nt show the error message.
Please help, Thanks in advance...
When you have some problem, always (always!) have a look in the developer tools of your browser.
In your case, there are some errors in the capthca plugin.
Then, i found that you load captcha JS file twice: here:
<script type="text/javascript"src="https://www.google.com/recaptcha/api.js?hl=en"></script>
and here:
<script src='https://www.google.com/recaptcha/api.js'></script>
Get rid of one of them.
In your code, pass the correct ID (id="submit-alt") for the submit button:
<script type="text/javascript">
var sub = document.getElementById('submit-alt');
document.getElementById('recaptcha-submit-btn-area').appendChild (sub);
document.getElementById('submit-alt').tabIndex = 6;
if ( typeof _recaptcha_wordpress_savedcomment != 'undefined') {
document.getElementById('comment').value = _recaptcha_wordpress_savedcomment;
}
</script>
In fact, your submit button has this ID:
<input name="submit" type="submit" id="submit-alt" tabindex="6" value="Submit Comment">
I've created a chrome packaged app which comes down from the Chrome Store as a CRX. I'd like to let the user send mail from the app, using a mailto: link. It appears that this is not allowed, because of security restrictions (when I try in development, that's the error I get).
I found another thread where they said it worked by setting location.href, but that question is pretty old, and I'm assuming the security restriction may be new.
So… is there any way to open the user's local mail client from a chrome packaged app, so they can send a message?
A few remarks:
This question is about providing the mailto functionality from within an iframe in the main window.
Adding a link (with the appropriate href) works fine, but requires user-interaction (clicking the link): ...
Using location.href = ... is prevented from the Content Security Policy (which can possibly be relaxed - I didn't look further into it).
Using window.top.location.href = ... results in the following error:
Can't open same-window link to "mailto:..."; try target="_blank".
The solution:
It worked for me using:
window.open("mailto:...");
For the sake of completeness, below is the source code of a sample extension that illustrates the above
manifest.json:
{
"manifest_version": 2,
"name": "Test App",
"version": "0.0",
"app": {
"background": {
"scripts": ["background.js"]
}
}
}
background.js:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create("wrapper.html");
});
wrapper.html:
<!DOCTYPE html>
<html>
<head></head>
<body><iframe src="main.html"></iframe></body>
</html>
main.html:
<!DOCTYPE html>
<html>
<head><script type="text/javascript" src="main.js"></script></head>
<body>
<form id="frm1">
<input type="email" id="inp1" placeHolder="Recipient's e-mail"
required /><br />
<input type="text" id="inp2" placeHolder="Message's subject"
required /><br />
<input type="submit" id="btn1" value="Send e-mail" />
</form>
</body>
</html>
main.js:
window.addEventListener("DOMContentLoaded", function() {
var frm1 = document.getElementById("frm1");
var inp1 = document.getElementById("inp1");
var inp2 = document.getElementById("inp2");
var btn1 = document.getElementById("btn1");
frm1.addEventListener("submit", function(evt) {
evt.preventDefault();
});
btn1.addEventListener("click", function() {
var email = inp1.value;
var subject = encodeURIComponent(inp2.value);
var mailToStr = "mailto:" + email + "?Subject=" + subject);
console.log(mailToStr);
window.open(mailToStr);
});
});
I have two html files namely "file1.html" and "file2.html". File1 is supposed to encode a string written in an input file and send it to file2 via URL so that it could be decoded there.
My problem is an embarrassing one as I'm having trouble while passing from file1 to file2. Here is my code:
<html>
<head>
<script type="text/javascript">
function encode()
{
var encodeThis = document.getElementById("exampleText").value;
document.getElementById("exampleText").value = escape(escape(encodeThis));
}
</script>
</head>
<body>
<form name="input" action="file2.html" method="get">
<input id="exampleText" type="text" name="example" value="Not strongly encoded" />
<input type="button" value="Encode and Submit!" onclick="encode()" />
</form>
</body>
</html>
When I click to submit button, I expect to send the encoded string via URL and pass to file2.html where I can process it, however I remain at my first page: "file1.html". Which fundamental knowledge do I lack here ? Thanks in advance for your time.
Because there is no submit. Either you give the input-tag the type submit instead of button or you make a form.submit () via JS.
document.input.submit(); should do this.
BTW... why double-escape?
The submit button should be like this:
<input type="submit" value="Encode and Submit!" onclick="encode()" />