use an include to include an html file that contains a script

Question

I am working on a Google Apps Script. My situation is that I have an index.html file and a few others which should all share a menu on the side. I therefore have a function as follows

function include(File) {
  return HtmlService.createHtmlOutputFromFile(File).getContent();
};

and use

<?!= include('leftMenu'); ?>

to include that in my html files. The problem I have is that in the included file there is a function called that is defined in my Code.gs

<div class="leftmenu">
      Main menu<br>
      <?var url = getScriptUrl();?><a href='<?=url?>?page=newInvoice'>New invoice</a><br>
      <?var url = getScriptUrl();?><a href='<?=url?>?page=index'>Home</a>
    </div>

This function works as I would expect as long as these lines are in the "main" html file but they produce text if they are in the "included" html file.

I hope that makes sense and some one is kind enough to explain what the problem is and hopefully how I can get round it.

Thank you Neill

14 Dec. 2016 edited to try and explain exactly what my problem is

I have a html file named “newinvoice.html”. This has javascript functions in it as follows

<script type="text/javascript">
  function formSubmit() {
 google.script.run.withSuccessHandler(updateUrl).onSubmitButton(document.forms[0]);
  }

  function updateUrl(url) {
    var successMsg = document.getElementById('output');
    successMsg.innerHTML = 'New invoice created, saved and sent per Email';
  } 
</script>

I can move these functions into a separate html file as you suggested. This is called menu_JS.html and is included in my main file with This works perfectly.

I have a call to one of these these functions - also in the main html “newinvoice.html” This is as follows

<div class="leftmenu">
  Main menu<br>
  <?var url = getScriptUrl();?><a href='<?=url?>?page=newInvoice'>New invoice</a><br>
  <?var url = getScriptUrl();?><a href='<?=url?>?page=index'>Home</a>
</div>

If I move this into a separate file “leftMenu.html” and include that in “newinvoce.html” with Then the output no longer works.

It appears that the scripts are trying to run before the files are included instead of the include and then the execution as I am used to from PHP.

As always, I appreciate anyone willing to take the time to help me. This is frustrating. Thank you!

Karl_S · Accepted Answer · 2016-12-15 13:29:07Z

1

Create another HTML file and put the script you want to run client side in that file. Then use the same include statement to include that file.

So make menu_JS.html and place your functions in that, between script tags:

<script>
  firstFunction(){
    alert("In the first function");
  }

  secondFunction(){
    alert("In the second function");
  }

</script>

And in your main HTML template file, preferable after the body loads, place:

<?!= include('menu_JS'); ?>

NOTE that the script is in an HTML file and NOT a Script file.

EDIT: Nov 15 2016 Below is the variation of the function which I have that is working for my needs. Note that I am evaluating the included html file. I had previously used code more similar to your (commented out) and changed it to this some time ago:

function include(filename) {
//  return HtmlService.createHtmlOutputFromFile(filename)
  return HtmlService.createTemplateFromFile(filename).evaluate()
      .getContent();
}

//function includeRaw(filename) {
//    return HtmlService.createTemplateFromFile(filename).getRawContent();
//}

And this is how I load the initial html file. This is often in the doGet() function, but may be elsewhere

  var result=HtmlService.createTemplateFromFile('GridView').evaluate()
        .setTitle('Boxwood Registrations')
        .setWidth(1285)
        .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);

  return result;

edited Dec 15, 2016 at 13:29

answered Dec 12, 2016 at 21:14

Karl_S

3,5922 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Neill Hogarth Over a year ago

Thank you @Karl_s for taking the time to answer.

Neill Hogarth Over a year ago

Unfortunately I think I have failed to fully understand you. I have tried adding a <?!= include('menu_JS'); ?> in my main html an later a <?!= include('leftMenu'); ?> which includes the call to the functions. This does not work for me. I also tried including the <?!= include('menu_JS'); ?> in the html of leftMenu.htm also without success.

Karl_S Over a year ago

See the edit above. Also: Please make sure leftMenu and menu_JS are HTML files by either expanding the width of the left menu where they are listed or hovering over them and making sure they have an extension of .html. If you still have problems, can you make at least a copy of your file available?

Neill Hogarth Over a year ago

Thank you. It works perfectly exactly as you described with return HtmlService.createTemplateFromFile(filename).evaluate().getContent();

Neill Hogarth Over a year ago

Done! I would have liked ti upvote the answer but I am not yet "important enough"

|

Collectives™ on Stack Overflow

use an include to include an html file that contains a script

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related