Я пытаюсь отредактировать существующую форму на своем сайте и сохранить изменения с помощью Javascript (без обновления страницы). Я тоже использую Django.
До сих пор, когда пользователь щелкает "изменить" на странице, появляется соответствующая форма, показывающая уже сохраненную там информацию. Но когда я нажимаю «сохранить», я получаю ошибку 404. Проблема заключается в функции Javascript edit_post. Я не уверен, правильно ли я использовал stringify, я новичок в использовании Javascript с Django. Приветствуется любая помощь.
function edit_handeler(element) {
id = element.getAttribute("data-id");
document.querySelector(`#post-edit-${id}`).style.display = "block";
document.querySelector(`#post-content-${id}`).style.display = "none";
// everything above this works and opens up the form for editing
edit_btn = document.querySelector(`#edit-btn-${id}`);
edit_btn.textContent = "Save";
edit_btn.setAttribute("class", "text-success edit");
if (edit_btn.textContent == "Save") {
edit_post(id, document.querySelector(`#post-edit-${id}`).value); //here
edit_btn.textContent = "Edit";
edit_btn.setAttribute("class", "text-primary edit");
}}
function edit_post(id, post) {
const body = document.querySelector(`#post-content-${id}`).value;
fetch("/edit_post/", {
method: "POST",
body: JSON.stringify({
body:body
})
}).then((res) => {
document.querySelector(`#post-content-${id}`).textContent = post;
document.querySelector(`#post-content-${id}`).style.display = "block";
document.querySelector(`#post-edit-${id}`).style.display = "none";
document.querySelector(`#post-edit-${id}`).value = post.trim();
});
}
Соответствующий html - это внутри карточки, для самого поста в html файле:
<span id="post-content-{{i.id}}" class="post">{{i.text}}</span> <br>
<textarea data-id="{{i.id}}" id="post-edit-{{i.id}}"
style="display:none;" class="form-control textarea" row="3">{{i.text}}</textarea>
<button class="btn-btn primary" data-id="{{i.id}}" id="edit-btn-{{i.id}}"
onclick="edit_handeler(this)" >Edit</button> <br><br>
views.py
def edit_post(request, pk):
post = Post.objects.get(id=pk)
form = PostForm(instance=post)
if request.method == "POST":
form = PostForm(request.POST, instance=post)
if form.is_valid():
form.save()
return JsonResponse({}, status=201) # this works to edit and save to db
else:
if request.method == "GET":
form = PostForm(instance=post)
form_for_post = {'form': PostForm()}
return render(request, "network/make_post.html", {
"post": post,
"form_for_post": form,
})
urls.py (релевантные)
path('edit_post/<str:pk>/', views.edit_post, name="edit_post"),
path('edit_post/', views.edit_post),
path("profile/<str:username>", views.profile, name="profile"),
Спасибо! Я думаю, это URL. Когда я вставляю localhost:8000/edit_post (со вставленным моим портом) в свою выборку, я получаю 500 внутренних ошибок сервера. Поэтому, когда я перехожу к этому фактическому URL-адресу в своей адресной строке, я получаю сообщение об ошибке TypeError в /edit_post/edit_post(), в котором отсутствует 1 обязательный позиционный аргумент: «pk», но я не могу понять, почему. Нужно ли мне передавать pk в мой файл javascript или что-то в этом роде? Если я добавлю pk в функцию js, как это, она все равно выдает 500 внутренних ошибок сервера: функция edit_post (id, post, pk)