Tutorial :jquery ui button error



Question:

Why does this code (taken from the demo sample at jquery ui), doesn't work for me? It says .button() is not a function.

Update: Tried loading from google no luck. Here is teh error

$(".demo button:first").button is not a function

Line 27

http://pastie.org/1039784

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <html>  <head>      <meta http-equiv="Content-type" content="text/html; charset=utf-8" />      <title>Page Title</title>      <link rel="stylesheet" href="screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />      <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" />          <script type="text/javascript" src="http://www.google.com/jsapi"></script>  <script type="text/javascript">       google.load("jquery", "1.3.2");      google.load("jqueryui", "1.7.2");  </script>      </head>  <body>      <div id="container" class="container">        <script type="text/javascript">          $(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          });            });      </script>      <div class="demo">        <button>Button with icon only</button>      <button>Button with icon on the left</button>      <button>Button with two icons</button>      <button>Button with two icons and no text</button>    </div><!-- End demo -->        <div>          <ul>              <li>                  <a id="icon_only"></a>              </li>          </ul>      </div>      </div>                  </body>  </html>  


Solution:1

looks like your route to jquery may be wrong, try this:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>  <script type="text/javascript">       google.load("jquery", "1.3.2");      google.load("jqueryui", "1.7.2");  </script>  

that should load the jquery and jquery ui libs from google servers and this way it should work fine


Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »