<!Doctype html>
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.11/ngStorage.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl" class="container jumbotron">
<div class="form-group">
<input type="text" class="form-control" ng-model="empName" placeholder="Please Enter Employee Name"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empUserId" placeholder="Please Enter Employee UserName"/>
</div>
<div class="form-group">
<input type="text" class="form-control" ng-model="empEmailId" placeholder="Please Enter Employee Email ID"/>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="saveData();">Save</button>
</div>
<div class="form-group">
<button class="btn btn-info" ng-click="loadData();">Load</button>
</div>
<hr/>
Employee Name : {{empData.empname}}<br/><br/>
Employee User ID : {{empData.empuserid}}<br/><br/>
Employee Email ID : {{empData.emailid}}
</div>
<script>
var app = angular.module("myApp", ['ngStorage']);
app.controller("myCtrl", function($scope, $localStorage){
$scope.saveData = function(){
var empData = {empname:$scope.empName,
empuserid: $scope.empUserId,
emailid : $scope.empEmailId
}
//$localStorage.name = $scope.empName;
//$localStorage.userid = $scope.empUserId;
//$localStorage.emailid = $scope.empEmailId;
$localStorage.empData = empData;
//window.localStorage.set("empData", JSON.stringify(empData));
}
$scope.loadData = function(){
//$scope.name1 = $localStorage.name;
//$scope.userid2 = $localStorage.userid;
//$scope.emailid3 = $localStorage.emailid;
$scope.empData = $localStorage.empData;
//$scope.empData = JSON.parse(window.localStoage.get('empData'));
}
$scope.loadData();
});
</script>
</body>
</html>
Just call $scope.loadData() at the bottom of your controller to fetch the data.
Try the below steps:
Step 1: Write a init() function inside app.controller and set ng-model values.
$scope.init = function () {
$scope.empName = $localStorage.empData.empname;
$scope.empUserId = $localStorage.empData.empuserid;
$scope.empEmailId = $localStorage.empData.emailid;
$scope.empData = $localStorage.empData;
}
Step 2: Call init() function in HTML using ng-init.
<div ng-controller="myCtrl" class="container jumbotron" ng-init="init()">
Related
I have made an web app using google script connected to spreadsheet.
all was running well till i tried to put a functionality of sending email notification when user submits a form information
see error code when run log of user clicked function-
TypeError: Cannot read property 'fn' of undefined userClicked #funcs.gs:8
function-js page is below
'function userClicked(userInfo) {
var ss = SpreadsheetApp.openByUrl(url1);
var ws = ss.getSheetByName("SNAGS");
ws.appendRow([userInfo.fn,
userInfo.contact,
userInfo.email,
userInfo.house,
userInfo.snag,
userInfo.query,
new Date()]);
<script>
document.addEventListener('DOMContentLoaded', function()
{
document.getElementById("btn").addEventListener("click",doStuff);
document.getElementById("house").addEventListener("input",getInfo);
var selectBoxes = document.querySelectorAll('select');
M.FormSelect.init(selectBoxes);
google.script.run.withSuccessHandler(populateHouse).getHouse();
}
);
function populateHouse(hous)
{
var autocomplete = document.getElementById('house');
var instances = M.Autocomplete.init(autocomplete, { data: hous });
}
function doStuff()
{
var isValid = document.getElementById("fn").checkValidity();
if(!isValid)
{
M.toast({html: 'Name Required!'});
}
else
{
addRecord();
}
}
function addRecord ()
{
var userInfo = {};
userInfo.fn = document.getElementById("fn").value;
userInfo.contact = document.getElementById("contact").value;
userInfo.email = document.getElementById("email").value;
userInfo.house = document.getElementById("house").value;
userInfo.snag = document.getElementById("snag").value;
userInfo.query = document.getElementById("query").value;
google.script.run.userClicked(userInfo);
document.getElementById("fn").value ="";
document.getElementById("contact").value ="";
document.getElementById("email").value ="";
document.getElementById("house").value ="";
document.getElementById("snag").value ="";
document.getElementById("query").value ="";
M.updateTextFields();
var myApp = document.getElementById("snag");
myApp.selectedIindex = 0;
M.FormSelect.init(myApp);
}
function getInfo ()
{
var HouseInfo = document.getElementById("house").value;
if(HouseInfo.length === 3)
{
google.script.run.withSucceshandler(updateInfo).getData(HouseInfo);
}
}
function updateInfo (infos)
{
document.getElementById("info").value = infos;
M.updateTextFields();
}
</script>
<!DOCTYPE html>
<html>
<head>
<base target="_self">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!= include("page-css"); ?>
</head>
<body>
<div class="container">
<h3>TPM Maintance |Ticketing System</h3>
<br>
<div class="row">
<div class="input-field col s4">
<input placeholder="Your Full Names" id="fn" type="text" class="validate" required >
<label for="fn">Your Name:</label>
</div>
<div class="input-field col s4">
<input id="contact" type="text" class="validate">
<label for="contact"> Your Phone number:</label>
</div>
<div class="input-field col s4">
<input id="email" type="email" class="validate" required>
<label for="email">Email:</label>
</div>
</div>
<div class="row">
<div class="input-field col s4">
<i class="material-icons prefix">home</i>
<input type="text" id="house" class="autocomplete" required>
<label for="house">Location Area/ House Unit# </label>
</div>
<div class="input-field col s4">
<select id="snag" required>
<option disabled selected> Snag Category</option>
<?!= list; ?>
</select>
<label>Snag Type</label>
</div>
<div class="input-field col s4">
<input disabled id="info" type="text" class="validate">
<label for="info">Unit_Info</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="query" class="materialize-textarea"></textarea>
<label for="query">Query Desc:</label>
</div>
</div>
<div class="row">
<button id="btn" class="btn waves-effect waves-light deep-orange darken-2" type="submit" name="action">Send Ticket!
<i class="material-icons right">send</i>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include("page-js"); ?>
</body>
</html>
//html part
please see more code from my work thanks. please excuse me im abit a newbie
If you are running the steps from the tutorial video you have tried to run userClicked() function to authorize the Gmail API's. Since Apps Script is thinking that it's a standalone function, userInfo is considered undefined. This is expected behavior.
Excerpt from video:
I need help!
I need open html form from another html form by button PUTAWAY START.
At html code I have this button, but I cant understand how to write script to command for button.
I don't know where to start. Thank you for help!
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn1" style="width: 100%">PUTAWAY START</button>
</div>
</div>
I know that it must be by function doGet(e) but how?
Thanks to help from Ron I add his script to my project.
Main form:
<!doctype html>
<html lang="en">
<head>
<base target="_top">
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KOP#CK-M#IN-MENU</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
crossorigin="anonymous"></script>
<script href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.6.0/dist/umd/popper.min.js"
integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.min.js"
integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<?!= include("main-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<link id="favicon" rel="shortcut icon" type="image/png" href="https://drive.google.com/file/d/14GrCbJYe3RExAKL_6yuF3kH1EO0L7zge/view?usp=sharing" />
<h6 style="color:blue;"><em>KOP#CK M#IN MENU:</em></h6>
<img src="https://drive.google.com/uc?export=download&id=14GDoNMZxgHlfTKMHmtamXmu93y2jaDy6" class="img-fluid" alt="...">
<form>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<input type="button" class="btn btn-primary" value="PUT#WAY ST#RT" style="width: 100%" onclick="Link1()"/>
</div>
</div>
<div class="progress" id="PreLoaderBar">
<div class="indeterminate"></div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn2" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
<div class="row">
<div class="form-floating mb-3">
<button type="button" class="btn btn-primary" id="btn3" style="width: 100%">Insert</button>
</div>
</div>
<hr></hr>
</form>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<?!= include("main-js"); ?>
</body>
</html>
and script in include-main:
document.onreadystatechange = function () {
if (document.readyState === "complete") {
document.getElementById("PreLoaderBar").style.display = "none";
}
}
function Link1(){
var url = document.getElementById("url").value;
console.log(url);
var link = document.createElement('a');
console.log(link);
link.href = url + "&page=Link1";
link.id = 'linkURL';
console.log(link);
document.body.appendChild(link);
document.getElementById('linkURL').click();
}
Script in "doGet":
function doGet(e){
var params = JSON.stringify(e);
console.log(params);
console.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("PUTAWAY_TO").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("MAIN_MENU").evaluate();
}
}
You can use the doGet(e) event parameters as your condition to determine which html form you will create
Sample Code:
Code.gs
function doGet(e){
var params = JSON.stringify(e);
Logger.log(params);
Logger.log(e.parameter.page);
if(!e.parameter.page){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
else if(e.parameter.page == 'Link1'){
return HtmlService.createTemplateFromFile("Form1").evaluate();
}
else if(e.parameter.page == 'Main'){
return HtmlService.createTemplateFromFile("Main").evaluate();
}
}
Main.html
<body>
<h1>Welcome to Main Form</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Link 1" onclick="link1()" />
</body>
<script>
function link1()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Link1";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
Form1.html
<body>
<h1>Welcome to Form 1</h1>
<?var url = ScriptApp.getService().getUrl();?><input type="hidden" value="<?= url ?>" id="url" />
<br>
<input type="button" value="Back to Main" onclick="main()" />
</body>
<script>
function main()
{
var url = document.getElementById("url").value;
var link = document.createElement('a');
link.href = url+"?page=Main";
link.id = 'linkURL';
document.body.appendChild(link);
document.getElementById("linkURL").click();
}
</script>
What it does?
Creates a href link in your html page, the href link contains an event parameter "page". link.href = url+"?page=Link1";
When doGet(e) was called, It will check the page parameter in the event object. Then select the form you want to use based on the page parameter provided.
Additional References:
Create Views (Pages) in Web App - Google Apps Script Web App Tutorial - Part 7
Link HTML Pages using Google Apps Script Web App
Total Angular newb here...
Just going through a Lynda course and I've got everything working until we get to routing. When all the app logic was in the controller things worked fine. But now for whatever reason my page loads completely blank now that I've added routing into the mix.
I've got an index.html file and I'm trying to pass in a view from list.html.
This is my folder structure so far.
Angular |
|-angular.js
|-angular-route.min.js
|-index.html
js |
|-app.js
|-controllers.js
|-data.json
partials |
|-list.html
The JS and Partials folders are both within the Angular folder.
This is my code so far...
Index
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Angular/Bootstrap Tests</title>
<link rel="stylesheet" href="bootstrap4/css/bootstrap.css">
<link rel="stylesheet" href="css/bands.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="bootstrap4/js/bootstrap.js"></script>
<script src="angular.js"></script>
<script src="angular-route.min.js"></script>
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<!-- Recent Listens Section -->
<div id="recent-listens-wrapper" ng-view>
</div>
<!-- End of Recent Listens Section -->
</body>
</html>
List
<div class="container">
<div class="row">
<div class="col-sm-12" id="search">
<h2>Band Directory</h2>
<input class="search-bar" ng-model="query" placeholder="Search for bands" type="text" autofocus>
<label class="search-labels">Sort By:
<select ng-model="bandSort">
<option value="name" selected="selected">Name</option>
<option value="genre">Genre</option>
<option value="year">Year</option>
</select>
</label>
<label class="search-labels">
Ascending:
<input type="radio" ng-model="direction" name="direction" checked>
</label>
<label class="search-labels">
Descending:
<input type="radio" ng-model="direction" name="direction" value="reverse">
</label>
</div>
<div class="col-sm-12">
<h1 class="recent-listens">Recent Listens</h1>
</div>
<div class="col-md-2" ng-repeat="item in bands | filter:query | orderBy:bandSort:direction">
<div class="album-preview">
<img class="img-responsive" ng-src="images/bands/{{item.shortname}}_tn.jpg" alt="Photo of {{item.shortname}}"/>
<h3>{{item.album}}</h3>
<p>{{item.name}}</p>
</div>
</div>
</div>
</div>
Controllers
var bandControllers = angular.module('bandControllers', []);
bandControllers.controller('RecentBands', ['$scope','$http', function RecentBands($scope, $http) {
$http.get('js/data1.json').then(function(bands) {
$scope.bands = bands.data;
$scope.bandSort = 'name';
});
}]);
App
var myApp = angular.module('myApp', [
'ngRoute',
'bandControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'RecentBands'
}).
otherwise({
redriectTo:'/list'
});
}]);
Try using $stateProvider
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/list");
$stateProvider
.state('list', {
url: "/list",
templateUrl: 'partials/list.html',
controller:"RecentBands"
})
});
The error is in your recentBands controller. Change the first line for
var app = angular.module('myApp');
There is no need of [] if you don't use any injections. It was just the name of the module, it has to be the same as the general controller.
I am trying to have a form that allows users to check a status in our DB, and on submit I want write to our db, and then return a bootstrap css modal that has their info from querying another table in the db. All works great except the modal, it just loads the div without creating the pop-up panel. I am assuming I am not loading a dependency library that it needs but still learning so figured I'd see feedback on my code and any potential solutions.
My code is:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
form { margin:0 auto; }
input { display:block; }
</style>
<div class="container-fluid">
<form id="LiRoForm">
<div class="page-header">
I have a an image header here
</div>
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter your name..">
</div>
<div class="form-group">
<label>Email:</label>
<input type="email" class="form-control validate[required,custom[email]]" id="email" name="email" placeholder="Enter your email..">
</div>
<div class="form-group">
<label>Application ID:</label>
<input type="text" class="form-control" id="appID" name="appID" placeholder="Please enter the full application ID">
</div>
<input type="submit" class="btn-primary btn-lg" id="submit-button" value="Check Status"
onclick="submitForm(); return false;">
</form>
</div>
<div id="dialog" title="Modal Title" class="modal fade" role="dialog" aria-labelledby="dialog" aria-hidden="true"></div>
<script>
function submitForm() {
var form = $('#LiRoForm')[0];
checkForm(function(){
$("#submit-button")[0].value = 'Checking Status...';
google.script.run
.withSuccessHandler(function onSuccess(data) {
var data = JSON.parse(data);
if (data == '') {
$("#dialog").html("<div>Our records indicate you have no data in the system</div>");
}
else {
$("#dialog").html("<div>Our system indicates you have the following data:</div>");
for(var x in data) {
$("#dialog").append("<div>"+data[x].FileType+"</div>");
}
}
$("#submit-button")[0].value = 'Check Status';
$("#dialog").modal('show');
})
.withFailureHandler(function(error) {
alert(error);
})
.checkStatus(form);
});
}
function checkForm(callback) {
var name = $('#name').val();
var email = $('#email').val();
var appID = $('#appID').val();
var emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (name == '' || email == '' || appID == '' || fileType == '') {
alert("Please fill in all fields");
return;
}
else if (file == '') {
alert("Please select a file");
return;
}
else if (emailPattern.test(email) == false) {
alert("Please enter a valid email address");
return;
}
// Validate AppID
google.script.run
.withSuccessHandler(callback)
.withFailureHandler(function(error) {
alert(error);
})
.checkID(appID);
}
</script>
Thanks #Mogsdad switching the html mode from NATIVE to IFRAME was the solution, as well as matching up that the style css and bootstrap scripts matched up:
Not Working:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Working
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
hi i want to fetch value from text box and append to hyperlink as a id. here is my code but i am unable to get the value of textbox.
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" >
</div>
Kindly guide me how to get value from text box.
Try this
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("hello");
function resetLink(ele)
{
var href="ajax/legal_notice.php?id="+$(ele).val();
$(".ajax-link").attr("href",""+href);
}
</script>
</head>
<body>
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" onchange="resetLink(this);" class="form-control" >
</div>
</body>
See below:
<script>
function append() {
var link = document.getElementById('link');
var text = document.getElementById('cust_id');
link.href = "ajax/legal_notice.php?id=" + text.value;
link.text = text.value;
}
</script>
<a id="link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" onchange="append();">
</div>