I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
Related
Im new to HTML and i have this loader code i got from : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_loader5
I adjust it to have a button and when i click on this button it sends an internal GET request to my code /clients.
I want the same code to work but without the button.
I want the loader to finish load and then redirect to the /clients page because now it is depended on the button click.
my code:
</head>
<body onload="myFunction()" style="margin:0;">
</body>
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
simply removing the button line is not doing anything, just showing blank page and in my code i see
its not redirecting to /clients
how can i do this ?
EDIT:
SOLVED by changing myFunction like #Bert Maurau
suggested
<script>
var myVar;
function myFunction() {
myVar = setTimeout(function(){ window.location.href = '/clients' }, 1000);
}
So you basicly want to redirect the user if your "loading" is done?
I see you're calling the myFunction() on page load.
You could add a basic
setTimeout(function(){ window.location.href = '/clients' }, 1000);
at the end of the function to redirect the user to /clients after one second.
(or when your loading function has done processing the data.
myFunction() {
// do stuff here
// ...
// wait for a second
const timeout = setTimeout(() => {
// redirect to clients
window.location.href = '/clients';
}, 1000);
}
You could submit your form from myFunction().
<script>
function myFunction() {
document.getElementById("form_id").submit();
}
</script>
This function would be called when the page is finished loading and would submit the form without anybody pushing the button. You could even remove the button entirely.
Solution:
</head>
<body onload="myFunction()" style="margin:0;">
Remove the extra closing tag for BODY
<div id="loader"></div>
<div style="display:none;" id="myDiv" class="animate-bottom">
<h2>Pres OK.</h2>
<form method="get" action="/clients">
<button>OK</button>
</form>
</body>
</div>
You can use the below Jquery Script
<script>
$(document).ready(function(){
if($('#loader').hasClass('d-none') || $('#loader').css('display') == 'none'){
// or any other check to ensure that the loader is finished.
$('form').submit();
}
})
</script>
Please feel free to ask if you need more clarification.
I want to take user input (HTML specifically) using either:
var ui = SpreadsheetApp.getUi();
var response = ui.prompt('Paste HTML below');
or
var input = Browser.inputBox('Paste HTML below', Browser.Buttons.OK_CANCEL);
These work fine for small inputs, however when copying over the entire HTML for a page of interest an error occurs (in each case). This error cannot be caught, it simply crashes the script.
Do you know why this is happening? I can't find anything in the docs that mention limits on input size.
Any experience doing this a different way?
Edit: as per a suggestion in the comments, I have tried another method (below). This also fails (with no error message) when passed large input.
First I set up Page.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
Paste Sitemap Content Below
<textarea id="user-input-box" rows="4" cols="50"></textarea>
<script>
function logToConsole() {
var userInput = document.getElementById("user-input-box").value;
google.script.run.doSomething(userInput);
}
</script>
<input type="button" value="Close" onclick="logToConsole();google.script.host.close();" />
</body>
</html>
Then in file Code.gs
function testDialog() {
var html = HtmlService.createHtmlOutputFromFile('Page')
.setWidth(400)
.setHeight(300);
SpreadsheetApp.getUi()
.showModalDialog(html, 'My custom dialog');
}
function doSomething(userInput){
Logger.log(userInput);
}
I just ran into the same problem and couldn't log the error. In my case as is yours, you're calling your logToConsole() function and then directly after you're closing the dialog by using google.script.host.close();
google.script.host.close() is the problem. For some reason it can cancel the script execution - this typically happens when you're sending a lot of data back. The trick is to use a successHandler when you call your script which then calls google.script.host.close(). This way, the data transfer from the dialog finishes correctly and when you call withSuccessHandler(), that callback closes the dialog. Try this amendment to your code:
<script>
function logToConsole() {
var userInput = document.getElementById("user-input-box").value;
google.script.run.withSuccessHandler(closeDialog).doSomething(userInput);
}
function closeDialog() {
google.script.host.close();
}
</script>
<input type="button" value="Close" onclick="logToConsole()" />
I'm having trouble with the google.script.host.close() command in that it is closing my sidebar rather than the dialog.
function clickWeek() {
setWeekColor('week', '#7FFF00');
setMonthColor('month', '#d6d6c2');
setPressColor('press', '#d6d6c2');
setAllDataColor('allData', '#d6d6c2');
google.script.run.withSuccessHandler(google.script.host.close).weekAheadCreate();
}
The dialog is opened from the top of the weekAheadCreate() fucntion as per below:
var htmlOutput = HtmlService
.createHtmlOutput('<p>Please wait a moment...</p>')
.setWidth(250)
.setHeight(80);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Loading');
Any ideas how I can force the google.script.host.close() to act on the dialog rather than the sidebar?
The close() method closes the current dialog/sidebar, and asuming the clickWeek() is in your sidebar, it will close it instead of the dialog. You need to run the close() method inside the dialog.
How about you fire your server-side function when the dialog is created and when the withSuccessHandler() detects a successful return then it closes the dialog using close().
You will need to use createHtmlOutputFromFile when creating the dialog insted of createHtmlOutput and inside your html use the <script> tag. Here's an example:
code.gs
function createDialog(){
var htmlOutput = HtmlService
.createHtmlOutputFromFile('dialog')
.setWidth(250)
.setHeight(80);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Loading');
}
function doBusyStuff(){
// Busy stuff
}
dialog.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script>
(function() {
// Runs the busy stuff and closes the dialog using .close() on success
google.script.run
.withSuccessHandler(google.script.host.close)
.doBusyStuff();
})();
</script>
</head>
<body>
<p>Please wait a moment...</p>
</body>
</html>
i have a link in place, which opens a popup window that gives you instructions on how to add this page to your bookmarks. Now i also want the link to fire a conversion in adwords when it gets clicked. For that i have a script from google which i tried ti combine with the existing link, but i think i did something wrong since no conversion gets fired in my test. Please help me here:
<html>
<head>
</head>
<body>
<a id="bookmarkme" href="#" rel="sidebar" onClick="goog_report_conversion" title="bookmark this page">Bookmark this page!</a>
<!-- Google Code for People who added website to their bookmarks Conversion Page
In your html page, add the snippet and call
goog_report_conversion when someone clicks on the
chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = XXXXXXXX;
w.google_conversion_label = "COldCKSHnl8Q2cu9ywM";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
window.google_is_call = true;
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript">
$(function() {
$("#bookmarkme").click(function() {
// Mozilla Firefox Bookmark
if ('sidebar' in window && 'addPanel' in window.sidebar) {
window.sidebar.addPanel(location.href,document.title,"");
} else if( /*#cc_on!#*/false) { // IE Favorite
window.external.AddFavorite(location.href,document.title);
} else { // webkit - safari/chrome
alert('Please press ' + (navigator.userAgent.toLowerCase().indexOf('mac') != - 1 ? 'Command/Cmd' : 'CTRL') + ' + D in order to add this page to your bookmarks, you can also use your browsers bookmark menu to do that.');
}
});
});
</script>
</body>
</html>
Setting up an onclick handler for conversions
First, make sure you selected Click instead of Page load from the "Tracking event" section of the "Advanced tag settings" in Part I of the instructions above. Your conversion tag should look like something this:
<!-- Google Code for Add to Cart Conversion Page
In your html page, add the snippet and call goog_report_conversion
when someone clicks on the chosen link or button. -->
<script type="text/javascript">
/* <![CDATA[ */
goog_snippet_vars = function() {
var w = window;
w.google_conversion_id = 12345678;
w.google_conversion_label = "abcDeFGHIJklmN0PQ";
w.google_conversion_value = 13.00;
w.google_conversion_currency = "USD";
w.google_remarketing_only = false;
}
// DO NOT CHANGE THE CODE BELOW.
goog_report_conversion = function(url) {
goog_snippet_vars();
window.google_conversion_format = "3";
var opt = new Object();
opt.onload_callback = function() {
if (typeof(url) != 'undefined') {
window.location = url;
}
}
var conv_handler = window['google_trackConversion'];
if (typeof(conv_handler) == 'function') {
conv_handler(opt);
}
}
/* ]]> */
</script>
<script type="text/javascript"
src="//www.googleadservices.com/pagead/conversion_async.js">
</script>
Now that you (or the person in charge of your website) have the conversion tracking tag, you're ready to paste. Here's how:
Go to the page on your website that shows the clickable button or link. Then open up the HTML code so you can edit it.
Find the body tags (<body></body>) of the page, then paste the code snippet you generated in AdWords between those two tags.
Adjust the HTML code to add the onclick handler. The particular onclick command you use will depend on how the link or button is displayed on your site: text link, image, or button.
Here's some sample code close up:
HTML before conversion tracking code (Sample only. Don't use in your website's code.)
<html>
<head>
<title>Sample HTML File</title>
</head>
<body>
This is the body of your web page.
</body>
</html>
Use the following command if the link is shown as:
a text link
<body>
<!-- Below is a sample link for a file download.
You need to replace the URL for the file and the
DOWNLOAD NOW text with the text you want to hyperlink. -->
<a onclick="goog_report_conversion
('http://www.example.com/whitepapers/a.pdf')"
href="#" >DOWNLOAD NOW</a>
</body>
</html>
an image
<!-- Below is a sample image for a file download.
Replace download_button.gif with your
button image and the document URL with your file's URL. -->
<body>
<img src="download_button.gif" alt="Download Whitepaper"
width="32" height="32"
onClick="goog_report_conversion
('http://www..pdf')"/>
</body>
</html>
For the tracking to work, you'll need to make sure you include both the tag and the appropriate onclick tags from one of the examples above. This tells AdWords to record a conversion only when a customer clicks on a chosen link or button.
Alright, it works the following way:
<a onclick="goog_report_conversion
('')" id="bookmarkme" href="#" rel="sidebar" title="bookmark this page">Bookmark this page!</a>
I'm currently (in HTML) trying to load a link in a new tab or window right when the website is opened, without anyone clicking on a link on a page. I've so far managed to open a link automatically and open a link in a new tab and window, but not at the same time. Can someone help me with this? I also don't mind using another language if this is not possible in HTML.
First question why do you want to do that?
Secondly You can use javascript for that.
function OpenInNewTab(url) {
var win = window.open(url, '_blank');
win.focus();
}
And in your HTML put
<body onload=OpenInNewtab('http.....')>
.......
</body>
Here is the code to open a link in new tab on page load using jquery.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
jQuery(document).ready(function () {
newTab();
});
function newTab() {
var form = document.createElement("form");
form.method = "GET";
form.action = "http://www.google.com";
form.target = "_blank";
document.body.appendChild(form);
form.submit();
}
</script>
</head>
<body>
<a class="my-link">link</a>
</body>
</html>
If you want to open a new page in new window once the main page of the website is loaded, try this by calling the onload javascript function in the body:
<body onload="myfunction()">
And then in myfunction() you can call try this !
window.open(url, '_blank');