Google App脚本边栏从onclick变为空白

时间：2015-03-11 19:57:23

标签： javascript html iframe google-apps-script

Code.gs 

function showSidebar() {
  var ui = HtmlService.createHtmlOutputFromFile('Sidebar')
  .setSandboxMode(HtmlService.SandboxMode.IFRAME)
  .setTitle('Procard Tracking');
  SpreadsheetApp.getUi().showSidebar(ui);
}

Sidebar.html 

<style>
h2 {
  margin-left: 10px;
  color: #949494;
}

p {
  margin: 20px 20px 0px 20px;
}

.form-style-7{
    max-width:400px;
    margin:50px auto;
    background:#fff;
    border-radius:2px;
    padding:20px;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 h1{
    display: block;
    text-align: center;
    padding: 0;
    margin: 0px 0px 20px 0px;
    color: #5C5C5C;
    font-size:x-large;
}
.form-style-7 ul{
    list-style:none;
    padding:0;
    margin:0;   
}
.form-style-7 li{
    display: block;
    padding: 9px;
    border:1px solid #DDDDDD;
    margin-bottom: 30px;
    border-radius: 3px;
}
.form-style-7 li:last-child{
    border:none;
    margin-bottom: 0px;
    text-align: center;
}
.form-style-7 li > label{
    display: block;
    float: left;
    margin-top: -19px;
    background: #FFFFFF;
    height: 14px;
    padding: 2px 5px 2px 5px;
    color: #B9B9B9;
    font-size: 14px;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
}
.form-style-7 input[type="text"],
.form-style-7 input[type="date"],
.form-style-7 input[type="datetime"],
.form-style-7 input[type="email"],
.form-style-7 input[type="number"],
.form-style-7 input[type="search"],
.form-style-7 input[type="time"],
.form-style-7 input[type="url"],
.form-style-7 input[type="password"],
.form-style-7 textarea,
.form-style-7 select 
{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    display: block;
    outline: none;
    border: none;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    padding: 0;
    font-family: Georgia, "Times New Roman", Times, serif;
}
.form-style-7 input[type="text"]:focus,
.form-style-7 input[type="date"]:focus,
.form-style-7 input[type="datetime"]:focus,
.form-style-7 input[type="email"]:focus,
.form-style-7 input[type="number"]:focus,
.form-style-7 input[type="search"]:focus,
.form-style-7 input[type="time"]:focus,
.form-style-7 input[type="url"]:focus,
.form-style-7 input[type="password"]:focus,
.form-style-7 textarea:focus,
.form-style-7 select:focus 
{
}
.form-style-7 li > span{
    background: #F3F3F3;
    display: block;
    padding: 3px;
    margin: 0 -9px -9px -9px;
    text-align: center;
    color: #C0C0C0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}
.form-style-7 textarea{
    resize:none;
}
.form-style-7 input[type="submit"],
.form-style-7 input[type="button"]{
    background: #2471FF;
    border: none;
    padding: 10px 20px 10px 20px;
    border-bottom: 3px solid #5994FF;
    border-radius: 3px;
    color: #D2E2FF;
}
.form-style-7 input[type="submit"]:hover,
.form-style-7 input[type="button"]:hover{
    background: #6B9FFF;
    color:#fff;
}
</style>
<body>
<h2>Instructions</h2>
<p>Fill out the spreadsheet receipt information before filling out this section.</p>
<form class="form-style-7">
<ul>
<li>
    <label for="statment_date">Statement Date</label>
    <input id ="statementdate" type="date" name="statment_date">
    <span></span>
</li>
<li>
    <label for="cardholders">CardHolder</label>
    <select id="cardholders" name="cardholders">

    </select>
    <span></span>
</li>
<li>
    <label for="prepared_by">Prepared By</label>
    <input id="prepared_by"type="text" name="prepared_by" maxlength="100">
    <span>If different from CardHolder</span>
</li>
<li>
    <label for="total_activity">Total Activity</label>
    <input id="totalactivity" type="text" name="total_activity" maxlength="100">
    <span></span>
</li>
<li>
    <input id="submit_button" type="submit" value="Submit" onclick="submitForm()">
    <progress id="progress_bar" style="display: none; margin: auto;"></progress>
    <div id="finished" style="display: none; margin: auto;">
      <p style="font-size:22px; color: Green;">Ready to Print</p>
      <p style="font-size:16px; padding-top: 0px;">Go to File -> Print</p>
      <p style="font-size:12px; margin: 0px; padding: 0px;">(In the top left corner)</p>
    </div>
</li>
</ul>
</form>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>

window.onload = setCardHolders();

function setCardHolders() {
  google.script.run
    .withSuccessHandler(function(cardHolders) {
      fillCardHoldes(cardHolders);
    })
    .withFailureHandler(function(error) {
      alert(error.message);
    })
    .withUserObject(this)
    .getCardHolders();
}

function fillCardHoldes(cardHolders) {
  var selectCardHolders = document.getElementById("cardholders");

  for(var i = 1; i < cardHolders.length; i++) {
    if (!isEmpty(cardHolders[i][0])) {
      var newOption = document.createElement("option");
      newOption.value = i+1;
      newOption.innerHTML = cardHolders[i][0];
      selectCardHolders.options.add(newOption);
    }
  }

}

function isEmpty(str) {
  return (!str || 0 === str.length);
}

function submitForm() {
  var todaysDateString = new Date().toString();
  var statmentDate = new Date(document.getElementById("statementdate").value + " GMT-0800");
  var cardHolderDrop = document.getElementById("cardholders");
  var cardHolderRow = Number(cardHolderDrop.options[cardHolderDrop.selectedIndex].value);
  var preparedBy = document.getElementById("prepared_by").value;
  var totalActivity = Number(document.getElementById("totalactivity").value)

  google.script.run
    .withSuccessHandler(function(result) {
      if (result) {
        submitSuccessful();
      } else {
        alert("An error has occurred please contact spreadsheet owner.");
      }
    })
    .withFailureHandler(function(error) {
      submitFailed(error);

    })
    .withUserObject(this)
    .submitted(todaysDateString, formatDate(statmentDate), parseInt(cardHolderRow), parseFloat(totalActivity), preparedBy);
  document.getElementById("submit_button").style.display = 'none';
  document.getElementById("progress_bar").style.display = 'block';
}

function submitSuccessful() {
  document.getElementById("submit_button").style.display = 'inline';
  document.getElementById("submit_button").value = "Resubmit"
  document.getElementById("progress_bar").style.display = 'none';
  document.getElementById("finished").style.display = 'inline';
}

function submitFailed(error) {
  document.getElementById("submit_button").style.display = 'inline';
  document.getElementById("progress_bar").style.display = 'none';
  document.getElementById("finished").style.display = 'inline';
  document.getElementById("finished_info").innerHtml = "<p style=\"font-size:18px; color: Red;\">Failed</p><p>Please Contact Spreadsheet owner.</p> <p>" + error.message + "</p>";
}


function formatDate(date) {
  return (date.getMonth() + 1) + '/' + date.getDate() + '/' +  date.getFullYear()
}
</script>

这一切以前都是完美的工作，直到这些出现之前我都没碰过它。输入类型日期显示一个下拉日历，提交按钮工作并隐藏并显示html元素。这不需要设置沙盒模式。但是现在，date_date输入的日期类型不再显示下拉日历。除非我将侧边栏的沙盒模式设置为IFRAME。这很好，但是当点击提交按钮时，整个侧边栏变成空白，并且没有任何内容的html内容。然而，只要侧边栏变成空白，javascript仍可以正常运行。

1 个答案:

答案 0 :(得分：1)

您正在提交一个空白页面，这就是为什么它全部为空白，请使用下面的代码禁用提交按钮并让您自己的代码处理提交：

$('form button').on("click",function(e){
    e.preventDefault;
});

使用IFRAME，它会好得多（除非您想将文件发送到服务器）。

相关问题
最新问题