Showing and hiding buttons per ajax request in jquery - php

Question

I've coded up a sort of inventory managing system and I'm adding a shipping cart so to speak to it. I'm trying to make the interface easier to use and navigate through jquery. The 'cart' is stored via sessions in php. I have a page that outputs all the inventory and I am adding buttons that allow the user to add or remove each specific item from the 'cart', but only one button should be shown based on cart status (i.e. if the item is in cart, show the remove button).
Ive got a mess of jquery code as I'm trying all sorts of approaches
heres some php:
if(isset($_SESSION['cart'][$row['bbn']])) {
echo "REMOVE FROM CART\n";
echo "ADD TO CART\n";
} else {
echo "ADD TO CART\n";
echo "REMOVE FROM CART\n";
}
here's some jquery:
$(".addtocart").each(function (i) {
if($(this).hasClass('active')){
$(this).siblings('.removefromcart').hide();
}
});
$(".removefromcart").each(function (i) {
if($(this).hasClass('active')){
$(this).siblings('.addtocart').hide();
}
});
// View_inventory add button
$(".addtocart").click(function(){
var $bbn = $(this).parent().attr("id");
var $object = this;
$.ajax({
url: "queue.php?action=add",
data: { bbn: $bbn },
type: 'GET',
success: function(){
$($object).hide();
$($object).siblings('.removefromcart').show('highlight');
}
});
});
$(".removefromcart").click(function(){
var $bbn = $(this).parent().attr("id");
var $object = this;
$.ajax({
url: "queue.php?action=remove",
data: { bbn: $bbn },
type: 'GET',
success: function(){
$($object).hide();
$($object).siblings('.addtocart').show('highlight');
}
});
});
Any suggestions as to how I should make this simpler? Ive got it working now.

Answer 1

first in php:
$cart = '';
$noCart = '';
if ( ! isset($_SESSION['cart'][$row['bbn']]) ) $cart = 'inactive';
else $noCart = 'inactive';
echo 'REMOVE FROM CART\n';
echo 'ADD TO CART\n';
now I present two method, the first one will execute slightly faster as it only switch classes in css, but you don't get your fancy effect. you get it in the second method.
first method
add to your css:
.inactive {display: none;}
and in js:
$(".addtocart, .removefromcart").click(function(){
var $object = $(this);
var bbn = $object.parent().attr("id");
var action = $object.find('.addtocart').length ? 'add' : 'remove';
$.get("queue.php", {"action": action, "bbn": bbn}, function (data) {
$object.addClass('inactive').siblings().removeClass('inactive');
});
});
Second method, no need for a CSS entry.
$(function () { // equivalent to $(document).ready(function () {
$('.inactive').hide();
$(".addtocart, removefromcart").click(function(){
var $object = $(this);
var bbn = $object.parent().attr("id");
var action = $object.find('.addtocart').length ? 'add' : 'remove';
var params = {action: action, bbn: bbn};
// $('#someSpinnigLoadingImage').show();
$.get("queue.php", params, function (data) {
// $('#someSpinnigLoadingImage').hide();
$object.hide().siblings().show('highlight');
});
});
});
hope this help. note: I didn't test the code, some nasty typo might have slipped through.
Additionnal note, you might want some visual effect right before the ajax call (like in the comment in version 2, or hide $object, so that the user can't multiclick it.
$object.hide()
$.get("queue.php", params, function (data) {
$object.siblings().show('highlight');
});