编辑后jQuery不替换表行

Question

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

为此，我要在将记录插入表中时为每一行分配一个唯一的ID。 这是我的代码的样子：

表：

<tbody id="subjects">
        @foreach($subjects as $subject)
            <tr id="row{{$subject->id}}">
                <td>{{$subject->name}}</td>
                <td>{{$subject->level}}</td>
                <td>
                    <a data-id="{{$subject->id}}" data-name="{{$subject->name}}" data-level="{{$subject->level}}" data-toggle="tooltip" title="Edit" id="edit-modal" href="#" role="buton">
                        <i class="glyphicon glyphicon-edit text-info"></i>
                    </a>
                </td>
                <td>
                    <a id="delete" data-id="{{$subject->id}}" data-toggle="tooltip" title="Delete" href="#" role="button">
                        <i class="glyphicon glyphicon-trash text-danger"></i>
                    </a>
                </td>

            </tr>
        @endforeach
    </tbody>

插入记录的脚本：

$(".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');

        }
    });

});

我在代码中缺少什么吗？ 有更好的方法可以做到这一点吗？ 请帮忙！

Answer 1

我建议您按以下步骤进行：

1. 给每个输入一个唯一的ID，例如： id="name{{$subject->id}}" 。
2. 编辑功能应在您的编辑按钮中像这样传递变量[ID]： onclick="editModel({{$subject->id}});"

3. 在功能上，代码应按以下方式工作：

    function editModel(id){ var name = $('#name'+id).val(); .... } 

   现在，您可以轻松选择每个输入。 您还可以发送包括[ID]在内的数据以在您的后端中进行编辑。

   • 在DOM准备就绪后创建表时，DOM无法访问该表，因此应提供每个输入和ID以供选择。