Ajax/php how do I identify a single generic field? - php

Question

I'm building a checkout on a marketplace application. I need to be able to increment, decrement and remove items at the checkout but when there is multpile items the AJAX event jQuery only picks up the first item_id when the AJAx event fires no mater what item a user clicks on, how can I fix this?
Here's the PHP/HTML code...
<?php
$total = 0;
$subtotal = 0;
foreach($items as $item):
$subtotal += $item['product_price']*$item['product_qty'];
?>
<tbody id="item_<?=$item['cart_item_id']?>">
<tr>
<td>
<img src="<?=$item['product_image']?>">
<?php if($item['brand_name']!='None'): ?>
<p style="color: #666;"><?=$item['brand_name']?></p>
<?php endif; ?>
<p style="font-size: 16px;"><?=$item['product_name']?></p>
<a href="#" id="remove-item-button" >Remove this item</a> <!--HERE-->
</td>
<td class="align-td-center">
<?=formatted_price($item['product_price'])?>
</td>
<td class="align-td-center">
Less<!--AND HERE-->
<input type="hidden" id="item_id" value="<?=$item['cart_item_id']?>">
</td>
<td class="align-td-center">
<span id="value-shipping-<?=$item['cart_item_id']?>"><?=formatted_price($item['product_price']*$item['product_qty'])?></span>
</td>
</tr>
</tbody>
And here's my jQ/AJAX...
$('a#qty-inc-button').click(function(){
$("#processing").fadeIn("fast");
$.ajax({
url: "<?=BASE_URL?>landing/inc_cart_item",
type: "post",
dataType: "json",
data: {inc:1, item_id: $('#item_id').val(),},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
// parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
return false;
});
$('a#qty-dec-button').click(function(){
$("#processing").fadeIn("fast");
$.ajax({
url: "<?=BASE_URL?>landing/dec_cart_item",
type: "post",
dataType: "json",
data: {dec:0, item_id: $('#item_id').val(),},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
//parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
return false;
});
$('a#remove-item-button').click(function(){
$("#processing").fadeIn("fast");
$.ajax({
url: "<?=BASE_URL?>landing/rem_cart_item",
type: "post",
dataType: "json",
data: {item_id: $('#item_id').val(),},
success: function(data){
$("#processing").fadeOut("fast");
if(data.error) {
alert(data.error);
} else {
//parent.$('#line1').text(data.line1);
//parent.$('#line2').text(data.line2);
//parent.$('#address-dialog').dialog('close');
alert(data.line1);
}
}
});
return false;
});
All help appreciated and thanks for looking.

Answer 1

An id is meant to be an unique identifier on a page. http://css-tricks.com/the-difference-between-id-and-class/
So, JQuery stops searching as soon as it finds the first occurrence of #qty-inc-button.
There are many ways to do what you are trying to acheive. You should make qty-inc-button a class name along with any id that appears multiple times on a page. Then you can try
$('a.qty-inc-button').click(function(){
$(this).DoSomething(); // where $(this) is the 'a.qty-inc-button' that the user clicked on.
// you can do:
$(this).children(".aChildClass").hide();
// you can do:
$(this).find( 'someElement' ).css( 'background-color', 'red' ); //etc, etc
});
However, in my very humble opinion you should learn more about HTML attributes and JQuery traversal before trying things of this caliber. Otherwise, you'll keep stumbling.

Answer 2

Try to change IDs to classes, modify selectors to find child object of parent table_item
Read about difference bteweeen id and classes.

Answer 3

After speaking to both client and PM and experimenting with traversal this is the answer...
onClick="remItem(<?=$item['cart_item_id']?>)"
In the relevant anchor tags, untidy it is but time is against us. Thanks to all.