We Keep Coding

PHP Redirect breaking iframe communication with parent

Can't seem to find anyone to figure this out. Just trying to get <iframe> BTN to talk to parent.
Simple problem, need to get a button inside an <iframe> to call function on main.html.
The setup is as follows:
main.html has <iframe> with products.php inside.
Products.php has button that loads confirmation.php
Confirmation.php has the BUTTON we need to call function on parent.
all files are on the same server/domain
The traditional method of button inside products.php changing src on main to confirmation.php works as expected.
The problem is happening here: On products.php the way it loads the confirmation page is with this:
private $base_url = "https://xxxxxxxx.com/";
$returnURL = $this->base_url . "confirmation.php";
Products page <form> submission calls this PHP. This action is somehow embedding the confirmation page, or appending it in a way it can't communicate with parent.
Button & function on confirmation.php:
<button type="button" onClick="test()">BACK</button>
<script>
function test() {
parent.mainTest();
}
</script>
All of the below have been tested in confirmation page func and failed.
parent.mainTest();
window.parent.mainTest();
document.parent.mainTest();
parent.document.getElementById('iframe1_id').src = "iframeTest.php";
window.parent.frames["iframe1"]
Script on main.html:
<script>
function test (){
alert("Worked");
}
</script>
<iframe src="products.php" id="iframe1_id" name="iframe1"></iframe>

White screen on form submit - google web app [duplicate]

At this stage I'm mostly used to backend Javascript and server side Java, so my HTML is not as savvy as it needs to be.
I've built several applications that require user input with Apps script, but I was using the now deprecated UI service, as I'm not a designer and this provided an easy way to design simple pages to pass data back and forth. With the UI service having been deprecated for some time, I'm begging the arduous task of migrating these services to the HTML service, and I'm noticing some difference in behavior.
For example, when submitting a form, the entire page refreshes to a blank page, and I can't seem to prevent that. The UI service would remain static for information re-entry, and I can't find a working method to get the HTML service to either stop refreshing or reload the form.
Simple code to reproduce my issue:
function doGet() {
return HtmlService.createHtmlOutputFromFile('test')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
}
function logValues(value){
Logger.log('Something worked....');
}
With the index file being:
<form>
<input type="submit" value="Book Meeting" onclick="google.script.run
.logValues()">
</form>
Some things I've tried:
1) Adding a callback to the 'doGet' function, to attempt to get the page to load again.
2) Adding a whole new function to try and call a NEW HTML page.
The issue here is my poor understanding of the HTML service, but is there a simple way for me to just clear the form for re-submission, or alternatively just reload the page? None of the other questions I've found on SO adequately answer this question in a way I can understand.

Since you're technically submitting your form by clicking the submit button, then that creates the page refresh. You need to cancel the submit event with the preventDefault function, which "Cancels the event if it is cancelable, without stopping further propagation of the event."
See the docs here: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
So maybe you can try something along these lines (straight from the docs):
function stopDefAction(evt) {
evt.preventDefault();
}
document.getElementById('my-checkbox').addEventListener('click', stopDefAction, false);
Another option is to remove the form/input elements and simply use a button element instead, which doesn't trigger a page refresh on click.

It's an interesting ride switching old UI services across, I just did that with one of my applications and it has really improved the readability of the code. I posted a copy of a basic version of what I was doing in another question
Once you get your head around it all it becomes a lot simpler. This is a really basic example of using multiple HTML files similar to your example using the HTMLService when submitting forms (you can pass in parameters instead)
Code.gs
function doGet() {
return HtmlService.createTemplateFromFile('Main')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function onLogin(form) {
if (form.username == "fuzzyjulz") {
var template = HtmlService.createTemplateFromFile('Response');
//Setup any variables that should be used in the page
template.firstName = "Fuzzy";
template.username = form.username;
return template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE)
.getContent();
} else {
throw "You could not be found in the database please try again.";
}
}
function include(filename) {
return HtmlService.createTemplateFromFile(filename)
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
.getContent();
}
Main.html
<?!= include('CSS'); ?>
<script>
function loadPage(htmlOut) {
var div = document.getElementById('content');
div.innerHTML = htmlOut;
document.getElementById('errors').innerHTML = "";
}
function onFailure(error) {
var errors = document.getElementById('errors');
errors.innerHTML = error.message;
}
</script>
<div id="errors"></div>
<div id="content">
<?!= include('Login'); ?>
</div>
CSS.html
<style>
p b {
width: 100px;
display: inline-block;
}
</style>
Login.html
<script>
function onLoginFailure(error) {
var loginBtn = document.getElementById('loginBtn');
loginBtn.disabled = false;
loginBtn.value = 'Login';
onFailure(error);
}
</script>
<div class="loginPanel">
<form>
<p>
<b>Username: </b>
<input type="text" name="username"/>
</p>
<input type="button" id="loginBtn" value="Login" onclick="this.disabled = true; this.value = 'Loading...';google.script.run
.withSuccessHandler(loadPage)
.withFailureHandler(onLoginFailure)
.onLogin(this.parentNode)"/>
</form>
</div>
Response.html
<div class="text">
Hi <?= firstName ?>,<br/>
Thanks for logging in as <?= username ?>
</div>

create usercontrol using javascript or winJS or angularJS for Windows8

I am developing a windows 8.1 application using html5/javascript. Need to create usercontrols like we create in native windows application.
Reason:Single page has code of multiple pages/modules, so for code cleanup and better understanding.
How to create usercontrols or is there any other way to do the same?

Yes there is possibility to do the same. WinJS has fragments that you can load and unload, in same manner as usercontrols in windows forms. Also pages behave in same way, if you are using the Windows JavaScript template application "navigator.js"-file.
Here is image from MSDN site how navigator.js switches pages into default.html
Example:
In the main HTML file define button which loads the fragment for testing purpose and div with id where the fragment will be loaded:
<div class="box">
<button class="win-button action" id="basicFragmentLoadButton">Load the fragment</button><br />
<div id="basicFragmentLoadDiv"></div>
<br />
<div id="status"></div>
</div>
In Javascript file utilize WinJS.UI.Fragments namespace "renderCopy" function to render the content of the html file you want to use as usercontrol:
// Assign element into variable
var basicFragmentLoadDiv = document.querySelector("#basicFragmentLoadDiv");
function resetOutput() {
basicFragmentLoadDiv.innerHTML = "";
}
function basicFragmentLoad() {
resetOutput();
WinJS.UI.Fragments.renderCopy("/pages/fragments/content/BasicFragmentLoad.html", basicFragmentLoadDiv)
.done(
function () {
log("successfully loaded fragment", "sample", "status");
},
function (error) {
log("error loading fragment: " + error, "sample", "error");
}
);
/pages/fragments/content/BasicFragmentLoad.html includes simply HTML elements that will be rendered into the main HTML file. You can find more in the fragments section in try.buildwinjs.com

Make duplicate html document with autogenerated name

Essetially, I am building a very rudimentary website builder that uses forms on a page to manipulate the HTML of the page,displayed below the input boxes, which eventually the user can get the source of to put onto their own website. I have not built it yet, but I was thinking that I would need more than one template in case anyone was trying to edit the same template at the same time, and having their edits overridden by others using the program. Here is a mockup for your leisure:
Html Displayed below input:
<h1 class="heading">Hi guys!</hi>
Form mockup:
<input id="headingEdit">
<script>
document.getElementById("heading").innerHTML = document.getElementById("headingEdit").value;
</script>
My problem is one that may or may not be relevant, and that is that should someone want to edit this template, when someone else is also editing it, then surely the html would keep on getting overridden by each other, and no-one would get anywhere. What I therefore want to do is be able to, when a user clicks on the 'Edit this Template' button on the homepage, they are taken to a randomly generated page, which is an exact duplicate of a master page, make their edits, and then that page is deleted, or (when I add integration) stored in a users account.
This might be a duplicate question, but the answer has not come up in my research so far.
Thanks in advance.

you can use AngularJS
http://www.w3schools.com/angular/default.asp
<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
<p>Input something in the input box:</p>
<p>Name : <input type="text" ng-model="name" placeholder="Enter name here"></p>
<h1>Hello {{name}}</h1>
</div>
</body>
</html>

Here's a short PHP solution
$pageid = uniqid();
copy('template.html', $pageid . '.html');
print "Editable page is at: " .$pageid . ".html";
Add this somewhere in the template.html:
<?php
if (str_replace(' ', '', preg_replace('/\.html/', '', basename($_SERVER['PHP_SELF']))) !== 'template') {
print "<script>
var elems = document.getElementsByTagName('*'),
i;
for (i = 0; i < elems.length; i += 1) {
elems[i].setAttribute('contentEditable', 'true');
}
window.onbeforeunload = function(){
var a = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
a.onreadystatechange = function (b) {
if(a.readyState==4&&a.status==200){
}
}
xmlhttp.open('POST','remove_template.php',true);
xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xmlhttp.send('id=" . str_replace(' ', '', preg_replace('/\.html/', '', basename($_SERVER['PHP_SELF']))) . "');
}
//Custom JavaScript goes here
</script>";
}
?>
Then remove_template.php is:
if ($_POST['id'] != 'template' && ctype_alnum($_POST['id'])) {
unset($_POST['id']);
}
You should obviously change what urls to your needs, also remove_template.php is kinda insecure. I haven't tested this yet. If you ever add a user system. Made the $pageid link to their user account. Then just pass an if to not add the window.onbreforeunload

If you can't support PHP you can use an icky JavaScript solution
window.editPage () { document.body.contentEditable='true'; document.designMode='on'; }
window.savePage () { localStorage.setItem('savedPage', document.body.innerHTML); }
window.getPage () { document.body.innerHTML = localStorage.getItem('savedPage'); }
Then you can add the function to the onclick attribute
<div onclick="window.editPage()">Edit Page</div>
I've found something called Surreal CMS (Content Management System) which might be what you want. Or maybe something like create.js

Embedding a Twitter share button (with JS and everything) into a Mustache template

How can I embed a Twitter (with JS and everything) share button into a Mustache template?
The problem which I have is that my AJAX app does not reload the page, but simply switches views based on Mustache templates. I noticed that functionality provided by widjets.js simply does not get turned on, because the JS files gets loaded only once per application lifetime, and searches for tags decorated with a "twitter" tag on DOM_READY. This however, completely excludes the cases when HTML gets rendered from a template later on.
I know that I can use a raw hyperlink to twitter and customize it to o look like a button, but that is just too primitive.

Here's a solution that worked for me using a template inside my HTML file:
social.js:
$(function() {
var socialFeeds = {
twitter: {
account: "your-twitter-account",
script: function() {
// twitter code goes here, minus the script tags
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
// in my case, I had to re-render the twitter button, see here:
// http://stackoverflow.com/a/6536108/805003
$.ajax({ url: 'http://platform.twitter.com/widgets.js', dataType: 'script', cache:true});
}
}
}
$.Mustache.addFromDom('social-template');
$('#social').mustache('social-template', socialFeeds);
}
index.html:
<script id="social-template" type="text/html">
<div id='social'>
<p>Twitter button:</p>
Tweet
{{ twitter.script }}
</div>
</script>

You could call the init functions not on document ready but from the views where you want the twitter button to appear.