Gmail Contextual Gadget, Cannot Get jQueryUI Buttons To Show

Question

Have got a problem getting jQueryUI working / initialising a basic button inside of the CDATA part of a Gmail Contetual Gadget Spec file.

Here is the the first part of the CDATA section of the spec file.

The problem is that while the alert() runs, the .button() call doesn't do anything to the html button.

I've also tried .button("refresh") to no avail.

<Content type="html" view="card">
<![CDATA[
  <style type="text/css" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"></style>
  <!-- Start with Single Sign-On -->      
  <script type="text/javascript" src="http://example.com/gadgets/sso.js"></script>
  <!-- jQuery -->
  <!-- Check for latest .. https://developers.google.com/speed/libraries/devguide -->
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
  <p>Version 11</p>

  <button type="submit" id="test-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Button</span></button>
  <script type="text/javascript">$(function() { $("#test-button").button(); alert("why?"); } );</script>

Have I missed something?

Answer 1

Okay, so .. shameface. The problem was that the jqueryUI style wasn't being imported correctly.

Instead of "" I needed to use "

<link rel="stylesheet" type="text/css" media="screen, projection" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css"/>

Answer 2

You need a # in front of test-button selector on your last line because test-button is the id of the button.

You also have a lot more markup than necessary for creating the button. Try changing this line:

<button type="submit" id="test-button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button"><span class="ui-button-text">Button</span></button>

to...

<button id="test-button">Button</button>

The button plugin will take care of adding all the classes and such it needs from there.