JQuery not replacing table row after edit

Question

I'm working on a laravel app, and I'm performing CRUD with JQuery Ajax. What happens is that when I try to first edit a record after insertion or page reload it works fine. But if I try to edit that record which have just been edited, the edit works but the changes isn't shown on the page or that particular row isn't replace.

To accomplish this I'm assigning every row a unique id when record is inserted into the table. This is how my code looks:

Table:

<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>

Script to insert record:

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

        }
    });

});

Script to edit record:

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

        }
    });

});

Am I missing something in my code? Are there better ways I can do this? Please Help!

Answer 1

I suggest you do it as following:

1. Give each input a unique id, ex: id="name{{$subject->id}}" .
2. The edit function should pass variable [ID] in your edit button like this: onclick="editModel({{$subject->id}});"

3. On function the code should work as following:

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

   Now you can select each input with ease. also you can send data including [ID] to edit in your backend.

   • Table is not not reachable by DOM when created after DOM ready, so you should give each input and Id to select.