在Google Script HTML Service

时间:2015-05-28 23:15:26

标签: javascript jquery html google-apps-script

我无法在Google Apps脚本中刷新HTML页面或div内容。我在编程方面自学成才,所以我对整个工作知之甚少;请耐心等待我的代码。

基本上,我有一个应用程序,一旦用户点击按钮,它就会更改Google文档中的信息并刷新应用程序以显示更改。我需要有关刷新部分的帮助。

以下是html服务部分的片段:

<?!= include('Stylesheet'); ?>
<? var data = getData(); ?>
<? var data2 = get2Data(); ?>
...
<div class="inline mainbody">
    <div class="title">
    </div>
    <div class="section group">
        <div class="col span_1_of_2">
            <div class="newreq">
                <table>
                    <h2>New Requests</h2>
                    <? for (var i = 0; i < data.length; i++) { ?>
                    <? for (var j = 0; j < data[i].length; j++) { ?>
                        <? if ((data[i][23] == 'None') && (data[i][29] != "Done") && (data[i][30] != "Yes") && (data[i][31] != "Yes")) { ?>
                        <tr>
                            <td>
                                <b>Name:</b> <?= data[i][3] ?>&nbsp;&nbsp;&nbsp;<b>School:</b> <?= data[i][5] ?>&nbsp;&nbsp;&nbsp;<b>Program Type:</b> <?= data[i][1] ?><?= data[i][2] ?>
                                <br>
                                <p><b>First Choice at:</b> <?= data[i][19] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','First')" type="button" value="Finalize First Choice">
                                </p>
                                <p><b>Second Choice at:</b> <?= data[i][20] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','Second')" type="button" value="Finalize Second Choice">
                                </p>
                                <p><b>Third Choice at:</b> <?= data[i][21] ?>&nbsp;&nbsp;&nbsp;<input onclick="google.script.run.finalTime('<?= data[i][24] ?>','Third')" type="button" value="Finalize Third Choice">
                                </p>
                                <p><input onclick="google.script.run.deletePre('<?= data[i][24] ?>')" type="button" value="Delete" class="button">
                                </p>
                                <br>
                            </td>
                        <? break ?>
                        <? } ?>
                        </tr>
                    <? } ?>
                    <? } ?>
                </table>
            </div>
        </div>

基本上,脚本从电子表格中提取信息。一旦我点击一个按钮,它是否可以刷新脚本甚至页面,以便用户不必手动?我尝试搜索类似的查询而没有有意义的结果和我尝试添加&#34; .reload()&#34;和&#34; .html(数据)&#34;不是很有效。我有什么想法可以解决这个问题吗?

2 个答案:

答案 0 :(得分:7)

旧线程但也许这会帮助某人...如何重建和显示整个页面...

index.html的一部分

    <div id="refresh" onclick ="google.script.run
        .withSuccessHandler(refreshApp)
        .getNewHtml()">
    Refresh
    </div>

    <script>
      function refreshApp(newHtml) {
        document.open();
        document.write(newHtml);
        document.close();
      }
    </script>

code.gs

的一部分
    function getNewHtml(e) {
      var html = HtmlService
        .createTemplateFromFile('index') // uses templated html
        .evaluate()
        .getContent();
      return html;
    }

答案 1 :(得分:2)

您可以使用window.location.href导致加载HTML App的浏览器标签进行刷新。

window.myFunctionToRefresh = function() {
  window.location.href = "https://script.google.com/macros/s/YourAppsScriptID_Here/exec";
  return false;
};

我用它,它有效,。 。 。 某些条件下页面刷新,但Apps脚本无法完全重新加载。我仍然不确定为什么会这样。所以,我无法完全解释或认可它。

您可以使用DOM方法和属性将新HTML注入网页,而无需重新加载页面。

document.getElementById('element_ID_Here').innerHTML = "<div>Hello World</div>";

jQuery有自己的方法:

$("#element_ID_Here").html("Hello World");

您已经知道如何使用google.script.run,因此您可以调用服务器,将一些HTML内容作为字符串,返回它,并使用withSuccessHandler(functionToRunOnSuccess)注入新的HTML。< / p>

让我们假设您想要替换“主体”中的所有内容:

<div class="inline mainbody">

给那个DIV一个id:

<div id='idMainBody' class="inline mainbody">

从服务器获取内容HTML内容作为字符串,当.gs代码返回某些内容时,withSuccessHandler运行,然后将其注入该DIV。如果您的withSuccessHandler被命名为onGotHtml

function onGotHtml(argMyNewHTML) {
  document.getElementById('idMainBody').innerHTML = argMyNewHTML;
};