Question

I have a button, “Add to Cart” which sends an ajax request when clicked. After the request returns successfully, the the button is replaced by “In Your Cart”. “In Your Cart” has a mouseover state: “Remove From Cart”.

The design requirement is that “Remove From Cart” only appear when the user physically moves the mouse over “In Your Cart”. If they simply click “Add to Cart” and don’t move the mouse, the button should say “In Your Cart” after the ajax call completes, even if the mouse is still over the element.

A simple mouseover event listener doesn’t work, because it triggers when the element becomes visible. I’m considering counting mouseovers and mouseouts of a wrapper element, in order to determine if the mouseover event is “real”, or just the result of the element becoming visible, but that’s really ugly. Any other ideas for me?

Answer 1

You could do something like this (edit as appropriate for your AJAX call):

HTML:

<div class="cart">
    <button class="add-cart">Add to Cart</button>
    <button class="in-cart" style="display:none;">In Your Cart</button>
</div>

Javascript:

var $addCart = $('.add-cart');
var $inCart = $('.in-cart');

$addCart.click( function(e){
    $addCart.hide();
    $inCart.show().addClass( 'initial' );
});

$inCart.mouseover( function(){
    if( ! $inCart.is( '.initial' ) ){
        $inCart.text( 'Remove from Cart' );
    }
});

$inCart.mouseout( function(){
    $inCart.text( 'In Your Cart' ).removeClass( 'initial' );
});

jsFiddle

UPDATE

Based on OP’s comment below, I’ve update the HTML and Javascript as follows:

<span class='cart'>
    <button class="add-cart">Add to Cart</button>
    <button class="in-cart" style="display:none;">In Your Cart</button>
</span>

Javascript:

var $cart = $('.cart');
var $addCart = $('.add-cart');
var $inCart = $('.in-cart');

$addCart.click( function(e){
    $addCart.attr('disabled','disabled');
    setTimeout(function(){
        $addCart.hide();
        $inCart.show();
    }, 1000);
});

$cart.mouseenter( function(){
    if( $inCart.is(':visible') ){
        $inCart.text( 'Remove from Cart' );
    }
});

$cart.mouseleave( function(){
    if( $inCart.is(':visible') ){
        $inCart.text( 'In Your Cart' );
    }
});

The differences here are:

1. The add-cart button is disabled while AJAX is simulated and then hidden.
2. mouseover and mouseout have been replaced with mouseenter and mouseleave.
3. These events are now tied to the span wrapper so that the user mouse behavior can be tracked better since the span never hides itself.

Updated jsFiddle