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">
<a href="#" id="qty-inc-button" >More</a><?=$item['product_qty']?><a href="#" id="qty-dec-button">Less</a><!--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.
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.
Try to change IDs to classes, modify selectors to find child object of parent table_item Read about difference bteweeen id and classes.
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.