jQuery .val() not working with jQueryUI autocomplete

Question

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.

This is mostly working. The first autocomplete works fine, and it populates the companyID field with the appropriate value.

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.

To make things more maddening, I'm calling an alert() when the community field changes, and it's reporting the proper, accurate companyID! argh!

My jQuery:

<script>
    $(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()
        });
    });
</script>

And my HTML:

<form name="addCommunityform" id="addCommunityform" action="act_addCommunity.cfm" method="post">    
    <fieldset>
        <label>Intended to be Hidden Fields:</label>
        <label>companyID:</label>
        <input type="text" name="companyID" id="companyID" value="0">
        <label>communityID:</label>
        <input type="text" name="communityID" id="communityID" value="0">
    </fieldset>

    <fieldset>
        <label for="Company">Property Management Company:</label>
        <input type="text" name="Company" id="Company" value="">
    </fieldset>

    <fieldset>
        <label for="Community">Community Name:</label>
        <input type="text" name="Community" id="Community" value="">
    </fieldset>
</form>

Anyone have any ideas on why this .val() isn't working?

Answer 1

You need to use a function instead of a string for the source to your autocomplete:

$('#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: function (request, response) {
        $.ajax({
            url: '/Community/ajax_getCommunities.cfm?companyID=' + $('#companyID').val(),
            data: request,
            success: response,
            error: function () {
                response([]);
            },
            dataType: 'json'
        });
    }
});

Since #companyId's value is changing, selecting it once when the #Community autocomplete is initialized is not going to work. Supplying a function as the source enables you to requery the DOM for company Id each time a request is made.