Google Webapp: How to dynamically pass array values to jquery script

后端未结

关注

 2  1870

I\'ve been working on an answer to StackOverflow question Datepicker: Disabling dates in the data. I\'ve successfully developed a small webapp that excludes specific dates from

相关标签:

2条回答

不要未来只要你来

2021-01-23 21:35
When getuserdates() in Google Apps Script side returns the value of ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"], userdates of var userdates = <?= getuserdates(); ?> is 12/13/2019,12/14/2019,12/16/2019,12/17/2019,12/24/2019 of the string type. I thought that by this, your script doesn't work.

So, as one of several answers, how about this answer? Please modify JavaScript.html.

Pattern 1:

In this pattern, the scriptlets are used. I thought that this thread might be useful.

From:
```
var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];
```
To:
```
var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
```
- When the script is run, userdates is ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].
- As one more pattern using the scriptlets, for example, if you want to use var userdates = <?= getuserdates(); ?>, you can also modify var userdates = <?= getuserdates(); ?> to var userdates = <?= getuserdates() ?>.split(",");.
Pattern 2:

In this pattern, google.script.run is used.

From:
```
var userdates = ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"];
```
To:
```
google.script.run.withSuccessHandler(userdates => {
  $(function() {
    $('#datepicker').datepicker({
      minDate: "+3W", 
      maxDate: "+12W",
      beforeShowDay: function (date) {
        $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
        if ($.inArray($thisDate, userdates) == -1) {
          return [true, ""];
        } else {
          return [false, "", "Unavailable"];
        }
      }
    });
  });
}).getuserdates();
```
- When the script is run, userdates retrieved from getuserdates() is used as ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].
Note:
- In this case, it supposes that getuserdates() returns ["12/13/2019", "12/14/2019", "12/16/2019", "12/17/2019", "12/24/2019"].
References:
- HTML Service: Templated HTML
- Class google.script.run
If I misunderstood your question and this was not the direction you want, I apologize.

Edit 1:

About issue 1:

About the reason that the error of Uncaught SyntaxError: Unexpected token '<' occurs, the reason of this issue is <?!= include('JavaScript'); ?>. So please modify as follows.

From:
```
</div>
  <?!= include('JavaScript'); ?>
</body>
```
To:
```
</div>
<script>
var userdates = [];
<? var data = getuserdates(); ?>
<? for (var i = 0; i < data.length; i++) { ?>
  userdates.push(<?= data[i] ?>);
<? } ?>
</script>
  <?!= include('JavaScript'); ?>
</body>
```
- In this case, please don't add <script>###</script> to JavaScript of <?!= include('JavaScript'); ?>.
- Unfortunately, it seems that the scriptlets cannot be used into the scriptlets.
About issue 2:

About the reason that [""12/11/2019"", ""12/15/2019"", ""12/16/2019"", ""12/17/2019"", ""12/24/2019""] is returned from getuserdates(), the reason of this issue is userdates.push('"' + datasheetData[i][5]+ '"');. So please modify as follows.

From:
```
userdates.push('"' + datasheetData[i][5]+ '"');
```
To:
```
userdates.push(datasheetData[i][5]);
```
Edit 2:

When the pattern 1 is used, the script is as follows. About getuserdates() of GAS side, please modify from userdates.push('"' + datasheetData[i][5]+ '"'); to userdates.push(datasheetData[i][5]);. And please modify HTML & Javascript side as follows.

HTML & Javascript: Page.html
```
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/cupertino/jquery-ui.css">
    <?!= include('Stylesheet'); ?>
  </head>
  <body>
  <div class="demo" >
    <h1>jQuery datepicker</h1>
     <p>click here : <input type="text" name="date" id="datepicker" /></p>
  </div>
    <script>
    var userdates = [];
    <? var data = getuserdates(); ?>
    <? for (var i = 0; i < data.length; i++) { ?>
      userdates.push(<?= data[i] ?>);
    <? } ?>
    </script>
    <?!= include('JavaScript'); ?>
  </body>
</html>
```
HTML & Javascript: JavaScript.html
```
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
$(function() {
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
});
</script>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

一生所求

2021-01-23 22:01

You can get values from the Apps Script runtime with client-side code.

To do this you need to handle the response from the function you calling with the withSuccessHandler function.

Changing your function to create the DatePicker with the date returned from the backend would look like this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script>
function onSuccess(value) {
  var userdates = value;
  $('#datepicker').datepicker({
    minDate: "+3W", 
    maxDate: "+12W",
    beforeShowDay: function (date) {
      $thisDate = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
      if ($.inArray($thisDate, userdates) == -1) {
        return [true, ""];
      } else {
        return [false, "", "Unavailable"];
      }
    }
  });
}

google.script.run.withSuccessHandler(onSuccess).getuserdates();
</script>

0 讨论(0)

Google Webapp: How to dynamically pass array values to jquery script

Pattern 1:

From:

To:

Pattern 2:

From:

To:

Note:

References:

Edit 1:

About issue 1:

From:

To:

About issue 2:

From:

To:

Edit 2:

HTML & Javascript: Page.html

HTML & Javascript: JavaScript.html