使用两个jquery .post响应更新两个元素

Question

页面上有两个列表：'要买'和'最近买'。每个列表都可以包含项目。单击某个项目后，该项目应从原始列表中删除并插入到另一个列表中。 它适用于某些项目，但有时我必须单击两次才能移动项目。我认为我的 makeactive 和 makeinactive 功能有问题，但您建议修改它的内容和方式是什么？

home.html的

<h3>To buy:</h3>
{% csrf_token %}
<ul id="only_active">
{% for item in active %}
    <li id='{{ item.id }}' class="active">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
</ul>

<h3>Recently bought:</h3>
<ul id='recently_bought'>
{% for item in inactive %}
    <li id='{{ item.id }}' class="inactive">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
</ul>

JS

function makeinactive(){
    // changes item from active to inactive (item.active=True into False)
    id = this.id;
    console.log(id);
    var data = {'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()};
    URL =  id + '/switch/'
    $.post(URL, data, function(response){
        $('#recently_bought').html(response);
    });

    // updates the list of active items
    URL =  '/only_active/'
    $.post(URL, data, function(response){
        $('#only_active').html(response);
    });
}

function makeactive(){
    // changes item from inactive to active (item.active=False into True)
    id = this.id;
    console.log(id);
    var data = {'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()};
    URL =  id + '/switch2/'
    $.post(URL, data, function(response){
        $('#only_active').html(response);
    });

    // updates the list of recently bought items
    URL =  '/only_inactive/'
    $.post(URL, data, function(response){
        $('#recently_bought').html(response);
    });
}

$(document).on('click', '.active',  makeinactive);
$(document).on('click', '.inactive',  makeactive);

urls.py

urlpatterns = [
    url(r'^$', views.home, name='home'),
    url(r'^(?P<pk>[0-9]+)/switch/$', views.switch, name='switch'),
    url(r'^only_active/$', views.only_active, name='only_active'),
    url(r'^(?P<pk>[0-9]+)/switch2/$', views.switch2, name='switch2'),
    url(r'^only_inactive/$', views.only_inactive, name='only_inactive'),
]

views.py

def home(request):
    active = Item.objects.filter(active=True)
    inactive = Item.objects.filter(active=False)
    context = {'active': active, 'inactive': inactive}
    return render(request, 'tobuy/home.html', context)

def switch(request, pk=None):
    item = Item.objects.get(pk=pk)
    item.active = False
    item.save()
    inactive = Item.objects.filter(active=False)
    return render(request, 'tobuy/only_inactive.html', {'inactive': inactive})

def only_active(request):
    active = Item.objects.filter(active=True)
    return render(request, 'tobuy/only_active.html', {'active': active})

def switch2(request, pk=None):
    item = Item.objects.get(pk=pk)
    item.active = True
    item.save()
    active = Item.objects.filter(active=True)
    return render(request, 'tobuy/only_active.html', {'active': active})

def only_inactive(request):
    inactive = Item.objects.filter(active=False)
    return render(request, 'tobuy/only_inactive.html', {'inactive': inactive})

only_inactive.html

{% for item in inactive %}
    <li id='{{ item.id }}' class="inactive">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}

only_active.html

{% for item in active %}
    <li id='{{ item.id }}' class="active">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}

Answer 1

以下代码可解决此问题。我不完全确定，但可能是由于我引入的延迟（setTimeout）。 的 myjs.js

function fill_recently_bought(data, textStatus, jgXHR)
{
   $('#recently_bought').html(data);
}

function fill_active(data, textStatus, jgXHR)
{
   $('#only_active').html(data);
}

function makeinactive()
{
    $(this).css('background-color', 'yellow').delay(500).hide(500);

    // changes item from active to inactive (item.active=True into False)
    $.ajax({
                type: "POST",
                url: this.id + '/switch/',
                data: {
                    'pk':  this.id,
                    'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                },
                success: fill_recently_bought,
                dataType: 'html'
            });

    // updates the list of active items

    setTimeout(function(){ 
        $.ajax({
                type: "POST",
                url: '/only_active/',
                data: {
                    'pk':  this.id,
                    'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                },
                success: fill_active,
                dataType: 'html'
            });
    }, 1000);
}


function makeactive()
{
    $(this).css('background-color', 'yellow').delay(500).hide(500);

    // changes item from inactive to active (item.active=False into True)
    $.ajax({
                type: "POST",
                url: this.id + '/switch2/',
                data: {
                    'pk':  this.id,
                    'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                },
                success: fill_active,
                dataType: 'html'
            });

    // updates the list of active items

    setTimeout(function(){ 
        $.ajax({
                type: "POST",
                url: '/only_inactive/',
                data: {
                    'pk':  this.id,
                    'csrfmiddlewaretoken': $('input[name=csrfmiddlewaretoken]').val()
                },
                success: fill_recently_bought,
                dataType: 'html'
            });
    }, 1000);
}


function show_lists() {
    $('#lists').toggleClass('hidden');
}

// function formsubmit() {
//     alert('submituje2');
// }

$(document).on('click', '.active',  makeinactive);
$(document).on('click', '.inactive',  makeactive);
$(document).on('click', '#select_list',  show_lists);
// $(document).on('submit', '#new_user_form',  formsubmit);