title: jquery ui button error
body: <p>Why does this code (taken from the demo sample at jquery ui), doesn't work for me? It says .button() is not a function.</p>
  
  <p>Update: Tried loading from google no luck. Here is teh error</p>
  
  <p>$(".demo button:first").button is not a function</p>
  
  <p>Line 27</p>
  
  <p><a href="http://pastie.org/1039784" rel="nofollow noreferrer">http://pastie.org/1039784</a></p>
  
  <pre><code> &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-type" content="text/html; charset=utf-8" /&gt;
      &lt;title&gt;Page Title&lt;/title&gt;
      &lt;link rel="stylesheet" href="screen.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="scripts/css/ui-lightness/jquery-ui-1.8.2.custom.css" type="text/css" media="screen" title="no title" charset="utf-8" /&gt;
  
  
      &lt;script type="text/javascript" src="http://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
      google.load("jquery", "1.3.2");
      google.load("jqueryui", "1.7.2");
  &lt;/script&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container" class="container"&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function(){
                  $(".demo button:first").button({
              icons: {
                  primary: 'ui-icon-locked'
              },
              text: false
          }).next().button({
              icons: {
                  primary: 'ui-icon-locked'
              }
          }).next().button({
              icons: {
                  primary: 'ui-icon-gear',
                  secondary: 'ui-icon-triangle-1-s'
              }
          }).next().button({
              icons: {
                  primary: 'ui-icon-gear',
                  secondary: 'ui-icon-triangle-1-s'
              },
              text: false
          });
  
          });
      &lt;/script&gt;
  
  
  &lt;div class="demo"&gt;
  
      &lt;button&gt;Button with icon only&lt;/button&gt;
      &lt;button&gt;Button with icon on the left&lt;/button&gt;
      &lt;button&gt;Button with two icons&lt;/button&gt;
      &lt;button&gt;Button with two icons and no text&lt;/button&gt;
  
  &lt;/div&gt;&lt;!-- End demo --&gt;
  
      &lt;div&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;a id="icon_only"&gt;&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;              
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>