Google Apps 스크립트를 사용하여 웹 앱을 구축하려고합니다. 이 앱은 Google 스프레드 시트에서 데이터를 가져오고 내 보내야합니다. 또한 서버 측에는 jquery를 사용하여 html 파일의 필드를 동적으로 채워야하는 여러 사용자 지정 함수가 있습니다.
code.gs의 모든 기능은 꽤 잘 작동하며 문제는 html 파일에 있습니다.
Code.gs :
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
var htmlOutput = template.evaluate()
.setSandboxMode(HtmlService.SandboxMode.NATIVE);
return htmlOutput;
}
function getUserID(){
var userID=Session.getActiveUser().getEmail();
Logger.log(userID);
return (userID);
}
function getClients() {
var doc = SpreadsheetApp.openById("---spreadsheet ID here---");
var sheet = doc.getSheetByName("---Sheet name here---");
var allClients = sheet.getRange(2, 2, sheet.getLastRow()).getValues();
var clients = [];
for (i=0;i<allClients.length-1;i++){
clients.push(allClients[i]);
Logger.log("Client "+i+clients[i]);
}
return(clients);
}
index.html :
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script>
function addID(userID){
$("#userID").append(userID);
}
$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});
function addClients(clients){
$('#customer').empty();
for (i in clients) {
$('#customer').append('<option>'+clients[i]+'</option>');
$('#customer').trigger("chosen:updated");
}
}
$('document').ready(function(){
google.script.run.withSuccessHandler(addID).getUserID();
google.script.run.withSuccessHandler(addClients).getClients();
}
</script>
</head>
<div>
<h3><b>User:</b></h3>
<div id="userID"></div>
<h3><b>Date:</b></h3>
<p><input type="text" id="datepicker" size="15" name="date"></p>
<h3><b>Client:</b></h3>
<select name="customer" id="customer" data-native-menu="true" data-role="none">
<option> ---- Choose a client ----</option>
</select>
</div>
</html>
이 구조는 작동하지 않습니다. Datepicker도 작동하지 않습니다. 그러나 jquery를 사용하지 않으면 다음과 같습니다.
<div>
google.script.run.withSuccessHandler(addID).getUserID();
</div>
html 파일에서는 작동합니다. 작은 문제는 헤더에로드 한 CSS 파일이 작동하지 않는다는 것입니다. 나는 이미 <html>및 <header>태그 를 사용하지 않으려 고 노력했습니다 . 그리고 .NET에서 jquery를로드하려고했습니다 code.jquery.com. 같은 결과.
여기서 캐치는 무엇입니까?
준비된 이벤트 리스너를 닫는 것을 잊었습니다.
$('document').ready(function(){
google.script.run.withSuccessHandler(addID).getUserID();
google.script.run.withSuccessHandler(addClients).getClients();
}); // <-- here
또한 여기 i에서 새로 선언해야 var합니다.
for (var i in clients) {
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다