Aktualisieren Sie zwei Elemente mit zwei jquery .post Antworten

Question

Es gibt zwei Listen auf der Seite: "Kaufen" und "Kürzlich gekauft". Jede Liste kann Elemente enthalten. Nach einem Klick auf ein Objekt soll das Objekt aus der ursprünglichen Liste entfernt und in die andere Liste eingefügt werden. Es funktioniert für einige Gegenstände, aber manchmal muss ich zweimal klicken, um den Gegenstand zu bewegen. Ich nehme an, es ist etwas falsch mit meinem makeactive und makeinactive Funktionen aber was und wie würden Sie empfehlen, es zu beheben?

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'), 
] 

v iews.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

Der Code unten beheben das Problem. Ich bin mir nicht ganz sicher, aber wahrscheinlich wegen Verzögerungen, die ich eingeführt habe (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);