CODEWITHSUNDEEP
phpjqueryajax
Vintage Beef
Vintage Beef

Reputation: 475

Ajax change icon color add/remove wishlist

Example :

If user has already added product A in wishlist heart icon should be display in red color, And If user click on add to wishlist button it will remove product A from wishlist and heart icon should be display in grey color.

<a class='addtowishlist' href='javascript:;' data-data='".$row['p_id']."'><i class='fa fa-heart'></i> Add to Wish list</a>

ajax

<script type="text/javascript">
$(document).ready(function(){
    $(".addtowishlist").live('click', function(evt) {
       var link_data = $(this).data('data');
       $.ajax({
          type: "POST",
          url: 'addtowishlist.php',
          data: ({product_id: link_data}),
          success: function(data) {
          }   
       });   
    }); 
});
</script>

addtowishlist.php

<?php
session_start();
include 'connect.php';

if(isset($_POST['product_id'])) {  
    $addmemberid = $_SESSION['member_id'];
    $addproductid = $_POST['product_id'];

    $result = mysql_query("SELECT count(w_p_id) cnt FROM wishlist WHERE w_m_id = '$addmemberid' AND w_p_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        mysql_query("DELETE FROM wishlist WHERE w_p_id = '$addproductid' AND w_m_id = '$addmemberid'") or die(mysql_error()); // If product has already added to wishlist then remove from Database
    } else {
        mysql_query("INSERT INTO wishlist SET w_p_id = '$addproductid', w_m_id = '$addmemberid'") or die(mysql_error()); // If product has not in wishlist then add to Database
    }
}
?>

Upvotes: 0

Views: 6320

Answers (2)

user7102782
user7102782

Reputation: 1

$(".addtowishlist").live('click', function(evt) {

Change this to

$(".addtowishlist").on('click', function(evt) {

Upvotes: 0

M.G
M.G

Reputation: 1123

Add a class to your heart icon. 

<i class='fa fa-heart whishstate'>

Change your addtowishlist.php to something like that:

<?php
session_start();
include 'connect.php';

if(isset($_POST['product_id'])) {  
    $addmemberid = $_SESSION['member_id'];
    $addproductid = $_POST['product_id'];

    $result = mysql_query("SELECT count(w_p_id) cnt FROM wishlist WHERE w_m_id = '$addmemberid' AND w_p_id = '$addproductid'") or die(mysql_error());
    $countid = mysql_fetch_assoc($result);
    if($countid['cnt'] == 1){
        mysql_query("DELETE FROM wishlist WHERE w_p_id = '$addproductid' AND w_m_id = '$addmemberid'") or die(mysql_error()); // If product has already added to wishlist then remove from Database
        echo '0';
    } else {
        mysql_query("INSERT INTO wishlist SET w_p_id = '$addproductid', w_m_id = '$addmemberid'") or die(mysql_error()); // If product has not in wishlist then add to Database
         echo '1';
    }
}
?>

Then in change your ajax call to something like that:

<script type="text/javascript">
$(document).ready(function(){
    $(".addtowishlist").live('click', function(evt) {
       var link_data = $(this).data('data');
       $.ajax({
          type: "POST",
          url: 'addtowishlist.php',
          data: ({product_id: link_data}),
          success: function(data) {
               if(data == '1')
               {
                  $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"red"})
               }
               else{
                   $('a[data-data="' + link_data + '"] > i.whishstate').css({"color":"red"})
               }
          }   
       });   
    }); 
});
</script>

Upvotes: 1

Related Questions