JQuery example with Html Service

Question

I'm trying to figure-out JQuery in the HTML Service but I can't seem to get it to work.

Following the first example at https://developers.google.com/apps-script/html_service I can get Hello World! to display.

But if I add a script tag and point to JQuery it doesn't work, nothing shows-up on the page, it's just blank!

This is my code.gs file:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

The myPage.html that works looks like this:

<html>
  <body>
    Hello World!
  </body>
</html>

The one that doesn't looks like this:

<html>
  <body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
    Hello World!
  </body>
</html>

So how do I get JQuery (ultimately JQueryUI) to work? Are there any examples or tutorials anywhere?

Thanks,

Have you tried adding the <script> tag into the <head> section instead of the <body>? — jacobq
– jacobq, Commented Sep 17, 2012 at 20:54
It seems the solution is to have <script ...></script> rather than to just close initial tag with <script .../> — schultzter
– schultzter, Commented Sep 18, 2012 at 1:37

user1623237 · Accepted Answer · 2012-09-18 02:02:37Z

Here is a working accordion html file so just name it myPage.html

I've found some versions of jquery do not work with GAS even though they are on the compatibility list.

<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/humanity/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#accordion").accordion({ collapsible: true, active: false });
    $('.header-checkbox').click(
    function(e){
        e.stopPropagation();
    }
    );
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="accordion">
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title2</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title3</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
    </div>
</div>

</body>
</html>

Collectives™ on Stack Overflow

JQuery example with Html Service

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related