上下文:我有一个HTML格式的表,其中包含特定用户的一些数据。 每一行旁边都有一个删除和一个编辑按钮。 我想要按钮做他们应该做的某一行。 目前,delete按钮正在工作,我尝试了一种类似的方法来处理edit按钮,但是当单击时什么也不会发生。
这是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>
这是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
}
});
});
});
从我看到的情况来看,编辑按钮什么也不做,因为它甚至没有到达视图,也没有给出错误。 我以为删除和编辑按钮之间有重叠,但我没有在网上找到任何关于这一点的东西。 有什么帮助,建议吗?
还要注意:这些行意味着有2个输入,以便用户更改描述和小时。 然后应该通过edit按钮将其发送到视图,在那里我有一个更新该记录的函数。
在您的数据中
description: $('#description-id'),
hours: $('#hours-id'),
您无法获得输入的价值。 试试这个
description: $('#description-id').val(),
hours: $('#hours-id').val(),