CakePHP & jQuery - Update multiple selects?

Hi,

I'm trying to deal with jQuery in CakePHP and basically I want to do
the following:

I have 5 select-boxes in which the user should chose some values, and
when a value changes the other selects should be updated with the
corresponding data.
I figured out how to update selects, that's not a big problem and it
works fine. But when I chose a value from a select box that has been
populated with jQuery, the change(function()) in my jQuery script does
not register the changing of the value, even though the div-id's are
set correct.
The part of my js-script where the second selectbox should be checked
for changed calues is not triggered, I tried many combinations of the
element-id but it won't start any function in that part.

Here's what I'm dealing with:
----------------------------------------------------------------
Main-View:
----------------------------------------------------------------
<?php echo $form->create('Booking',array('class'=>'ajax_page'));?>
<fieldset>
<legend>Ajax Test 1.2</legend>
<div class="ajax_loading_image"></div>
<?php
echo $form->input('country_id',array(
'label'=>'Country',
'empty' => 'Choose country'
));
echo $form->input('location_id',array(
'label'=>'Location',
'type' => 'select',
'empty' => 'Choose location',
'div'=>'input select ajax_location_id'
));
echo $form->input('shop_id',array(
'label'=>'Shop',
'type' => 'select',
'empty' => 'Choose shop',
'div'=>'input select ajax_shop_id'
));
?>
<?php echo $form->end();?>

----------------------------------------------------------------
The controller- part(s):
----------------------------------------------------------------
function getLocations() {
$country_id = $this->params['form']['id'];
$locations = array();
$this->layout = null;

if($country_id > 0) {
$locations = $this->Booking->Shop->Location->find('list',
array(
'contain' => array('Country'),
'conditions' => array(
'Location.country_id' => $country_id
)));
}
$this->set(compact('locations'));
}

function getActiveShops() {
$location_id = $this->params['form']['id'];
$shops = array();
$this->layout = null;

if($location_id > 0) {
$shops = $this->Booking->Shop->find('list', array(
'contain' => array('Location'),
'conditions' => array(
'Shop.location_id' => $location_id
)));
}
$this->set(compact('shops'));
}
----------------------------------------------------------------
The jQuery-script:
----------------------------------------------------------------
$(document).ready(function() {
$('.ajax_page #BookingCountryId').change(function(){
alert("Test!");
// selected value
var selected = $(this).val();

// set loading image
ajax_loading_image('.ajax_loading_image');
// ajax
$.ajax({
type: "POST",
url: '/bookings/getLocations',
data: "ajax=true&id="+selected,
success: function(msg){
//console.log(msg);
$('.ajax_location_id').html(msg);
// remove loading image
ajax_remove_loading_image('.ajax_loading_image');
}
});
});
$('.ajax_page #BookingLocationId').change(function(){
alert("Test!");
// selected value
var selected = $(this).val();

// set loading image
ajax_loading_image('.ajax_loading_image');
// ajax
$.ajax({
type: "POST",
url: '/bookings/getActiveShops',
data: "ajax=true&id="+selected,
success: function(msg){
//console.log(msg);
$('.ajax_shop_id').html(msg);
// remove loading image
ajax_remove_loading_image('.ajax_loading_image');
}
});
});
});
----------------------------------------------------------------

The views of the controller action which should replace the "old"
select-elements:
----------------------------------------------------------------
(*** function getLocations() ***)
----------------------------------------------------------------
<?php
if(!empty($locations)) {
echo $form->input('Booking.location_id',array(
'label'=>'Location',
'type' => 'select',
'options' => $locations,
'empty' => 'Choose location',
'div' => false,
'name' => 'data[Booking][location_id]'
));
}
?>
----------------------------------------------------------------
(*** function getLocations() ***)
----------------------------------------------------------------
<?php
if(!empty($shops)) {
echo $form->input('shop_id',array(
'label'=>'Shop',
'type' => 'select',
'options' => $shops,
'empty' => 'Choose shop',
'div' => false,
'name' => 'data[Booking][shop_id]'
));
}
?>

The first part where I chose a country and populate the second select-
box with the corresponding locations works fine and I get all the
right results. But when I select a location it does NOT trigger the
second function of the jQuery script and that gives me a headache!

What is the magic mistake in my code or my thinking? Please help me,
I'm stuck on this for days now and I can't figure out why this
aaproach does not work correct :(

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To post to this group, send email to cake-php@googlegroups.com
To unsubscribe from this group, send email to cake-php+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---