Question

我正在开发一个laravel应用程序，我正在使用JQuery Ajax执行CRUD。当我尝试在插入或页面重新加载后首次编辑记录时，它可以正常工作。但是，如果我尝试编辑刚刚编辑过的记录，则编辑可以正常工作，但页面上没有显示更改，或者没有替换特定的行。

为了实现这一点，我在将记录插入表中时为每一行分配一个唯一的id。这就是我的代码的样子：

表：

$(".box-footer").on('click', '.add-subject', function(event) {
    event.preventDefault();
    /* Act on the event */

    var name = $('#name').val();
    var level = $('#level').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        type: "POST",
        url: "/subjects",
        data: {name: name, level: level},
        success: function(data) {

            if (data.errors) {
                $('.errors').removeClass('hidden');
                var errors = '';
                for(datum in data.errors){
                    errors += data.errors[datum] + '<br>';
                }
                $('.errors').show().html(errors); //this is my div with 

            } else {
                $('#subject-modal').modal('hide');

                var html;
                html += '<tr id="row"'+data.id +'">';
                    html += '<td>'+data.name+'</td>';
                    html += '<td>'+data.level+'</td>';

                    html += '<td><a id="edit-modal" data-id="'+data.id+'" data-name="'+data.name+'" data-level="'+data.level+'" data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a></td>';

                    html += '<td><a id="delete" data-id="'+data.id+'" data-toggle="tooltip" title="Delete" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a></td>';
                html += '</tr>';

                $("#subjects").append(html);


            }                      
        },
        error: function(data) {
            // body...
            $('#subject-modal').modal('hide');
            // display error

            $('.errors').removeClass('hidden');
            $('.errors').text('Ooops! There was an error. Please try again, and if error persits contact administrator');

        }
    });

});

插入记录的脚本：

$(".box-footer").on('click', '.edit-subject', function(event) {
    event.preventDefault();
    /* Act on the event */

    // id of the row to be deleted
    var id = $('#id').val();
    var name = $('#name').val();
    var level = $('#level').val();

    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        url: '/subjects/update/'+id,
        type: 'PUT',
        data: {name: name, level: level},
        success: function (data) {
            // body...

            if (data.errors) {
                var errors = '';
                for(datum in data.errors){
                    errors += data.errors[datum] + '<br>';
                }

                // removing the errors class and displaying errors
                $('.errors').removeClass('hidden');
                $('.errors').show().html(errors);

            } else {
                $('#subject-modal').modal('hide');


                var html;
                html += '<tr id="row"'+data.id +'">';
                    html += '<td>'+data.name+'</td>';
                    html += '<td>'+data.level+'</td>';

                    html += '<td><a id="edit-modal" data-id="'+data.id+'" data-name="'+data.name+'" data-level="'+data.level+'" data-toggle="tooltip" title="Edit" href="#" role="button"><i class="glyphicon glyphicon-edit text-info"></i></a></td>';

                    html += '<td><a id="delete" data-id="'+data.id+'" data-toggle="tooltip" title="Delete" href="#" role="button"><i class="glyphicon glyphicon-trash text-danger"></i></a></td>';
                html += '</tr>';

                $('#row'+data.id).replaceWith(html);


                console.log(data);

            }

        },
        error: function(data) {
            // display error

            $('.errors').removeClass('hidden');
            $('.errors').text('Ooops! There was an error. Please try again, and if error persits contact administrator');

        }
    });

});

编辑记录的脚本：

Developer ID

我在代码中遗漏了什么？我有更好的方法吗？请帮助！

Answer 1

我建议你这样做：

为每个输入提供唯一ID，例如：id="name{{$subject->id}}"。
编辑功能应在您的编辑按钮中传递变量[ID]，如下所示：onclick="editModel({{$subject->id}});"
在功能上，代码应该如下：
```
function editModel(id){
    var name = $('#name'+id).val();
    ....
}
```
现在您可以轻松选择每个输入。您也可以发送包含[ID]的数据在您的后端进行编辑。
- 在DOM准备好后创建DOM时，DOM无法访问表，因此您应该为每个输入和Id选择。

JQuery在编辑后不替换表行

1 个答案: