如何在刷新页面(AJAX)上保持我的位置

时间:2015-01-20 08:44:59

标签: javascript php jquery html ajax

我知道这只适用于AJAX,但我从未使用过AJAX ...在我的网站上你可以保存一张你从游戏Magic获得的牌的清单,这是相当的清单。您必须按一个按钮才能添加一张卡片,每张卡片都有此按钮,当您添加它时,它会将卡片添加到您的列表中然后刷新并再次位于页面顶部。我怎样才能保持它的地位?

在红色方块内,您可以按添加或删除:http://prntscr.com/5uq6ak

Functions.php(我只会显示2个功能,删除和添加卡片)

//Add card to collection
function addCardToCollection($conn, $userID, $cardID){
//Checks if the cards is already added for this user
    $queryGetCard = 'SELECT user_id, card_id FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    $checkCollection = $conn->query($queryGetCard);
    if($checkCollection->fetch_assoc() > 0){return 'Deze kaart hebt u al.';}

//Adds card to the database
    $queryAddCard = 'INSERT INTO collection (user_id, card_id) VALUES ('.$userID.','.$cardID.')';
    if($conn->query($queryAddCard)){return 'Kaart toegevoegd.';}
    else{return 'Kaart niet toegevoegd.';}
}

//Remove card from collection
function removeCardFromCollection($conn, $userID, $cardID){
//Checks if the cards is in the collection
    $queryGetCard = 'SELECT user_id, card_id FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    $checkCollection = $conn->query($queryGetCard);
    if($checkCollection->fetch_assoc() == 0){return 'Deze kaart hebt u nog niet.';}

//Remove card from the database
    $queryAddCard = 'DELETE FROM collection WHERE user_id = '.$userID.' AND card_id = '.$cardID;
    if($conn->query($queryAddCard)){return 'Kaart verwijderd uit uw collectie.';}
    else{return 'Kaart niet verwijderd uit uw collectie.';}
}

Set.php(添加和删除按钮)

if(login_check($mysqli) == true) {
    $cardsHTML.='<br><b>Deze kaart heb ik...
    <a href="' . $baseURL . 'set.php?id=' . $_GET['id'] . '&cardID=' . $value['id'] . '&collection=add">
        <div class="glyphicon glyphicon-ok green"></div>
    </a> |
    <a href="' . $baseURL . 'set.php?id=' . $_GET['id'] . '&cardID=' . $value['id'] . '&collection=remove">
        <div class="glyphicon glyphicon-remove red"></div>
    </a>
    </b>';
}

2 个答案:

答案 0 :(得分:0)

您是否考虑过使用JS来做这件事?

注意:这需要JQuery插件,你可以从中获得许多CDN,谷歌是最可靠的Here

之一
$(document).ready(function(){
    var storePosition = {     /// initializing the storeposition
        topCoordinate : null
    }


     storePosition.topCoordinate =  $(this).offset().top;   /// storing the position


    if(storePosition.topCoordinate !== 0){   // if we are at the top no point doing anything

     $("html, body").animate({"scrollTop":  storePosition.topCoordinate}, 500);


        }
});

This question提供

也只是一个注释...请停止使用非参数化查询。考虑使用MySQLi作为它不是MySql语法的一步,并将为您提供一些面向对象编程的良好实践。

答案 1 :(得分:0)

在插入期间添加带时间戳的列。 并获取时间戳的数据升序。 显示卡。它不会改变。