检查/设置页面加载时的按钮状态

Question

I am using a custom mvc framework and have added a favourite button. Once pressed this displays a 'successfully added to favourites' div, when clicked again it displays a 'successfully removed from favourites' div.

My query works fine, adding and deleting from my favourite table as it should.

What I would like to do now is change the state of the button depending on the selection. For example, if the user has the book in their favourites add btn-success class, if the user hasn't, use the btn-default class.

I'm not sure the best way to approach this. I'm new to php and js so any advice or direction is appreciated. I have tried adding toggleClass to my JS but it's not working. Do I need to perform a query/check on pageLoad?

I have included my code below for reference.

itemView.php

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

JS (in 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   
    });
});

my checkFav function

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;