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+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/cake-php?hl=en
-~----------~----~----~----~------~----~------~--~---
No comments:
Post a Comment