В этом примере я могу заставить работать сортируемый список с помощью html. следующим образом
Код: Выделить всё
{% extends 'BJJApp/base.html' %}
{% load static %}
{%load crispy_forms_tags %}
{% block content %}
{% for item, formset, links in standalone_items_formsets_links %}
{{ item.title }}
{% csrf_token %}
Title
Memo
{{ item.memo }}
Important
{% if links %}
[list]
{% for link in links %}
[*][url={{ link.url }}]{{ link.url|urlizetrunc:50 }}[/url]
{% endfor %}
[/list]
{% else %}
No links available for this item.
{% endif %}
[url={% url ]
Add or Remove Links
[/url]
Edit
{% if item.datecompleted is None %}
{% csrf_token %}
Complete
{% endif %}
{% if item.datecompleted %}
{% csrf_token %}
UnComplete
{% endif %}
{% csrf_token %}
Delete
{{ forloop.counter }}. {{ item.title }}
{{ item.memo }}
Details
{% if item.datecompleted is None %}
{% csrf_token %}
Complete
{% endif %}
{% if item.datecompleted %}
{% csrf_token %}
UnComplete
{% endif %}
{% csrf_token %}
Delete
{% endfor %}
{% endblock %}
{% block scripts %}
document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('standalone-items-container');
const csrfToken = '{{ csrf_token }}'; // CSRF token for secure POST requests
Sortable.create(container, {
animation: 150, // Smooth animation while dragging
onEnd: function (event) {
// Get the updated order of item IDs
const updatedOrder = Array.from(container.children).map((card, index) => {
// Update the displayed order on the card
const titleElement = card.querySelector('.card-title');
titleElement.textContent = `${index + 1}. ${titleElement.textContent.split('. ').slice(1).join('. ')}`;
return card.dataset.itemId;
});
// Send the updated order to the backend
fetch("{% url 'update_item_order' %}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken, // CSRF token for Django
},
body: JSON.stringify({ order: updatedOrder }),
})
.then(response => {
if (!response.ok) {
throw new Error("Failed to update order.");
}
return response.json();
})
.then(data => {
console.log("Order updated:", data);
})
.catch(error => {
console.error("Error updating order:", error);
});
},
});
});
{% endblock %}
Код: Выделить всё
def test5(request):
items = Item.objects.filter(user=request.user, datecompleted__isnull=True)
if request.user.profile.role == "instructor":
courses = request.user.checklist_courses.filter(related_course__isnull=False)
else:
courses = request.user.checklist_courses.exclude(
creator__profile__role="instructor"
)
courses_percentages = []
standalone_items_formsets_links = []
course_items_formsets_links = []
standalone_items = items.filter(courses__isnull=True).order_by("order")
course_items = items.filter(courses__isnull=False)
for item in standalone_items:
LanguageFormSet = inlineformset_factory(Item, Link, fields=("url",), extra=1)
formset = LanguageFormSet(instance=item)
links = Link.objects.filter(item=item)
standalone_items_formsets_links.append((item, formset, links))
for item in course_items:
LanguageFormSet = inlineformset_factory(Item, Link, fields=("url",), extra=1)
formset = LanguageFormSet(instance=item)
links = Link.objects.filter(item=item)
course_items_formsets_links.append((item, formset, links))
for course in courses:
total_items = course.items.count()
completed_items = course.items.filter(datecompleted__isnull=False).count()
# Avoid division by zero
if total_items > 0:
progress_percentage = (completed_items / total_items) * 100
else:
progress_percentage = 0
courses_percentages.append((course, progress_percentage))
return render(
request,
"BJJApp/test5.html",
{
"standalone_items": standalone_items,
"courses_percentages": courses_percentages,
"standalone_items_formsets_links": standalone_items_formsets_links,
"course_items_formsets_links": course_items_formsets_links,
},
)
def update_item_order(request):
if request.method == "POST":
try:
data = json.loads(request.body)
item_ids = data.get("order", [])
# Update the order field for each item
for idx, item_id in enumerate(item_ids, start=1):
Item.objects.filter(id=item_id).update(order=idx)
return JsonResponse({"success": True})
except Exception as e:
return JsonResponse({"success": False, "error": str(e)}, status=400)
return JsonResponse(
{"success": False, "error": "Invalid request method."}, status=405
)
но когда Меняю его на модальный, он не работает и не обновляется. Кто-нибудь может помочь?
Код: Выделить всё
{% extends 'BJJApp/base.html' %}
{% load static %}
{%load crispy_forms_tags %}
{% block content %}
{% for item, formset, links in standalone_items_formsets_links %}
{{ item.title }}
{% csrf_token %}
Title
Memo
{{ item.memo }}
Important
{% if links %}
[list]
{% for link in links %}
[*][url={{ link.url }}]{{ link.url|urlizetrunc:50 }}[/url]
{% endfor %}
[/list]
{% else %}
No links available for this item.
{% endif %}
[url={% url ]
Add or Remove Links
[/url]
Edit
{% if item.datecompleted is None %}
{% csrf_token %}
Complete
{% endif %}
{% if item.datecompleted %}
{% csrf_token %}
UnComplete
{% endif %}
{% csrf_token %}
Delete
{{ forloop.counter }}. {{ item.title }}
{{ item.memo }}
Details
{% if item.datecompleted is None %}
{% csrf_token %}
Complete
{% endif %}
{% if item.datecompleted %}
{% csrf_token %}
UnComplete
{% endif %}
{% csrf_token %}
Delete
{% endfor %}
{% endblock %}
{% block scripts %}
document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('standalone-items-container');
const csrfToken = '{{ csrf_token }}'; // CSRF token for secure POST requests
Sortable.create(container, {
animation: 150, // Smooth animation while dragging
onEnd: function (event) {
// Get the updated order of item IDs
const updatedOrder = Array.from(container.children).map((card, index) => {
// Update the displayed order on the card
const titleElement = card.querySelector('.card-title');
titleElement.textContent = `${index + 1}. ${titleElement.textContent.split('. ').slice(1).join('. ')}`;
return card.dataset.itemId;
});
// Send the updated order to the backend
fetch("{% url 'update_item_order' %}", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-CSRFToken": csrfToken, // CSRF token for Django
},
body: JSON.stringify({ order: updatedOrder }),
})
.then(response => {
if (!response.ok) {
throw new Error("Failed to update order.");
}
return response.json();
})
.then(data => {
console.log("Order updated:", data);
})
.catch(error => {
console.error("Error updating order:", error);
});
},
});
});
{% endblock %}
Подробнее здесь: https://stackoverflow.com/questions/793 ... ap-5-modal
