我如何十个分量上刷新我的页面上的位置（AJAX） [英] How can I mantain my position on the page on refresh (AJAX)

问题描述

我知道，这是唯一可能与AJAX，但我从来没有合作过AJAX ......在我的网站上你可以保留你有从游戏魔法卡的列表，这是一个相当的名单。你必须preSS一个按钮添加一个卡，每张卡都有这个按钮，当你添加它，它会再次卡添加到您的列表，然后刷新，并在页面的顶部。我怎样才能使它它保持它的地位？

里面的红色方块，你可以preSS添加或删除： http://prntscr.com/5uq6ak

functions.php中（我将只显示2个功能，删除和添加卡）

  //添加卡集合
功能addCardToCollection（$康恩，$用户ID，$ cardID）{
//检查该卡已添加该用户
    $ queryGetCard ='​​选择USER_ID，card_id的FROM集合，其中user_ID的='$用户ID。与card_id的='$ cardID。
    $ checkCollection = $ conn-＆GT;查询（$ queryGetCard）;
    如果（$ checkCollection-＆GT; FETCH_ASSOC（）0）{return'的德泽该地图hebtü人';}

//添加卡数据库
    $ queryAddCard ='​​INSERT INTO集合（USER_ID，card_id的）VALUES（'$用户ID，$ cardID。'）;
    如果（$ conn-＆GT;查询（$ queryAddCard））{return'的该地图toegevoegd。';}
    其他{return'的该地图Niet的toegevoegd。';}
}

//从集合中取出卡
功能removeCardFromCollection（$康恩，$用户ID，$ cardID）{
//检查该卡是集合中
    $ queryGetCard ='​​选择USER_ID，card_id的FROM集合，其中user_ID的='$用户ID。与card_id的='$ cardID。
    $ checkCollection = $ conn-＆GT;查询（$ queryGetCard）;
    如果（$ checkCollection-＆GT; FETCH_ASSOC（）== 0）{return'的德泽该地图hebtü蛋奶Niet的。';}

//从数据库中删除卡
    $ queryAddCard ='​​DELETE FROM集合，其中user_ID的='$用户ID。与card_id的='$ cardID。
    如果（$ conn-＆GT;查询（$ queryAddCard））{return'的该地图verwijderd UIT UW collectie。';}
    其他{return'的该地图Niet的verwijderd UIT UW collectie。';}
}
 

Set.php（该用于添加和删除按钮）

 如果（login_check（$ mysqli的）==真）{
    $ cardsHTML ='＆LT; BR＆GT;＆LT; B＆GT;德泽该地图希益...
    ＆LT; A HREF ='。$的baseUrl'？'。$ _ GET set.php ID = ['身份证'。'和; cardID ='[ID'。'和$价值。';集合=加上 ＆GT;
        ＆LT; D​​IV CLASS =glyphicon glyphicon-OK绿色＆GT;＆LT; / DIV＆GT;
    ＆所述; / a取代; |
    ＆LT; A HREF ='。$的baseUrl'？'。$ _ GET set.php ID = ['身份证'。'和; cardID ='[ID'。'和$价值。';集合=去掉 ＆GT;
        ＆LT; D​​IV CLASS =glyphicon glyphicon，祛红＆GT;＆LT; / DIV＆GT;
    ＆所述; / a取代;
    ＆LT; / B＆GT;';
}
 

解决方案

你有没有想过用JS做到这一点？

请注意：这需要jQuery插件，有很多CDN你可以从虽然得到它，与谷歌是最可靠的这里

  $（文件）。就绪（函数（）{
    VAR storePosition = {///初始化storeposition
        topCoordinate：空
    }


     storePosition.topCoordinate = $（本）.offset（）顶部。 ///存储位置


    如果（storePosition.topCoordinate！== 0）{//如果我们在上面没有一点做什么

     $（HTML，机构）动画（{scrollTop的：storePosition.topCoordinate}，500）;


        }
}）;
 

礼貌的<一个href="http://stackoverflow.com/questions/26036776/how-to-save-the-offset-of-current-scroll-position-for-jquery-mobile-page">This问题

也只是一个音符......请停止使用非参数化查询。考虑使用库MySQLi因为它不是太大的一步，从MySQL语法，并会给你有面向对象编程的一些好的做法。

I know that this is only possible with AJAX, but i've never worked with AJAX... On my website you can keep a list of the cards that you have from the game Magic, this is quite the list. You have to press a button to add a card, each card has this button and when you add it, It will add the card to your list then refresh and be at the top of the page again. How can i make it that it keeps it's position?

Inside of the red squares you can press add or remove : http://prntscr.com/5uq6ak

Functions.php (I'll only show 2 functions, remove and add cards)

//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 (The buttons for add and delete)

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>';
}

解决方案

have you thought about using JS to do this?

Note: This requires the JQuery plugin, there are many CDN you can get it from though, with google being one of the most reliable 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);


        }
});

courtesy of This question

Also just a note... PLEASE stop using non parameterized queries. consider using MySQLi as its not much of a step up from MySql syntax and will give you some good practice with object orientated programming.

这篇关于我如何十个分量上刷新我的页面上的位置（AJAX）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！