CODEWITHSUNDEEP
google-apps-scriptweb-applications
GeeksMathGeeks
GeeksMathGeeks

Reputation: 27

Why function in <script> tag does NOT invoke function defined in .gs file in AppScript (Web App)?

issue

details

Recently, I create a new deployment (Web App) in AppScript Editor,

then I copy the Web url and paste it into Microsoft Edge webbrowser url search box.

When I click a button, it alerts callback and then alerts finished, not invoke createStockPrice function which is defined in .gs file.

Thus, I say that when I click the button, the function in <script> tag was invoked, but the function defined in .gs file was not invoked.

Why?

appreciated

Any replies about this issue will be appreciated.

demo

Demo of stock data generator (Web App) in AppScript in version v1.0.0 (problematic)

code

The strange result

I say that when I click the buttn, the function in <script> tag was invoked, but the function defined in .gs file was not invoked.

can be proven in the most top 3 important script file,

but for completeness, I offer code snippets of all files.

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
      function callback(){
        alert('callback');
        google.script.run.createStockPrice();
        alert('finished');
      }
    </script>
    <label>Stock ID:</label>
    <input id="stockId" type="number"/><br>
    <button type="submit" onclick="callback();">submit</button>
    <br>
    <input id="output_stockId" type="number" readonly/>
  </body>
</html>

doGet.gs

function doGet(e) {
  const htmlFile = 'index';
  const htmlService = HtmlService.createHtmlOutputFromFile(htmlFile);
  return htmlService;
}

createStockPrice.gs

function createStockPrice() {
  alert('createStockPrice');
  const stockId = getStockId();
  const stockPrice = getStockprice(stockId);
  const fields = ['日期','成交股數','成交金額','開盤價','最高價','最低價','收盤價','漲跌價差','成交筆數'];
  createTable(fields,stockPrice);
}

createTable.gs

function createTable(fields,datas) {
  alert('createTable');
  document.createElement('table');
  
  createTableFields(fields);

  const datasLength = datas.length;
  for(let i = 0; i < datasLength;i++){
    const data = datas[i];
    createTableRow(data);  
  }
}

createTableFields.gs

function createTableFields(fields) {
  const fieldsLength = fields.length;
  document.createElement('tr');
  for(let i=0;i<fieldsLength;i++){
    const field = fields[i];
    const elem = document.createElement('th');
    elem.value = field;
  }
}

createTableRow.gs

function createTableRow(fields) {
  const fieldsLength = fields.length;
  document.createElement('tr');
  for(let i=0;i<fieldsLength;i++){
    const field = fields[i];
    const elem = document.createElement('td');
    elem.value = field;
  }
}

getStockprice.gs

function getStockprice(ticker)  {
  let url = 'https://www.twse.com.tw/exchangeReport/STOCK_DAY?response=json&date=202412&stockNo='+ticker;
  let response = UrlFetchApp.fetch(url);
  Logger.log(response.getContentText())
  let data = JSON.parse(response.getContentText());

  Logger.log(data);
  Logger.log(data['data']);
  return data['data']
}

function testGetStockPrice(){
  Logger.log(getStockprice(2330));
}

getStockId.gs

function getStockId() {
  alert('getStockId');
  const stockIdElem = document.getElementById('stockId');
  const stockId = stockIdElem.value;
  alert(stockId);
  document.getElementById('output_stockId').value = stockId;
  return stockId;
}

What did I try?

Look at google.script.run (Google Workspace guide)

and I invoke the function which is defined in .gs file by google.script.run.

For example,

google.script.run.createStockPrice();

instead of

createStockPrice();

1th Edit

After I see @TheWizEd's answer on this article -- In app script, how to include script.html file (without tag) in index.html

I add include.gs in project

all script files in this project

and defined include function as follows.

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

Then I added this line <?!= include("createStockPrice"); ?> in index.html.

making following code snippets in the following code section.

After that, I manage deployment for updates to newer version (steps followed by my note at GitHub)

But when I copy the Web url and paste it into Microsoft Edge webbrowser.

It displays

web page UI with given web url

Why?

code

[!NOTE] Other code snippets remain same (as mentioned above in previous code section).

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <?!= include("createStockPrice"); ?> <!-- only add this line -->
    <script>
      function callback(){
        alert('callback');
        google.script.run.createStockPrice();
        alert('finished');
      }
    </script>
    <label>Stock ID:</label>
    <input id="stockId" type="number"/><br>
    <button type="submit" onclick="callback();">submit</button>
    <br>
    <input id="output_stockId" type="number" readonly/>
  </body>
</html>

include.gs

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

2th Edit

After I read the answer again,

The answer says the <?!= ?> syntax is placed in <script> tag.

Thus I moved <?!= include("createStockPrice"); ?> into <script> tag.

    <script>
      <?!= include("createStockPrice"); ?>
    </script>

But after manage deployment for updates and copy web url and paste it into Microsoft Edge webbrowser's url search box.

I still get the same result as non-edit version (see following demo)

I don't know why?

demo

Let's take demo in non-edit version.

Demo of stock data generator Web App in AppScript in version v1.0.0 (problematic)

code

index.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
    <script>
      <?!= include("createStockPrice"); ?>
    </script>
    <script>
      function callback(){
        alert('callback');
        google.script.run.createStockPrice();
        alert('finished');
      }
    </script>
    <label>Stock ID:</label>
    <input id="stockId" type="number"/><br>
    <button type="submit" onclick="callback();">submit</button>
    <br>
    <input id="output_stockId" type="number" readonly/>
  </body>
</html>

Upvotes: 1

Views: 40

Answers (0)

Related Questions