Question

This piece of code does not execute the code block inside the callback function for result():

var cityURL = '/myURL/path';
    $('#city').autocomplete(cityURL, {
        cachelength:0
    }).result(function(event, data){
       if(data){           
            $('#city_id').val(data[1]);
            $('#state_id').val(data[3]);
            $('#state').val(data[2]);
       }
    });

the value of input#city_id and input#state_id does not change, but the value for #state does change. Both are hidden input right next to their field:

<input type="text" id="city" name="city"/>
<input type="hidden" id="city_id" name="city_id" />

<input type="text" id="state" name="state"/>
<input type="hidden" id="state_id" name="state_id" />

however, if I put an alert, the values change:

$('#city').autocomplete(cityURL, {
    cachelength:0
}).result(function(event, data){
   if(data){       
        alert(data[1]);
        $('input#city_id').attr('value',data[1]);
        $('input#state_id').val(data[3]);
        $('input#state').val(data[2]);
   }
});

why is this?

EDIT: Scratch that, the values do not change even with an alert:

Answer 1

As I suspected in my comment, it’s just Firebug that’s not updating properly. You shouldn’t trust the input value attributes it shows as they’re often out of date.

A reliable way to check input values is to just use JS and enter something like $("#foo").val(); in the console.