用两个jquery.post响应更新两个元素
页面上有两个列表:“购买”和“最近购买”。每个列表可以包含项目。单击某个项目后,该项目应该从原始列表中删除并插入到另一个列表中。 它适用于某些项目,但有时我必须单击两次才能移动项目。我假设我的makeactive和makeinactive函数有问题,但是您建议用什么方法来修复它呢 home.html用两个jquery.post响应更新两个元素,jquery,django,Jquery,Django,页面上有两个列表:“购买”和“最近购买”。每个列表可以包含项目。单击某个项目后,该项目应该从原始列表中删除并插入到另一个列表中。 它适用于某些项目,但有时我必须单击两次才能移动项目。我假设我的makeactive和makeinactive函数有问题,但是您建议用什么方法来修复它呢 home.html <h3>To buy:</h3> {% csrf_token %} <ul id="only_active"> {% for item in active %}
<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>
{% for item in inactive %}
<li id='{{ item.id }}' class="inactive">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
{% for item in active %}
<li id='{{ item.id }}' class="active">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
url.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'),
]
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})
仅_inactive.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>
{% for item in inactive %}
<li id='{{ item.id }}' class="inactive">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
{% for item in active %}
<li id='{{ item.id }}' class="active">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
{%用于非活动%中的项目]
{{{item.name}},id:{{item.id}
{%endfor%}
仅\u active.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>
{% for item in inactive %}
<li id='{{ item.id }}' class="inactive">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
{% for item in active %}
<li id='{{ item.id }}' class="active">{{ item.name }}, id: {{ item.id }}</li>
{% endfor %}
{%用于活动%中的项目]
{{{item.name}},id:{{item.id}
{%endfor%}
下面的代码修复了该问题。我不完全确定,但可能是由于我引入的延迟(setTimeout)。
myjs.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);
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);
下面的代码修复了这个问题。我不完全确定,但可能是由于我引入的延迟(setTimeout)。 myjs.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);
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);