Dropdown - Ajax - Foreach

How can I dynamicly add a dropdown and control it with ajax?

I have this code now:



		<td class="selector">


			<?php echo CHtml::form(); ?>


			<?= CHtml::activeHiddenField($productInCart, 'id')?>


			<?= CHtml::activeDropDownList($productInCart, 'quantity', $optionsQuantities, array(


			   'ajax' => array(


			      'type' => 'POST',


			      'url' => 'cart/update',


			      'success' => 'js:function(html){


					window.location.href = 'http://www.xxxx/cart';


					}'


			   ))); ?>


			</form>


		</td>


This code is found in a foreach. For each item, I should have a dropdown.

Now It look like this:

Posted Image

Ajax code:

jQuery(document).ready(function() {


jQuery('#CartProducts_quantity').change(function(){jQuery.ajax({'type':'POST','url':'cart/update','success':function(html){


					window.location.href = 'http://www.xxxxx/_new/cart';


					},'cache':false,'data':jQuery(this).parents("form").serialize()});return false;});


But, when I change the quantity, only the first item will update. Because AJAX works with ID's.  It should works with a class, or somehting else …

Now my question: How can I change this, so that I can work with a class ?

Anybody ?  ???

I see at least two ways:

  1. manually set the ID for each element - something like array('id' => $id, 'ajax' =>…)

  2. manually generate all ajax - something like

foreach

<?= CHtml::activeDropDownList($productInCart, 'quantity', $optionsQuantities, array('class' => 'myClass')) ?>

endforeach

<script>$('.myClass').change(function() {…});</script>

First way seems better for me.

PS. As for me, the "ajaxified" helpers are evil. Much easier (and much predictable, and much more readable) to create JS code manually in html.

Thx!

Will try that