編輯后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以供選擇。