Контекст: у меня есть таблица в HTML с некоторыми данными для определенного c пользователя. Рядом с каждой строкой есть кнопка удаления и редактирования. Я хочу, чтобы кнопки делали то, что они должны делать в определенной строке. В настоящее время кнопка удаления работает, и я пробовал аналогичный подход для кнопки редактирования, но при нажатии ничего не происходит.
Это часть HTML:
{% for work_entry in work_entries %}
{% if work_entry.date == date.date %}
<form method="POST" id="{{ work_entry.id }}">
{% csrf_token %}
<tr>
{% if work_entry.is_paid == False %}
<td> <button class="delete-button" id="{{ work_entry.id }}" style="background-color: #bb1a1a;"
onclick="return confirm('Please confirm you wish to delete the selected record.')">Delete
</button>
</td>
<td> <button class="edit-button" id="{{ work_entry.id }}" style="background-color: #5dbb1a;"
onclick="return confirm('Please confirm you wish to edit the selected record.')">Update
</button>
</td>
<td>{{ work_entry.project }}</td>
<td><input style="border: none" class="table-input" type="text" id="description-{{ work_entry.id }}"
value="{{ work_entry.description }}"></td>
<td><input type="number" class="table-input" step="0.01" id="hours-{{ work_entry.id }}"
value="{{ work_entry.num_hours }}"></td>
Это the js: (Извините, это немного длинно, но должно быть прямо)
$(document).ready(function () {
$(".delete-button").click(function (e) {
var id = $(this).attr('id')
e.preventDefault();
$.ajax({
type:'POST',
url:'{% url 'work_entries:object_delete' %}',
data:{
id: id,
action: 'post'
},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success:function(response){
$(".main-table").html(response)
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});
});
$(document).ready(function () {
$(".edit-button").click(function (e) {
var id = $(this).attr('id')
e.preventDefault();
$.ajax({
type:'POST',
url:'{% url 'work_entries:object_edit' %}',
data:{
id: id,
description: $('#description-id'),
hours: $('#hours-id'),
action: 'post'
},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success:function(response){
$(".main-table").html(response)
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});
});
Из того, что я вижу, что происходит, кнопка редактирования ничего не делает, так как она даже не попадает в представление, ни дает ошибку. Я думал, что кнопки удаления и редактирования частично совпадают, но я не нашел ничего в inte rnet по этому поводу. Любая помощь, предложения?
Также обратите внимание: в строках должно быть 2 входа, чтобы пользователь мог изменять описание и часы. Затем его следует отправить в представление через кнопку редактирования, где у меня есть функция, обновляющая эту запись.