Refresh HTML service webpage on click

Question

Mypage.html
<div class="seven"><button onClick="Submit()">submit</button> </div>

<script type="text/javascript">
        function submit() {
            google.script.run.scores(document.forms[0]);
        }
</script>

....

Javascript.gs
function scores(form){
Logger.log("I am called")
}

The above code works perfectly, however each time I click button, I want the HTML Templated/deployed webpage to load/reload/refresh as well...

I tried adding

google.script.run.scores(document.forms[0]); (continued from above code, hence line repeated))
google.script.host.refresh (basically got the idea from host.close)
google.script.host.reload
google.script.host.load 

Please can someone help me to get the proper code by which onClick of the button the scores function is called (at present working) along with the page being refreshed.

Note: I want it refreshed, reason being - on submit, data is pushed to GSheet which is again called in a dropdown on refresh....

Thanks in advance....

Answer 1

As far as I know, there is no way to refresh the templated HTML in GAS.

Even if you could, this would be similar (albeit an extremely slow version) of a "refresh"-style website where you have to continually pass data back and forth from the client to the server and then back to the client in rendered form which is very slow and inefficient.

Every-time you perform a server-side action (google.script.run...) google's cloud servers have to load the application state, perform the function and then terminate.

My suggestion (as I am working on a product which requires a bit of templating) is to simply use client-side javascript to render and re-render your UI.

I primarily use jQuery but it is very verbose and time-intensive compared to great javascript templating engines out there such as KnockoutJS.

If any SO users have found a better way to make responsive and interactive UIs in GAS please let us know!