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

时间:2015-01-16 15:59:15

标签: javascript php jquery html twitter-bootstrap

我正在使用自定义mvc框架并添加了favourite按钮。按下此按钮后,会显示“已成功添加到收藏夹div,再次点击时会显示“已成功从收藏夹移除div。< / p>

我的查询工作正常,可以在我的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;
            }        
        }
}

1 个答案:

答案 0 :(得分: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;