Showing and hiding buttons per ajax request in jquery

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 …

via PHP Website Development » Search Results » ajax:

Showing and hiding buttons per ajax request in jquery

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 CARTn”;
echo “ADD TO CARTn”;
else
echo “ADD TO CARTn”;
echo “REMOVE FROM CARTn”;
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.
……………………..

first in php:
$cart = ”;
$noCart = ”;

if ( ! isset($_SESSION[‘cart’][$row[‘bbn’]]) ) $cart = ‘inactive’;
else $noCart = ‘inactive’;

echo ‘REMOVE FROM CARTn’;
echo ‘ADD TO CARTn’;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’);
);

For more info: Showing and hiding buttons per ajax request in jquery

PHP Website Development » Search Results » ajax

Showing and hiding buttons per ajax request in jquery

Share this post:

Related Posts

Leave a Comment