I would like to read data from google sheets and then write cell values to input type text fields. Firefox returns an error "TypeError: conteudo is null" when I try to access an array returning data from GSheets.
This is the link to my google sheets example.
Sample data
Nome: Name
Data_Nascimento: 20/07/1950
CPF: 12345678
See below my code.
File: code.gs
function doGet(request) {
setPage('index');
return HtmlService
.createTemplateFromFile('index')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("teste");
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
var urlss = "https://docs.google.com/spreadsheets/d/1q8kz2L2q4u99dvR0zeDuCghSgtlNKMpbmZgCRHC3hn0/edit?usp=sharing";
function setPage(page) {
var ps=PropertiesService.getUserProperties();
ps.setProperty('PageTitle', page);
return ps.getProperty('PageTitle');
}
function getConsultaPacientes() {
var ss = SpreadsheetApp.openByUrl(urlss);
var ws = ss.getSheetByName("lista");
var dadosPaciente = ws.getRange(2,1,ws.getLastRow()-1,3).getValues();
var listaNomePaciente = dadosPaciente.map(function(param) { return param[0];});
var listaDtNascPaciente = dadosPaciente.map(function(param) { return param[1];});
var listaCPFPaciente = dadosPaciente.map(function(param) { return param[2];});
pacienteEncontrado = [listaNomePaciente,listaCPFPaciente,listaDtNascPaciente];
return pacienteEncontrado;
}
File: page_js
<script>
document.getElementById("btconsultaPaciente").addEventListener("click",objConsultaPaciente);
function objConsultaPaciente(){
google.script.run.withSuccessHandler(populateDadosPacientes).getConsultaPacientes();
}
function populateDadosPacientes(conteudo) {
document.getElementById("idnome").value=conteudo[0];
document.getElementById("idcpf").value=conteudo[1];
document.getElementById("iddtnascimento").value=conteudo[2];
M.updateTextFields();
}
</script>
File: index.html
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> -->
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12 m2 l2">
<button id="btconsultaPaciente" class="btn tooltipped" data-position="bottom" data-tooltip="Consultar Paciente">Populate</button>
</div>
</div> <!-- CLOSE ROW -->
<div class="divider"></div>
<br>
<div class="row">
<div class="input-field col s12 m4 l4">
<input type="text" id="idnome" class="validate">
<label class="active" for="idnome">Nome</label>
</div>
<div class="input-field col s12 m4 l4">
<input type="text" id="iddtnascimento" class="datepicker">
<label>Data de Nascimento</label>
</div>
<div class="input-field col s12 m4 l4">
<input type="text" id="idcpf" class="validate">
<label for="idcpf">CPF</label>
</div>
</div> <!-- CLOSE ROW -->
<div class="row">
<div class="col">
</div>
</div> <!-- CLOSE ROW -->
</div> <!-- CLOSE CONTAINER -->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!= include('index_js'); ?>
</body>
</html>
I believe your situation and goal are as follows.
There are the values of "Name", "20/07/1950" and "12345678" in the columns "A" to "C" on Google Spreadsheet.
"20/07/1950" is the date object.
You want to put above 3 values to idnome, iddtnascimento and idcpf.
When the script is run by clicking the button, an error of TypeError: conteudo is null occurs.
You want to know the reason of this error and remove it.
If my understanding for above situation and goal is correct, I think that your script of Google Apps Script is required to be modified as follows.
Modification points:
If "20/07/1950" is the date object on Spreadsheet, the value of conteudo returned by google.script.run.withSuccessHandler(populateDadosPacientes).getConsultaPacientes() becomes null.
From your sample values and the error message of TypeError: conteudo is null, I thought that this might be the reason of your issue.
When your script is modified, it becomeas as follows.
Modified script:
Please modify the function getConsultaPacientes() at Google Apps Script side as follows.
From:
var dadosPaciente = ws.getRange(2,1,ws.getLastRow()-1,3).getValues();
To:
var dadosPaciente = ws.getRange(2,1,ws.getLastRow()-1,3).getDisplayValues();
or
From:
var listaDtNascPaciente = dadosPaciente.map(function(param) { return param[1];});
To:
var listaDtNascPaciente = dadosPaciente.map(function(param) { return param[1].toISOString()});
Note:
If you want to use the value which can be seen at Spreadsheet, the modification using getDisplayValues() might be suitable.
In your script, Web Apps is used. So when the script of Web Apps is modified, please redeploy the Web Apps as new version. By this, the latest script is reflected to it. Please be careful this.
References:
getDisplayValues()
toISOString()
Try this:
function getConsultaPacientes(input) {
var input=input||10;//default for testing
var ss=SpreadsheetApp.getActive();//changed for testing
var ws=ss.getSheetByName("Sheet1");//changed sheet name
var vA=ws.getRange(2,1,ws.getLastRow()-1,13).getValues();
var list1=vA.map(function(param){return param[12];});
var list2=vA.map(function(param){return param[0];});
var list3=vA.map(function(param){return param[1];});
var pos=list1.indexOf(input);
if(pos>-1) {
var pac=[list2[pos],list3[pos]];
return pac;
} else {
return 'Indisponível';
}
}
My Test Data:
COL1,COL2,COL3,COL4,COL5,COL6,COL7,COL8,COL9,COL10,COL11,COL12,COL13,COL14,COL15
8,2,3,7,3,10,7,11,9,0,9,10,7,4,7
3,0,5,4,1,7,11,10,11,11,0,5,10,5,6
7,10,11,5,8,8,11,6,10,7,6,4,4,2,11
10,0,2,1,7,7,9,9,10,8,5,8,9,8,6
0,10,1,9,0,9,9,0,6,7,9,3,8,11,10
6,6,1,3,5,5,3,4,6,0,5,6,0,0,2
0,11,6,1,7,3,9,1,6,9,4,9,3,9,8
6,7,5,9,11,7,5,9,8,10,11,9,6,2,10
1,4,8,7,7,5,7,9,10,8,5,6,2,7,1
3,5,0,2,1,1,1,1,7,1,11,8,7,11,10
6,3,2,7,2,3,0,5,11,0,8,3,7,11,3
11,6,1,11,2,7,5,10,6,1,11,0,3,3,10
Hay I have a problem with sorting divs from createElement function.
Problem:
I create divs from database-items which are align in row (latest item on the end)
What I want:
Display the Items in reversed direction. The latest item added to the database should appear as first item in the stream (like a newsstream on facebook).
Question:
How can I change just the direction the divs are loaded/created?
Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers).
I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids
I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue.
Check out my Code:
//create firebase reference
var dbRef = new Firebase("….com/");
var contactsRef = dbRef.child('contacts')
//load all contacts
contactsRef.on("child_added", function(snap) {
//console.log(snap.val())
snap.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
var divCount = 0;
//create divs from database-elements
var card = document.createElement('div');
card.id = 'div'+divCount;
card.setAttribute('class', 'linkprev');
document.body.appendChild(card);
var cardtitle = document.createElement('div');
cardtitle.setAttribute('class', 'cardtitle');
cardtitle.innerHTML = childData;
card.appendChild(cardtitle);
document.guteUrls.execute();
divCount++;
console.log(event);
//linkify plugin to convert div-elements (strings) to hyperlinks
$('div').linkify();
$('#sidebar').linkify({
target: "_blank"
});
});
});
//save contact
document.querySelector(".addValue").addEventListener("click", function( event ) {
event.preventDefault();
if( document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){
contactsRef.push({
name: document.querySelector('#url').value,})
contactForm.reset();}
else {
alert('Oops, seems like an error…');
}
}, false);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>frontendpublishing-test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
<link href="css/flexboxgrid.min.css" rel="stylesheet">
<style type="text/css">
#contacts p,
#contacts p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Titel h1</h1>
<hr/>
<div class="row">
<div class="col-md-6">
<form method="post" name="contactForm">
<div class="form-group">
<input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input">
<button type="submit" class="btn btn-primary addValue">Submit</button>
</form>
<!-- <script>
$document.ready(function){
document.getElementsByClassName('linkified');
{console.log("linkified")};
};
</script>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="script.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script async src="https://guteurls.de/guteurls.js"
selector='.linkprev'
gif="http://loading.io/assets/img/default-loader.gif"
callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
callback="(function($){console.log('finished')})"
init="(function($){console.log('JS will start to search URLs now')})"
></script>
</body>
</html>
Thanks for helping :)
since you are using jquery instead of
document.body.appendChild(card);
use
$('body').prepend($(card))
you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like
$('#elementid').prepend($(card))
1.Why not query them descendent from db? :))
2.
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
// Ionic Starter LLc
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snLLcing when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
var LLc = {
intialize: function() {
this.bind();
},
bind: function(){
document.addEventListener('deviceready', this.deviceready, true);
},
//the device is ready for use
deviceready: function() {
Auto.checked = LLc.Cycle;
Note.checked = LLc.Notifications;
// throttle changes
var throttledCChange = _.throttle(LLc.CChange, 200);
$('input').on('change', throttledCChange);
},
//handles the color changes done by the sliders
CChange: function (evt) {
var c = LLc.ColorChange();
LLc.ArduinoPush(c);
},
//creates an array to hold all the slider values into, that will be fed to arduino
ColorChange: function(){
var color = [];
color.push(red.value);
color.push(green.value);
color.push(blue.value);
return color.join(',');
},
ArduinoPush: function (c){
bluetoothSerial.write("c" + c + "\n");
},
//color cycle mode for arduino
Cycle: function(){
red.value = 0;
green.value = 0;
blue.value = 0;
while(Auto.checked == true){
while(red.value < 250){
if(blue.value > 0 ){blue.value = blue.value - 25;}
red.value = red.value + 25;
var c = LLc.getColor();
LLc.ArduinoPush(c)
}
while(green.value < 250){
green.value = green.value + 25;
red.value = red.value - 25;
var c = LLc.getColor();
LLc.ArduinoPush(c)
}
while(blue.value < 250){
blue.value = blue.value + 25;
green.value = green.value - 25;
var c = LLc.getColor();.
LLc.ArduinoPush(c)
}
}
},
Notifications: function(){
},
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/topcoat-mobile-dark.min.css">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--ng-cordova Script -->
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="Starter" ng-controller="MainCtrl">
<ion-pane>
<ion-header-bar class="bar-dark">
<h1 class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">LovellLight Companion</h1>
</div>
</h1>
</ion-header-bar>
<ion-content>
<li class="item item-toggle">
AutoMode
<label class="toggle toggle-calm">
<input type="checkbox" id="Auto">
<div class="track">
<div class="handle">
</div>
</div>
</label>
</li>
<li class="item item-toggle">
Notification Mode
<label class="toggle toggle-assertive">
<input type="checkbox" id="Note">
<div class="track">
<div class="handle">
</div>
</div>
</label>
</li>
<div class="list">
<div class="item range range-positive">
<div class= "positive"> Blue </div>
<input type="range" name="blue" id="blue" min="0" max="250" value="0">
<i class="icon ion-plus-circled"></i>
</div>
<div class="item range range-assertive">
<div class= "assertive"> Red </div>
<input type="range" name="red" id="red" min="0" max="250" value="0">
<i class="icon ion-plus-circled"></i>
</div>
<div class="item range range-balanced">
<div class= "balanced"> Green </div>
<input type="range" name="green" id="green" min="0" max="250" value="0">
<i class="icon ion-plus-circled"></i>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</ion-content>
</ion-pane>
</body>
</html>
Hello All! I'm new to Ionic app development and had a few question on how to get started, or moreso how to get my app and my Arduino trading information. I am trying to make a simple app to be able to change the color of a light on a adafruit ring light connected to the Arduino. Problem is, I have be unsuccessful in being able to get them to speak.
Because I want to make this app as simple as possible, I have followed the PhoneGap tutorial for light changes as far as actually changing color and sending data to the Arduino is concered, but have been unable to get any reliable feedback to the Arduino, or any feedback whatsoever. this is especially concerning, since I have the bluetooths connected using a different app, but still connected nonetheless. I scoured the interwebs for many differen tutorials, learning about the different parts I used in my code while also learning that there's a lot more to app development that I anticipated.
Anybody out there can help? I'd much appreciate some advice.
Ionic code attached.
Okay, so I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FastCast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon1.ico"/>
</head>
<body>
<center>
<h1><b>Welcome to FastCast!</b></h1>
<div>
<p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
<hr></hr>
<div id="picDiv">
<img id="imgDisp" src="logo.jpg">
</div>
<p><font size="6">Enter you location to get started.</font></p>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
</div>
</form>
<p><i>Press enter to continue.</i></p>
<a id="test">Click me</a>
<script>
window.onkeydown = function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("Location").value;
var last2 = x.slice(-2);
alert(last2);
}
}
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</center>
</body>
<div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>
Towards the end I have a link that says "Click me". As you can see, in the script tags that follow, I have a bit of code that looks like this:
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
I was hoping that this code would active a popover when the link is clicked, but for some reason, it doesn't work. Nothing happens at all. Why is this, and how can I properly make a popover in Bootstrap and then have it display a JavaScript variable?
Thanks!
You are missing some things in your popover element <a> tag, have the format be something like this:
<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>
Then it should work, for example: http://jsfiddle.net/52VtD/1983/