Можете ли вы заставить sortable.js работать с модальным режимом начальной загрузки 5? ⇐ Javascript

[Anonymous]

Я создаю приложение с контрольным списком для развлечения и пытаюсь использовать sortable.js с Python django.
В этом примере я могу заставить работать сортируемый список с помощью 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