Refresh a div or whole page in Google Script HTML

Question

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?

Answer 1

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;
};

Answer 2

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;
    }