title: Gmail Star like Bookmarking using jQuery
body: <p>I am trying to create a star like bookmarking using jQuery. Unfortunately what I have is only working one way. That means if a link is unstarred then it stars it successfully but if a link is already starred and I want to unstar it then the star image disappears completely from the page, however in the back end it does work but in the front end the star image goes off completely.</p>
  
  <p>I have the following in my HTML:</p>
  
  <pre><code>require_once('connection.inc.php');
  $con = dbConnect('read');
  $sql = "SELECT * FROM trn_bookmark";
  $result = $con-&gt;query($sql) or die(mysqli_error());
  while($row = $result-&gt;fetch_assoc()) {
      $className  = "star";
      if($row['bookmark_flag'] == 'Y'){
          $className = "favorited";
      }
      echo '&lt;div id="'.$row['bookmark_id'].'"&gt;&lt;a href="javascript:void(0);" class="'.$className.'"&gt;&lt;/a&gt; &lt;span&gt;'.$row['bookmark_desc'].'&lt;/span&gt;&lt;/div&gt;';
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.star {
  background-color: transparent;
  background-image: url('star-off.png');
  background-repeat:no-repeat;
  display: block;  
  height:16px;
  width:16px;
  float:left;
  }
  .favorited {
   text-indent: -5000px;
  background-color: transparent;
  background-image: url('star-on.png');
  background-repeat:no-repeat;   
  height:16px;
  width:16px;
  float:left;
  }
  </code></pre>
  
  <p>The JavaScript function is this:</p>
  
  <pre><code>$(document).ready(function(){   
   $('.star,.favorited').click(function() {
          var id = $(this).parents('div').attr('id');             
          var className = $(this).attr('class');
          var flag  = (className=='star') ? 'Y':'N';
          var $this = $(this);
          $.ajax({
                  type: "post",
                  url: "conversation.php",
                  cache: false,               
                  data:{'bookmarkId': id,'flag':flag},
                  success: function(response){
                      if(response=='true'){                               
                          $this.toggleClass("favorited");
                      }   
                  },
                  error: function(){                      
                      alert('Error while request..');
                  }
               });
    });
  });
  </code></pre>
  
  <p>And the conversation.php:</p>
  
  <pre><code>$bookmarkId = $_POST['bookmarkId'];
  $flag = $_POST['flag'];
  require_once('connection.inc.php');
  $con = dbConnect('read');
  $stmt = $con-&gt;stmt_init();
  $sql = "UPDATE trn_bookmark SET bookmark_flag = ? WHERE bookmark_id = '$bookmarkId'";
      if ($stmt-&gt;prepare($sql)) {
          $stmt-&gt;bind_param('s', $flag);
          $done = $stmt-&gt;execute();
      }
  
      echo 'true';
  </code></pre>
  
  <p>I have uploaded it so that you can see what is happening live. You can see what is happening here in this link: <a href="http://www.rytenet.com/starrating/index.php" rel="nofollow">http://www.rytenet.com/starrating/index.php</a></p>