My first try with UI - Am I doing it right?

My first try with UI - Am I doing it right?

My first attempt using the jQuery UI, and it actually works!  A live example is located here.  It is an auto-complete within a modal.  The returned data from the server is a JSON consisting of id=zipcode and value="city, state, zipcode".  I would appreciate any critique whether I am doing it correctly.  Also, any pointers how I can create a warning if the inputted text results in no returned values.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Jquery UI</title>
  6. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" type="text/css" media="all" />
  7. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js" type="text/javascript"></script>
  8. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.js" type="text/javascript"></script>
  9.     <style type="text/css">
  10.         body { font-size: 62.5%; }
  11.         input.text { margin-bottom:12px; width:95%; padding: .4em; }
  12.         .ui-dialog .ui-state-error { padding: .3em; }
  13.         .validateTips { border: 1px solid transparent; padding: 0.3em; }
  14.     </style>
  15.     <script type="text/javascript">
  16.     $(function() {
  17.        
  18.         var zipcode,
  19.         locations = $("#locations"),
  20.         tips = $("#validateTips");
  21.        
  22.         $('#states').change(function() {
  23.             locations.autocomplete( 'option' , 'source', 'getLocations.php?state='+$(this).val());
  24.             zipcode=0;
  25.             locations.val('');
  26.         });
  27.       
  28.         locations.autocomplete({
  29.             source: "getLocations.php",
  30.             minLength: 2,
  31.             select: function(event, ui) {
  32.                 zipcode=ui.item ? ui.item.id : '';
  33.                
  34.             }
  35.         });
  36.         function updateTips(t) {
  37.             tips
  38.                 .text(t)
  39.                 .addClass('ui-state-highlight');
  40.             setTimeout(function() {
  41.                 tips.removeClass('ui-state-highlight', 1500);
  42.             }, 500);
  43.         }
  44.         $("#dialog-form").dialog({
  45.             autoOpen: false,
  46.             width: 350,
  47.             modal: true,
  48.             buttons: {
  49.                 'Cancel': function() {
  50.                     $(this).dialog('close');
  51.                 },
  52.                 'Delete Location': function() {
  53.                     $('#location').val('');
  54.                     $('#zipcode').val('');
  55.                     $(this).dialog('close');
  56.                 },
  57.                 'Save Location': function() {
  58.                     if(zipcode)//Don't save if zipcode not selected
  59.                     {
  60.                         $('#location').val(locations.val());
  61.                         $('#zipcode').val(zipcode);
  62.                         $(this).dialog('close');
  63.                     }
  64.                     else
  65.                     {
  66.                         updateTips("Select a location before saving.");
  67.                     }
  68.                 }
  69.             }
  70.         });
  71.        
  72.         //Maybe change shadding for Save Location button until a location is selected?
  73.         //var buttons = $( "#dialog-form" ).dialog( "option", "buttons" );
  74.         $('#change_location').button().click(function()
  75.         {
  76.             $('#dialog-form').dialog('open');
  77.             zipcode=0;
  78.             $('#states').val(0);
  79.             $('#locations').val('');
  80.         });
  81.     });
  82.     </script>
  83. </head>
  84. <body>
  85. <div id="dialog-form" title="Select a Location">
  86. <p id="validateTips">A location must be selected before saving.</p>
  87. State:<select id="states">
  88. <option value="0">Select State</option>
  89. <option value="CA">California</option>
  90. <option value="WA">Washington</option>
  91. <option value="NY">New York</option>
  92. </select>
  93. <div class="ui-widget">City:<input id="locations" /></div>
  94. </div>
  95. <button id="change_location">Add City</button>
  96. <input type="text" id="location" name="location" />
  97. <input type="text" id="zipcode" name="zipcode"/>
  98. </body>
  99. </html>