questions on its mailing list).
The problem is that you're completely replacing each of the selects,
rather than just the options. So, the event handlers you set up on the
selects are no longer once the selects have been replaced. See here:
Also, it doesn't appear that you have several sets of these 5 selects
on a page because you're setting the event handlers using the element
IDs (eg. '#BookingCountryId'). So, you might want to consider using an
element id, rather than a class (eg. '.ajax_shop_id'), for the target
to be updated.
Or, don't bother and let jQuery find it using the select element itself:
$('.ajax_page #BookingCountryId').change(function(){
var self = this;
var selected = $(this).val();
ajax_loading_image('.ajax_loading_image');
$.ajax({
type: "POST",
url: '/bookings/getLocations',
data: "ajax=true&id="+selected,
success: function(msg){
$(self).parent('div').html(msg);
ajax_remove_loading_image('.ajax_loading_image');
}
});
});
However, I recommend that you simply replace the options rather than
the entire select element.
On Sat, May 30, 2009 at 9:06 AM, DigitalDude
<e.blumstengel@googlemail.com> wrote:
>
> 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
-~----------~----~----~----~------~----~------~--~---
No comments:
Post a Comment