Javascript 气体-等待用户输入数据后,功能继续
我只是从天然气开始,所以如果这是一个明显的问题,我将感谢您的任何见解,并向您道歉。我正在尝试实现一个日期选择器,以便用户可以选择一些日期,而不是键入日期。我使用此问题中的代码执行此操作: 这很好,但我的问题是,在用户可以输入日期之前,我的其余代码将继续运行。调用html的函数是:Javascript 气体-等待用户输入数据后,功能继续,javascript,jquery,html,google-apps-script,datepicker,Javascript,Jquery,Html,Google Apps Script,Datepicker,我只是从天然气开始,所以如果这是一个明显的问题,我将感谢您的任何见解,并向您道歉。我正在尝试实现一个日期选择器,以便用户可以选择一些日期,而不是键入日期。我使用此问题中的代码执行此操作: 这很好,但我的问题是,在用户可以输入日期之前,我的其余代码将继续运行。调用html的函数是: function showDialog() { var html = HtmlService.createHtmlOutputFromFile('dateDialog') .setSandboxMode(
function showDialog() {
var html = HtmlService.createHtmlOutputFromFile('dateDialog')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Please provide a Date Range');
Logger.log("HTML return = %s", html.getContent());
return html.getContent();
}
我从下面的主脚本文件中调用它。选择器出现了,但我的其余代码继续执行。在这种情况下,我有一个msgBox弹出并关闭日期选择器
function runthis(){
var a = showDialog();
Logger.log(a);
//rest of code would go here
Browser.msgBox('hello world');
}
我想我可以循环一些超时或暂停,直到html返回值,但这似乎是不必要的。我做错了什么?谢谢你的帮助。我想出了正确的方法。基本上,我需要重新排序调用不同函数的方式以及代码的起始位置。也许这个问题应该删除,或者这个问题会有用,我不知道 我正在从我的入口点调用
showDialog()
:runthis()
,因此runthis()
中的后续代码正在不希望的执行
相反,我将脚本的入口点更改为showDialog()
,然后从那里我可以将用户输入的数据传递到runthis()
这真是一个愚蠢的错误,但希望这对那些刚刚使用HtmlService
编辑:
我先给日期选择器打电话:
function showDialog(){
var html = HtmlService.createHtmlOutputFromFile('DateDialog')
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
SpreadsheetApp.getUi()
.showModalDialog(html, 'Pick a date')
}
然后调用单独html文件中的模式对话框:
<div class="demo" >
<style type="text/css"> .demo { margin: 30px ; color : #AAA ; font-family : arial sans-serif ;font-size : 10pt }
p { color : red ; font-size : 11pt }
</style>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery- ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<p>Please select a date below :</p>
<p> Start Date : <input type="text" name="StartDate" id="startdatepicker" /> </p>
<p> End Date : <input type="text" name="EndDate" id="enddatepicker" /> </p>
<script>
$( "#startdatepicker" ).datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<script>
$( "#enddatepicker" ).datepicker({
showWeek: true,
firstDay: 0,
});
</script>
<input type="button" value="Create" onclick="submitDates()" />
<input type="button" value="Close" onclick="google.script.host.close()" />
<script>
// Pass input dates to server-side submitDates()
function submitDates() {
var startDate = $("#startdatepicker").val();
var endDate = $("#enddatepicker").val();
google.script.run
.withSuccessHandler(
// Dates delivered, close dialog
function() {
google.script.host.close();
})
// Display failure messages
.withFailureHandler(
function() {
var div = $('<div id="error" class="error">' + msg + '</div>');
$(element).after($("#demo"));
})
.submitDates(startDate,endDate);
}
</script>
</div>
可能有很多东西需要清理和简化,但还没有时间去做,很高兴它能工作
showmodaldiallog
不会阻止代码执行(这样做会导致浏览器UI冻结。您需要将回调传递到您的模式对话框,并在取消对话框时执行该回调,以继续执行代码。我没有经验使用google app script发布一个描述如何设置回调的答案,抱歉。感谢Prusse,这让我找到了正确的路径来解决问题。)回答。
function submitDates(startDate,endDate) {
Timesheet(startDate,endDate);
}