title: jQuery .val() not working with jQueryUI autocomplete
body: <p>I've got two jQueryUI Autocomplete's on a single form.  One feeds off the other.  My goal is to have the first field autocomplete and populate the IDs to the (intended to be) hidden fields.  The second autocomplete is doing an Ajax call to a remote page, passing it the ID from the first autocomplete.</p>
  
  <p>This is mostly working.  The first autocomplete works fine, and it populates the companyID field with the appropriate value.</p>
  
  <p>My problem is that the second autocomplete is always passing a value of 0 to the Ajax requested page.  It's as if the .val() returned by the call to the source in the second autocomplete is not reading the value of the companyID field properly.</p>
  
  <p>To make things more maddening, I'm calling an alert() when the community field changes, and it's reporting the proper, accurate companyID!  <em>argh!</em></p>
  
  <p>My jQuery:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function() {
          var Companies = [
              { label: 'America First Properties', value: '6' },
              { label: 'Western National Group', value: '7' },
              { label: 'Greystar Property Management', value: '8' },
          ]
  
          $('#Company').autocomplete({
              autoFocus:  true,
              delay:      0,
              minLength:  2,
              source:     Companies,
              select:     function(event,ui) {
                              $('#companyID').val(ui.item.value);
                              $('#Company').val(ui.item.label);
                              $('#Community').val('');
                              return false;
                          },
              change:     function(event,ui) {
                          }
          });
  
          $('#Community').autocomplete({
              autoFocus:  true,
              delay:      200,
              minLength:  2,
              select:     function(event,ui) {
                              $('#communityID').val(ui.item.value);
                              $('#Community').val(ui.item.label);
                              return false;
                          },
              change:     function(event,ui) {
                              alert("The value of the company ID field is: " + $('#companyID').val());
                          },
              source:     '/Community/ajax_getCommunities.cfm?companyID=' + $('#companyID').val()
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>And my HTML:</p>
  
  <pre><code>&lt;form name="addCommunityform" id="addCommunityform" action="act_addCommunity.cfm" method="post"&gt;    
      &lt;fieldset&gt;
          &lt;label&gt;Intended to be Hidden Fields:&lt;/label&gt;
          &lt;label&gt;companyID:&lt;/label&gt;
          &lt;input type="text" name="companyID" id="companyID" value="0"&gt;
          &lt;label&gt;communityID:&lt;/label&gt;
          &lt;input type="text" name="communityID" id="communityID" value="0"&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset&gt;
          &lt;label for="Company"&gt;Property Management Company:&lt;/label&gt;
          &lt;input type="text" name="Company" id="Company" value=""&gt;
      &lt;/fieldset&gt;
  
      &lt;fieldset&gt;
          &lt;label for="Community"&gt;Community Name:&lt;/label&gt;
          &lt;input type="text" name="Community" id="Community" value=""&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Anyone have any ideas on why this .val() isn't working?</p>