Browse through the posts here. There are tons of great tips. http://www.learningjquery.com/
On Sat, May 30, 2009 at 5:47 PM, DigitalDude <[email protected]> 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 <[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 -~----------~----~----~----~------~----~------~--~---
