Check/Set 页面加载时的按钮状态

Question

我正在使用自定义 mvc 框架并添加了一个 favourite 按钮。按下后显示“已成功添加到收藏夹”div，再次单击时会显示“已成功从收藏夹中删除”div.

我的查询工作正常，从我的 favourite table 中添加和删除它应该的。

我现在想做的是根据选择更改按钮的状态。例如，如果用户拥有收藏夹中的图书，则添加 btn-success class，如果用户没有 , 使用 btn-default class.

我不确定处理此问题的最佳方法。我是 php 和 js 的新手，因此欢迎任何建议或指导。我尝试将 toggleClass 添加到我的 JS，但它不起作用。我需要在 pageLoad 上执行 query/check 吗？

我在下面包含了我的代码以供参考。

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;

Check/Set 页面加载时的按钮状态

Check/Set button status on page load

html

javascript

php

jquery

twitter-bootstrap