jQuery onblur with Google Apps Script

Question

I'm trying to get jQuery onblur to work in Google Apps Script HtmlService. I can get the HTML to render and everything, but the onblur isn't working. I'm just doing a simple one to get it working first, onblur the input text and change the color of the div background.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#color').blur(function(){
    $('#container').css('background-color','#ffffff');
  });
});
</script>

<label>Background Color: </label><input type="text" size="30" id="color" name="color" /><br />

<div id="container" style="background-color:#9fc1f1;">
test
</div>

Arun Nagarajan Arun Nagarajan · Accepted Answer · 2012-11-03T17:37:35

This is working for me fine. Here is the deployed version (I changed the on change color to blue for more prominence)-

https://script.google.com/macros/s/AKfycbykzYO1_z5Zp0g5Nx1F5aLa10JVIbN8nQGSWskBQdzypLRRnklw/exec

Here is my full script. I did notice that it didn't work if I didn't have the surrounding <html> tags. Did you include that in your script?

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
  $('#color').blur(function(){
    $('#container').css('background-color','#000fff');
  });
});
</script>
<label>Background Color: </label><input type="text" size="30" id="color" name="color" /><br/>
<div id="container" style="background-color:#9fc1f1;">
test
</div>
</html>

jQuery onblur with Google Apps Script

1 Answers