Estoy haciendo un pequeño proyecto con dos formularios en un mismo spreadsheet, todo el código funciono bien hasta que seguí las recomendaciones mostradas en una de las respuestas a Como mostrar otra pagina en google apps script?
Una vez que hice eso ya no me sirvió el código script de los formularios para cargar datos en el mismo form... que entre otras cosas podía:
//Mostrar la fecha y hora en el form
var d = new Date();
var n = d.toLocaleString();
document.getElementById("mtempo").innerHTML = n;
//Cargar el campo fecha, con la fecha actual
document.getElementById('fecent').value = new Date().toISOString().substring(0, 10);
//Cargar un select con los datos del spreadsheet
$(function () {
google.script.run.withSuccessHandler(buildNumcon)
.getListOptions();
});
Una de las soluciones que encontre implicab incluir desde el index
<?!= include('ScriptForm1'); ?>
Pero esto se cargaba antes de llamar el formulario así que no me sirvió, investigando encontré que podía llamar el script desde el botón que llama al formulario.
<button onclick="solicitarFormulario('Form1');solicitarScript('ScriptForm1')">Formulario
1</button>
y en el script del index que si funciona bien llamar al archivo:
function solicitarScript(scriptForm){
google.script.run.withSuccessHandler(importarScript).include(scriptForm);
}
function importarScript(scriptForm){
$.getScript(scriptForm);
}
Hasta aquí todo esta "bien" logro llamar al script pero se sigue cargando antes que el formulario y no parece tener ninguna comunicación con los elementos de este!!! Aunque dice que si no llena ninguno de los datos y las funciones que antes funcionaban como limpiarFormulario() al cancelar dice que no esta definida.
¿Alguien que me explique como a un niño de 5 años que fue lo que paso?
Estoy usando jQuery y todo lo que me sirva. Separe los códigos para tratar que funcionara.
Main.gs:
function doGet() {
return HtmlService.createTemplateFromFile('Index')
.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
}
function incluir(filename) {
return HtmlService.createHtmlOutputFromFile(filename)
.getContent();
}
function getListOptions() {
var sheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets...')
.getSheetByName("Parametros");
var lastRow = sheet.getLastRow();
var myRange = sheet.getRange("C2:C"+4);//4 en vez de lastRow(Quitar espacios en blanco)
var conductor = myRange.getValues();
return( conductor );
}
function processFormEntregas(e){
//Guardar imagen en Drive
var name='Entregas';
var carpeta = DriveApp.getRootFolder().searchFolders("title contains '"+name+"'");
if (carpeta.hasNext()===true) {
while (carpeta.hasNext()) {
var folder = carpeta.next();
Logger.log(folder.getName()+' '+folder.getId());
}
}else{
var folder=DriveApp.getRootFolder().createFolder(name);
}
//Crea el archivo en la carpeta 'name'
var blob = e.imginp.getBlob();
var file = folder.createFile(blob);
var fileId = file.getId();
var sMtempo = new Date();
var sNroref = e.nroref;
...
var sImginp = ("https://docs.google.com/uc?export=download&id="+fileId);
var spreadSheet = SpreadsheetApp.openByUrl('https://docs.google.com/spreadsheets/...');
var hojaDatos = spreadSheet.getSheetByName('Entregas');
var ultimaFila = hojaDatos.getLastRow();
hojaDatos.getRange(ultimaFila+1,1).setValue(sMtempo);
...
hojaDatos.getRange(ultimaFila+1,8).setFormula('IMAGE("'+sImginp+'";1)');
SpreadsheetApp.flush();
print("Su registro ha sido guardado con exito."); //Esperando para probar
}
Index.html:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://apis.google.com/js/api.js?onload=onApiLoad"></script>
//De arriba no se que sirve y que no, prefiero que sobre que falte
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons.css">
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('Scindex'); ?>
</head>
<body>
<div>
<p align="left" >
<button onclick="solicitarFormulario('Frecogidas')">Recogidas</button>
<button onclick="solicitarFormulario('Fentregas');solicitarScript('Scentregas')">Entregas</button>
</p>
</div>
<div id="Principal" class="smn47">
</div>
</body>
</html>
Scindex.html:
<script>
function solicitarFormulario(entrada) {
google.script.run.withSuccessHandler(cargarFormulario).incluir(entrada);
}
function cargarFormulario(entrada) {
document.getElementById('Principal').innerHTML=entrada;
}
function solicitarScript(scentrada){
google.script.run.withSuccessHandler(importarScript).incluir(scentrada);
}
function importarScript(scentrada){
$.getScript(scentrada);
}
//Esta función estaba originalmente en el form Entregas, al hacer el
//cambio como no funcionaba he probado desde aqui y lo llama pero no he
//declarado bien el formulario porque me dice que no puede realizar reset
//de undefined
function limpiarFormulario() {
var activeForm = this.form;
activeForm.reset();
activeForm.getElementById('fecent').value = new Date().toISOString().substring(0, 10);
activeForm.getElementById('output').src=" ";
activeForm.getElementById('output').alt="Vista Previa";
}
</script>
Fentregas.html:
<div >
<form id="Entregas" name="Entregas" enctype="multipart/form-data" >
<p id="mtempo" name="mtempo" align="right"></p>
<br> Referencias:
<br> <input type="text" name="nroref" id="nroref" placeholder="Referencia(s) recogida(s)" />
...
<br><br>
<input class="action" type="button" value="GUARDAR" onclick="procesaFormulario()">
<input class="create" type="button" value="CANCELAR" onclick="limpiarFormulario()">
</form>
</div>
Scentregas.html:
<script>
//Esta seccion de código estaba independiente en el formulario, se activaba
//sola cuando lo cargaba ahora no se como llamar al evento para que cargue
//luego de los elementos del formulario
var activeForm =document.forms['Entregas'];
var d = new Date();
var n = d.toLocaleString();
this.form.elements['mtempo'].innerHTML = n;
activeForm.getElementById('fecent').value = new Date().toISOString().substring(0, 10);
$(function () {
google.script.run.withSuccessHandler(buildNumcon)
.getListOptions();
});
function buildNumcon(conductor) {
var list = $('#numcon');
list.empty();
for (var i = 0; i < conductor.length; i++) {
list.append(new Option(conductor[i],conductor[i]));
}
}
var loadFile = function(event) {
var reader = new FileReader();
reader.onload = function(){
var output = activeForm.getElementById('output');
output.src = reader.result;
};
reader.readAsDataURL(event.target.files[0]);
};
//Esto ni siquiera lo he probado
function procesaFormulario(){ google.script.run.withSuccessHandler(limpiarFormulario(this)).processFormEntregas(document.forms[0]);
}
</script>
Aun estoy viendo como puedo llamar a los elementos del formulario como lo hacia antes con document.getElementById no funciona
Lo del Include/incluir ya esta corregido a las librerias jquery no les habia hecho mucho caso, las tenia asi desde el principio casi y no me habian dado problemas y aunq encontre como declarar los input para limpiarformulario()
function limpiarFormulario() {
var actFrm = document.forms[0];
for (i = 0; i < actFrm.elements.length; i++)
{
field_type = actFrm.elements[i].type.toLowerCase();
switch (field_type)
{
case "text":
case "password":
case "textarea":
case "hidden":
actFrm.elements[i].value = "";
break;
case "radio":
case "checkbox":
if (actFrm.elements[i].checked){
actFrm.elements[i].checked = false;
}
break;
case "select-one":
case "select-multi":
actFrm.elements[i].selectedIndex = -1;
break;
case "date":
actFrm.elements[i].value = new Date().toISOString().substring(0, 10);
default:
break;
}
}
}
aun no he podido resolver lo demas.... necesito crear una function que se active despues de cargar el formulario :(
Me disculpo primero por EL DESASTRE DE MIS POST, he estado bajo mucho estrés por este código y le he dado tantas vueltas que he tenido que dedicarme a "limpiarlo" para aclarar mis ideas...
En efecto seguí las recomendaciones que me hicieron y las sume a algunas modificaciones propias:
1) cambie la forma en que se usan los botones para llamar los formularios, en vez de usar el onclick usando:
$(document).ready(function(){
$(Bentregas).click(function(){
solicitarFormulario('Fentregas');
});
});
El problema sigue siendo LA LLAMADA DEL SCRIPT!!! No puedo usar:
<?!= include('ScriptForm1'); ?>
Por que llama el script antes de que se cargue el formulario y no encuentro como crear una funcion que se ejecute una vez que ese formulario sea descargado....
y la opcion de $.getScript(scriptForm);
me esta dando el siguiente error:
accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=http…BDate().toISOString().substring(0,%2B10);%2B%257D%2B%26_%3D1501010636192:1 GET ...//accounts.google.com/ServiceLogin?service=wise&passive=1209600&conti…%2BDate().toISOString().substring(0,%2B10);%2B%257D%2B%26_%3D1501010636192
userCodeAppPanel:1 XMLHttpRequest cannot load ...//accounts.google.com/ServiceLogin?service=wise&passive=1209600&conti…%2BDate().toISOString().substring(0,%2B10);%2B%257D%2B%26_%3D1501010636192. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://n-g53co5wg4hrumzlg4qlbmekx5pxsqh6kushamzq-0lu-script.googleusercontent.com' is therefore not allowed access. The response had HTTP status code 400.
Aquí la solución a esta pregunta: Como incluir un scrip en programación modular con GAS