I am trying to build a simple form that has one text field, with an #autocomplete_path so it basically acts like a node reference field, and a select field with options that change based on the node that is selected in first field. My fields are like this:
$form['place_nid'] = array(
'#type' => 'textfield',
'#title' => t('Place'),
'#autocomplete_path' => 'admin/place_autocomplete',
'#size' => 30,
'#weight' => -1,
);
$form['book_nid'] = array(
'#type' => 'select',
'#title' => t('Book Source'),
'#options' => array('' => ' - All Books - '),
);
My jQuery looks like this:
$(document).ready(function(){
$("input#edit-place-nid").change(function() {
$.getJSON("/admin/book_ajax",{section_id: $("input#edit-place-nid").val()}, function(j){
var options = $.map(j, function(item) {
$(document.createElement('option')).val(item.optValue).html(item.optDiaply);
})
$('select#edit-book-nid').empty().append(options);
})
})
})
There appears to be some sort of gotcha going on here with my JQuery, and whatever js/jQ is running for the #autocomplete_path. With FireBug I can see that if I type some text into my place_nid field and then quickly click somewhere else (before that ajax call is complete), the change function is fired and my book_ajax is called. However, if i type some text into place_nid and wait for the #autocomplete_path ajax to finish and then click elsewhere, the change event is never fired and my book_ajax is never called.
Can anyone help with this problem? I am stumped.