提问者:小点点

Python Django编辑记录函数不能与Jquery Ajax一起工作


上下文:我有一个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按钮将其发送到视图,在那里我有一个更新该记录的函数。


共1个答案

匿名用户

在您的数据中

description: $('#description-id'),
hours: $('#hours-id'),

您无法获得输入的价值。 试试这个

description: $('#description-id').val(),
hours: $('#hours-id').val(),