Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>first in php:</p> <pre><code>$cart = ''; $noCart = ''; if ( ! isset($_SESSION['cart'][$row['bbn']]) ) $cart = 'inactive'; else $noCart = 'inactive'; echo '&lt;a href="#" class="'.$cart.' removefromcart"&gt;REMOVE FROM CART&lt;/a&gt;\n'; echo '&lt;a href="#" class="'.$noCart.' addtocart"&gt;ADD TO CART&lt;/a&gt;\n'; </code></pre> <p>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.</p> <p>first method add to your css:</p> <pre><code>.inactive {display: none;} </code></pre> <p>and in js:</p> <pre><code>$(".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'); }); }); </code></pre> <p>Second method, no need for a CSS entry.</p> <pre><code>$(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'); }); }); }); </code></pre> <p>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.</p> <pre><code> $object.hide() $.get("queue.php", params, function (data) { $object.siblings().show('highlight'); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload