Hey, THX for the response. I already changed my approach to the problem and set up ID's for the elements and use .append to replace the options of the elements. This works just finde, i encode my results to JSON and jQuery rebuilds the list oft options for my selects the way it should.
A question related to jQuery in general, are there any good sites or tutorials or what I would call a function-overview for such purposes? This would be great because it took a LOT of time to gather all required information to my topic before I could solve it. Regards On 30 Mai, 18:43, brian <[email protected]> wrote: > This is solely due to jQuery (in fact, probably the source of most > 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: > > http://docs.jquery.com/Frequently_Asked_Questions#Why_do_my_events_st... > > 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 > > <[email protected]> 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 [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/cake-php?hl=en -~----------~----~----~----~------~----~------~--~---
