If you want to use code like you had before, check the livequery plugin. It reattached applicable events as new elements are added to the DOM (ie. Your change event to a new select box)
On May 30, 2:47 pm, DigitalDude <e.blumsten...@googlemail.com> wrote: > 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 <bally.z...@gmail.com> 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 > > > <e.blumsten...@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+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/cake-php?hl=en -~----------~----~----~----~------~----~------~--~---
