2

I am having difficulty with refreshing the HTML page or div content in a Google Apps Script. I am self-taught at programming so I have very little knowledge in the whole endeavor; please bear with me on my mess of code.

Basically, I have an application that once the user clicks on a button, it changes the information within Google Docs and refreshes the application to show the changes. I need help with the refresh part.

Here is a snippet of the html service part:

<?!= 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>

Basically the script pulls information from the spreadsheet. Is is possible once I click a button, that it refreshes the script or even the page so that the User does not have to manually? I tried searching similar inquires without meaningful result and my attempts of adding ".reload()" and ".html(data)" aren't quite working. Any ideas how I can tackle this?

| |
7
0

Old thread but maybe this will help someone... How to rebuild and display the entire page...

part of 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>

part of code.gs

    function getNewHtml(e) {
      var html = HtmlService
        .createTemplateFromFile('index') // uses templated html
        .evaluate()
        .getContent();
      return html;
    }
| |
2
0

You can use window.location.href to cause the browser tab, where your HTML App is loaded to refresh.

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

I use this, and it works, . . . but under some conditions the page refreshes, but the Apps Script doesn't fully reload. I'm still not sure why that is. So, I can't fully explain or endorse it.

You can use DOM methods and properties to inject new HTML into your Web Page without reloading the page.

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

jQuery has it's own method:

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

You already know how to use google.script.run, so you can make a call to the server, get some HTML content as a string, return it, and with a withSuccessHandler(functionToRunOnSuccess) inject the new HTML.

Let's imagine that you wanted to replace everything in your "main body":

<div class="inline mainbody">

Give that DIV an id:

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

Fetch content HTML content from the server as a string, when the .gs code returns something, the withSuccessHandler runs, then inject it into that DIV. If your withSuccessHandler was named onGotHtml:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.