提交后更改按钮 - jquery,django

Question

我有一个ajax"跟随"按钮.它工作正常,提交后按钮的属性disabled变为"disabled".但是我想在提交之后将"关注"按钮更改为"取消关注"按钮,就像在Twitter中一样.这该怎么做？我尝试更改按钮的属性"表单"以提交另一个表单:

success:function(){
                $button.attr('form','unfollow');

但不幸的是它不起作用.

模板event.html:

   {% if user in event.users.all %}
            <form id="unfollow">
            {% csrf_token %}
            <input type="hidden" value="{{ event.id }}" name="remove">
            <button type="submit" class="btn btn-warning btn-block">{% trans "Unfollow"%}</button>
            </form>
    {% else %}
            <form id="follow">
            {% csrf_token %}
            <input type="hidden" value="{{ event.id }}" name="add">
            <button type="submit" class="btn btn-primary btn-block">{% trans "Follow"%}</button>
            </form>
    {% endif %}

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script type="text/javascript">

    $(document).on('submit','#unfollow', function(e){
        var $button = $(this).find('button');
        e.preventDefault();
        $.ajax({
            url:'/event/{{ event.id }}/',
            data: "remove={{ event.id }}",
            success:function(){
                $button.attr('disabled', 'disabled').text('{% trans "Unfollowed" %}');
            }
        })
    });

    $(document).on('submit','#follow', function(e){
        var $button = $(this).find('button');
        e.preventDefault();
        $.ajax({
            url:'/event/{{ event.id }}/',
            data: "add={{ event.id }}",
            success:function(){
                 $button.attr('disabled', 'disabled').text('{% trans "Followed" %}');
            }
        })
    });

</script>

views.py

user = request.user
if request.GET.get('add'):
    event.users.add(user)
    event.save()
if request.GET.get('remove'):
    event.users.remove(user)
    event.save()

Answer 1

这里的一个主要问题是你有两个端点(跟随/取消关注),用于非常相似的治疗.

首先,为了简化所有事情,您可以拥有一个仅切换状态的端点(从跟随到取消关注,反之亦然).多亏了这一点,您只能使用单一表单发送活动ID .

我根本不是一个蟒蛇人,但一切都应该是这样的:

views.py

user = request.user
if request.GET.get('eventId'):
    # if the user is in event.users, then remove it, otherwise, add it (sorry I don't know the Python syntax here, but it is quite a simple condition).
    # The algorithm would be like this:
    # isFollowing = user in event.users
    # if (isFollowing) then event.users.remove(user)
    #     else event.users.add(user)
    event.save()
    # Next, return JSON (see how to do it with Django):
    # return {"following": !isFollowing}

template.html

<form class="formFollowEvent"> <!-- Based on a class and not an ID, in case you want to have multiple follow / unfollow buttons on a same page, even for different events -->
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="eventId">
    <button type="submit" class="btn btn-warning btn-block">
        {% if user in event.users.all %}
            {% trans "Unfollow" %}
        {% else %}
            {% trans "Follow" %}
        {% endif %} <!-- There should be something better with your template engine to handle the follow / unfollow translation -->
    </button>
</form>

JS

$('.formFollowEvent').on('submit', function(e) {
    e.preventDefault();

    var $this = $(this);
    var $button = $this.find('button[type="submit"]');
    var eventId = $this.find('input[name="eventId"]').val();

    $.ajax({
        url:'/switchStatus',
        data: {
            eventId: eventId
        },
        success:function(data){
             $button.text((!!data.following) ? {% trans "Unfollow"%} : {% trans "Follow"%});
        }
    })
});

这是一个jsFiddle来说明我所说的:https://jsfiddle.net/1u39dhjh/

注意:您应该检查如何通过Ajang与Django正确发送表单,因为您不在此处发送csrf令牌.

希望我的回答可以帮到你.