Google apps script: jquery is not working

Question

I'm trying to build a web app using google apps script. This app should import and export data from/to google spreadsheet. Also, I have several custom functions on the server side which should dynamically populate fields in html file (using jquery).

All functions in code.gs work pretty good, the problem is in html file.

Code.gs:

function doGet() {
  var template = HtmlService.createTemplateFromFile('index');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE);

  return htmlOutput;
}

function getUserID(){
 var userID=Session.getActiveUser().getEmail();
  Logger.log(userID);
  return (userID);
}

function getClients() {
  var doc = SpreadsheetApp.openById("---spreadsheet ID here---");
  var sheet = doc.getSheetByName("---Sheet name here---");
  var allClients = sheet.getRange(2, 2, sheet.getLastRow()).getValues();
  var clients = [];
  for (i=0;i<allClients.length-1;i++){
      clients.push(allClients[i]);
      Logger.log("Client "+i+clients[i]);

  }
  return(clients);
}

index.html:

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>

<script>
function addID(userID){
$("#userID").append(userID);
}

$(function() {
$( "#datepicker" ).datepicker();
$( "#anim" ).change(function() {
$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
});
});

function addClients(clients){
  $('#customer').empty();
  for (i in clients) {
    $('#customer').append('<option>'+clients[i]+'</option>');
    $('#customer').trigger("chosen:updated");
  }
}

$('document').ready(function(){
google.script.run.withSuccessHandler(addID).getUserID();
google.script.run.withSuccessHandler(addClients).getClients();
}
</script>
</head>

<div>
<h3><b>User:</b></h3>
<div id="userID"></div>

<h3><b>Date:</b></h3>
<p><input type="text" id="datepicker" size="15" name="date"></p>

<h3><b>Client:</b></h3>

<select name="customer" id="customer" data-native-menu="true" data-role="none">
    <option> ---- Choose a client ----</option>
</select>
</div>
</html>

This construction doesn't work. Datepicker doesn't work also. But if I do not use jquery, just:

<div>
google.script.run.withSuccessHandler(addID).getUserID();
</div>

in html file, it DOES work. The smaller problem is that none of css file that I load in the header isn't working too. I've already tried not to use <html> and <header> tags. And I've also tried to load jquery from code.jquery.com. Same result.

What is the catch here?

Oliboy50 Oliboy50 · Accepted Answer · 2014-07-31T06:42:39

You forgot to close the ready event listener :

$('document').ready(function(){
  google.script.run.withSuccessHandler(addID).getUserID();
  google.script.run.withSuccessHandler(addClients).getClients();
}); // <-- here

Also you should declare i as a new var here :

for (var i in clients) {

Google apps script: jquery is not working

2 Answers