Search code examples
jquery-uigmail-contextual-gadgets

Gmail Contextual Gadget, Cannot Get jQueryUI Buttons To Show


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?


Solution

  • 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"/>