Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

stephen waweru's avatar

how to append response data in a datatable laravel and jquery

i have this project whereby i have a list of users and their roles in a page.in this table I have looped the data from a table in the database to show the users details and their respective roles for each user

i have a button on each row where the admin can reassign a user a another role.i have been able to achieve this by using modal where on clicking the reassign button a modal pops containing the name and and the current role of the user and upon clicking the "Change Role" button, in the modal ,the role changes successfully and the modal disappears.i have used ajax to achieve this.now the bug comes here.After successfully doing that I want to change the role on the table row page without page reload for that specific user in the their row,I have tried the replacewith method to append the response data sent back but upon appending everything the "reassign Button" stops working without no error .where might I have gone wrong here is the table shows the user details and their current role before reassigning

<table id="companyadmins" class="table table-striped table-bordered" style="width:100%; margin-top:50px;">
  <thead>
    <tr>
      <td>id</td>
      <td>Admin Name</td>
      <td>Role</td>
      <td>Profile image</td>
      <td>Admin Status</td>
      <td>Action</td>
    </tr>
  </thead>
  <tbody>
    @foreach ( $companyadmins as $admin )
      <tr class="admins{{$admin->id}}">
        <td>{{ $admin->id }}</td>
        <td>{{ $admin->name }}</td>
        @foreach ( $admin->roles as $role)
        <td>{{ $role->role_name }}</td>
        @endforeach
        
        @if ($admin->avatar=='default.jpg')
            <td><img src="{{ asset ('imagesforthewebsite/usersimages/default.jpg') }}" style="width:80px; height:80px;"></td>
        @else
            <td><img src="{{ asset ('imagesforthewebsite/usersimages/'.$admin->avatar) }}" style="width:80px; height:80px;"></td>
        @endif
        <td>
            <input data-id="{{ $admin->id }}" class="toggle-class adminstatus" type="checkbox" 
                    data-onstyle="success" data-offstyle="danger" data-toggle="toggle" 
                    data-on="Active" data-off="In Active" {{ $admin->status ? 'checked':'' }}>
        </td>
        <td>
            <button type="button" class="update-btn btn btn-primary btn-xs" value="{{ $admin->id }}" title="Edit the Product Details">
              Re_Assign Role
            </button>
        </td>
      </tr>
    @endforeach
  </tbody>
</table>

here is my code for reassigning the role

console.log(assignformData);
        $.ajax({
          type:"POST",
          url:url,
          data:assignformData,
          contentType:false,
          ProcessData:false,
          success:function(response)
          {
            console.log(response);
            if(response.status==400)
            {
              $('#update_erroradmin').html("");
              $('#update_erroradmin').removeClass('d-none');
              $.each(response.errors,function(key,err_value)
              {
                $('#update_erroradmin').append('<li>'+err_value+'</li>');
              });
            } 
            else if (response.status==200)
            {
                $('#update_erroradmin').html("");
                $('#update_erroradmin').addClass('d-none');
                $('#assignadminmodal').modal('hide');
                alert(response.message);
              $('.admin' + response.id).replaceWith(" "+
                "<tr class='admins" + response.id + "'>"+
                  "<td>" + response.id + "</td>"+
                  "<td>" + response.name + "</td>"+
                  "<td>" + response.id + "</td>"+
                  // foreach ( $admin->roles as $role)
                  // <td>{{ $role->role_name }}</td>
                  // endforeach
                  if ( + response.avatar + "=='default.jpg'")
                      "<td><img src='imagesforthewebsite/usersimages/default.jpg' style='width:80px; height:80px;'></td>"+
                  else
                      "<td><img src='imagesforthewebsite/usersimages/'" + response.avatar + "' style='width:80px; height:80px;'></td>"+
                  endif
                  "<td><input data-id='" + response.id + "' class='toggle-class adminstatus' type='checkbox' data-onstyle='success' data-offstyle='danger' data-toggle='toggle' data-on='Active data-off='In Active'"  + response.status + "' ? 'checked':'' }}></td>"+
                  "<td><button class='update-btn btn btn-primary btn-xs' value='" + response.id + "' title='Edit the Product Details'>Re_Assign Role</button></td>"+
                "</tr>"
               ); 
            }
          }
        })
0 likes
2 replies
Snapey's avatar

why update the whole table?

you don't show how you add the event handler to the table. You probably need to re-add it

1 like

Please or to participate in this conversation.