編集後に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

私はあなたが以下のようにそれを行うお勧め：id="name{{$subject->id}}"：

1. は、各入力に一意のID、EXを与えます。
2. 編集機能は、このようなあなたの編集ボタンに変数[ID]を渡す必要があります。今、あなたは簡単に各入力を選択することができます

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

   ：コードは以下のように動作する必要がある関数でonclick="editModel({{$subject->id}});"

3. 。 [ID]を含むデータをバックエンドで編集することもできます。

   • DOMの準備ができてから作成されたときにテーブルに到達できないため、各入力とIDを選択する必要があります。