加載頁面時檢查/設置按鈕狀態

Question

我正在使用自定義mvc框架並添加了一個favourite按鈕。一旦按下這個顯示'成功添加到收藏夾'div，當再次點擊時，它顯示'成功刪除收藏夾'div。

我的查詢工作正常，添加和從我的favourite表刪除，因爲它應該。

我現在想要做的是根據選擇改變按鈕的狀態。例如，如果用戶已將的書中其收藏夾添加btn-success類，如果用戶還沒有，請使用btn-default類。

我不知道最好的方法來解決這個問題。我是新來的PHP和JS所以任何意見或方向表示讚賞。我曾嘗試添加toggleClass到我的JS，但它不工作。我需要在pageLoad上執行查詢/檢查嗎？

我已將下面的代碼包含在內以供參考。

itemView.php

echo 
'<td> 
<button id="fav" value="'.$book->id.'" type="button" class="btn btn-default"></button> 
</td>'; 

JS（在itemView.php）

$(document).ready(function(){ 
    $("#fav").click(function(){  
    book_id = $(fav).val(); 
    $.ajax({ 
     type: 'POST', 
     url: '<?php echo URL; ?>books/checkFav', 
     data: {book_id:book_id}, 
     success: function() { 
      window.location.reload(true); 
      $("#fav").addClass("btn-success"); 
      }//end success   
     });//end ajax 
    }); 
}); 

我checkFav功能

public function checkFav($bookid,$userid) 
{ 
$bookid=$_REQUEST['book_id']; 
$userid=$_SESSION['user_id']; 

$sql = "SELECT * FROM favourite WHERE book_id = :book_id AND user_id = :user_id"; 
$query = $this->db->prepare($sql); 
$query->bindParam(':user_id', $userid); 
$query->bindParam(':book_id', $bookid); 
$query->execute(); 
$rows_found = $query->fetchColumn(); 

    if(empty($rows_found)) { 
     $sql = "INSERT INTO favourite (book_id, user_id) VALUES (:book_id, :user_id)"; 
     $query = $this->db->prepare($sql); 
     $query->bindParam(':user_id', $userid); 
     $query->bindParam(':book_id', $bookid); 
     $query->execute(); 

     if ($query->rowCount() == 1) { 
      // successful add to favs 
      $_SESSION["feedback_positive"][] = FEEDBACK_ADDED_TO_FAVS; 
      return true; 
     } 

     } else { 
     $sql = "DELETE FROM favourite WHERE book_id = :book_id AND user_id = :user_id"; 
     $query = $this->db->prepare($sql); 
     $query->bindParam(':user_id', $userid); 
     $query->bindParam(':book_id', $bookid); 
     $query->execute(); 

     if ($query->rowCount() > 0) { 
      // successful remove from favs 
      $_SESSION["feedback_negative"][] = FEEDBACK_REMOVED_FROM_FAVS; 
      return true; 
      }   
     } 
} 

Answer 1

Use session variable in the ajax request script and using that session variable in page where button exist you can play with button css. for example: 
Put this code where Button exists. 
$css = "btn_default"; 
if($_SESSION['btnClicked'] == "success") { 
    $css = "btn_success"; 
} 
Use $css variable in the button class like-- 
<button id="fav" value="'.$book->id.'" type="button" class="btn <?php echo $css?>"></button> 
This session will manage in the ajax script where in you are adding and deleting favourite. 
set session value 
$_SESSION['btnClicked'] = 'success' 
below the line 
$_SESSION["feedback_positive"][] = FEEDBACK_ADDED_TO_FAVS; 
and unset the session 
unset($_SESSION['btnClicked']); 
after the line. 
$_SESSION["feedback_negative"][] = FEEDBACK_REMOVED_FROM_FAVS;