Jquery upvote插件禁止访问者投票

时间:2017-11-17 19:02:55

标签: jquery python flask jquery-plugins

我想禁用对访问者的投票或回滚到之前的状态。

要实现这一点,我想将userid传递给jquery upvote插件。如果我向<div id="comment-1">添加一个具有类名userid的链接元素,我应该能够将userid变量传递给Jquery upvote插件。但这次它打破了网站设计。

我的第二种方法是添加点击事件。但我认为它被召唤两次。

将用户定义的变量传递给jquery upvote插件的正确方法是什么。

我想做的是禁止匿名用户在帖子中投票,如SO。

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/upvote@1.1.1/lib/jquery.upvote.css">
    </head>
    <body>
        <div id="comment-1" class="upvote">
            <a class="upvote" title="This idea is helpful"></a>
            <span class="count">5</span>
            <a class="downvote"></a>
            <a class="star starred"></a>
        </div>

        <div id="message"></div>

这是javascript部分。

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
        <script src="https://cdn.jsdelivr.net/npm/upvote@1.1.1/lib/jquery.upvote.js"></script>
        <script>

         $(function() {
             var userid = 0;
             var visitor = "{{ visitor }}";
             var callback = function(data) {
                 $.post({
                     url: '/vote',
                     data: JSON.stringify({ id: data.id, up: data.upvoted, userid: userid,
                                            down: data.downvoted, count: data.count, star: data.starred }),
                     contentType: "application/json",
                     success: function(response) {

                         if (response == 'visitor') {
                             alert("You should register to vote posts")
                         }
                         console.log(response);

                     }
                 });
             };

             $('#comment-1').upvote({id: 1, callback: callback});

             if (visitor) {
                 alert("You should register to vote on posts");
             }


         });

        </script>
    </body>
</html>

voting.py

from flask import Flask, render_template, request, url_for, jsonify

app = Flask(__name__)


@app.route('/')
def index():
    return render_template('voting.html')

@app.route('/vote', methods=['POST'])
def vote():
    data = request.get_json()
    result = str(data)
    print("userid", data['userid'])
    if (data['userid'] == 0):
        return ('visitor')

    print (result)
    return result


if __name__ == "__main__":
    app.run(debug=True)

https://jsfiddle.net/54ytp9ee/

更新:尽管 downvoters 我应该能够找到解决方案。现在它按预期工作。

1 个答案:

答案 0 :(得分:0)

尽管 downvoters 我应该能够找到解决方案。这是一个有效的解决方案。

voting.html

stack ghc test.hs

javascript部分:

<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/upvote@1.1.1/lib/jquery.upvote.css">
    </head>
    <body>
        <div id="comment-1" class="upvote">
            <a class="upvote" title="I like this idea"></a>
            <span class="count">5</span>
            <a class="downvote"></a>
            <a class="star starred"></a>
        </div>

        <div id="message"></div>

voting.py

        <script src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
        <script src="https://cdn.jsdelivr.net/npm/upvote@1.1.1/lib/jquery.upvote.js"></script>
        <script>

         $(function() {
             var userid = 0;                
             var callback = function(data) {
                 $.post({
                     url: '/vote',
                     data: JSON.stringify({ id : data.id, up: data.upvoted, userid: userid,
                                            down : data.downvoted, count : data.count, star : data.starred }),
                     contentType: "application/json",

                     success: function(response) {

                         console.log('Response ', response);

                         if (response.visitor) {

                             alert ('Please log in to vote');
                             var counter = response.count;
                             $('#comment-1').upvote({count: counter, upvoted: 0, downvoted:0, starred: 0, id: 1, callback: callback});
                             location.reload();
                         }
                     }
                 });
             };

             $('#comment-1').upvote({id: 1, callback: callback});

         });

        </script>
    </body>
</html>