Working on ajax wishlist- click again to remove product from wishlist

Question

i am working on magento 1.9.2.4 wishlist, my code successfully adding product to wishlist-

what i do for adding product to wishlist is -

function ajaxWishlist(url,id){
    var messageBox = new Growler();
    url = url.replace("wishlist/index","ajaxwishlist/index");
    url += 'isAjax/1/';
    jQuery('#ajax_loading'+id).show();
    jQuery.ajax( {
        url : url,
        dataType : 'json',
        success : function(data) {
            jQuery('#ajax_loading'+id).hide();
            if(data.status == 'ERROR'){
                console.log(data.messasge)
                messageBox.warn(data.message, {
                    life: 2
                });
            }else{
                messageBox.growl(data.message, {
                    life: 2
                });
            }
        }
    });
}

This code works fine just to add product to wishlist, what i want to achieve is, as soon as the product added to the wishlist, icon for wishlist should change and when clicking on the icon again product should remove from the wishlist.

Even i am getting this scenario but that is after page.

So what i basically want now-

1: Change icon on first click and add product to wishlist.

2: If we again click on the wishlist changed icon product should get removed from wishlist with a notification

What i did so far:

write now i am using if else condition and checking for product in wishlist like this:

<?php if ($this->helper('wishlist')->isAllow()) : ?>
    <?php
    $productId = $_product->getId();
    $customerId = Mage::getSingleton('customer/session')->getCustomerId();
    $wishlist = Mage::getModel('wishlist/wishlist')->loadByCustomer($customerId, true);
    $collection = Mage::getModel('wishlist/item')->getCollection()
        ->addFieldToFilter('wishlist_id', $wishlist->getId())
        ->addFieldToFilter('product_id', $productId);
    $item = $collection->getFirstItem();
    $hasProduct = !!$item->getId();
    ?>
    <?php if ($hasProduct == 1){ ?>
        <?php 
            $_wishlistItem = Mage::getModel('wishlist/item')->loadByProductWishlist(
                $this->helper('wishlist')->getWishlist()->getId(),
                $_product->getId(),
                $_product->getStoreId()
            );
            $_wishlistRemoveUrl = $this->helper('wishlist')->getRemoveUrl($_wishlistItem);
        ?>
        <a title="<?php echo $this->__('Remove Product from Wishlist?') ?>" href="<?php echo $_wishlistRemoveUrl ?>" class="link-wishlist link-wishlist-remove fill">
            <img src="<?php echo $this->getSkinUrl("images/wishlistico_fill.png") ?>" class="img-responsive"/>
        </a>                                        
    <?php }else{ ?>
        <a title="<?php echo $this->__('Add to Wishlist') ?>" href="#" onclick='ajaxWishlist("<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
            <img id="wishlist_img" src="<?php echo $this->getSkinUrl('images/productWishList.png');?>" class="img-responsive"/>
        </a>
    <?php } ?>
<?php endif; ?>

please help me out in the function to achieve the same..

Answer 1

I have Edited your code it should help you,Edited two lines in phtml

    <a class="remove_wishlist"style="display:none" title="<?php echo $this->__('Remove Product from Wishlist?') ?>" href="<?php echo $_wishlistRemoveUrl ?>" class="link-wishlist link-wishlist-remove fill">
                <img src="<?php echo $this->getSkinUrl("images/wishlistico_fill.png") ?>" class="img-responsive"/>
            </a>                                        
        <?php }else{ ?>
            <a class="add_wishlist" style="display:block" title="<?php echo $this->__('Add to Wishlist') ?>" href="#" onclick='ajaxWishlist("<?php echo $this->helper('wishlist')->getAddUrl($_product) ?>","<?php echo $_product->getId()?>");return false;' class="link-wishlist">
                <img id="wishlist_img" src="<?php echo $this->getSkinUrl('images/productWishList.png');?>" class="img-responsive"/>
            </a>


and in ajax added two lines

 if(data.status == 'ERROR'){
                console.log(data.messasge)
                messageBox.warn(data.message, {
                    life: 2
                });
            }else{
                jQuery('.add_wishlist').hide();
                jQuery('.remove_wishlist').show();
                messageBox.growl(data.message, {
                    life: 2
                });
            }

You can take idea with this code.