CODEWITHSUNDEEP
laravellaravel-bladelaravel-controllerlaravel-10
Maranda Dominguez
Maranda Dominguez

Reputation: 3

Laravel: Updating data with modal in table

I have an edit button in every row in a table that opens a modal form to edit a user's information. I want to fill in the inputs with the data of the specific user I chose to edit from the table. Though I am having issues actually displaying the data in the inputs. I am using Laravel 10.

Here is my users.blade.php:

@include('layout.navbar')
<h1 style="text-align:center; font-size:50px;">Users</h1>
<link href="{{asset('css/stylesheet.css')}}" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
  <body>          
    
<br>
  <div class="table-responsive">
  <table id="datatable" class="table table-bordered table-hover table-sm"  border="2" style="width:100%;">

    <thead>
      <tr>
        <th class="text-center">Username</th>
<!--        <th class="text-center hidden-xs">Date Created</th>
        <th class="text-center hidden-xs">Date Last Modified</th>-->
        <th class="text-center">Name</th>
        <th class="text-center">Email</th>
        <th class="text-center">Active</th>
        <th class="text-center">Quality Manager</th>
        <th class="text-center">Administrator</th>
        <th class="text-center">Account Manager</th>
        <th class="text-center">Executive Manager</th>
        <th class="text-center">Edit</th>
      </tr>
    </thead>

    <tbody>
      @foreach($users as $user)
      <tr class="text-center">
        <td>{{$user->username}}</td>
<!--        <td class="hidden-xs">{{$user->created_at}}</td>
        <td class="hidden-xs">{{$user->updated_at}}</td>-->
        <td>{{$user->name}}</td>
        <td>{{$user->email}}</td>
         <td>
          <label>
            <input type="checkbox" name="active" value="active" {{($user->active)?'checked':null}} disabled>
          </label>
        </td>
        <td>
          <label>
            <input type="checkbox" name="quality_manager" value="1" {{($user->quality_manager)?'checked':null}} disabled>
          </label>
        </td>
         <td>
          <label>
            <input type="checkbox" name="administrator" value="1" {{($user->administrator)?'checked':null}} disabled>
          </label>
        </td>
        
        <td>
          <label>
            <input type="checkbox" name="account_manager" value="1" {{($user->account_manager)?'checked':null}} disabled>
          </label>
        </td>
        
        <td>
          <label>
            <input type="checkbox" name="executive_manager" value="1" {{($user->executive_manager)?'checked':null}} disabled>
          </label>
        </td>
        <td>
          <button type="button" style="width:100px;height:30px;background-color:#193c64;border-color:#193c64;color:white;" class="btn btn-default btn-xs edit-form" 
           data-bs-toggle="modal" data-bs-target="#editModal" 
           data-id="{{$user->id}}" data-username="{{$user->username}}" data-password="{{ $user->password }}">Edit</button>
        </td>

       
        
          
      </tr>
      @endforeach

    </tbody>
  </table>
  </div>
<!-- Edit UserModal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel">
  <div class="modal-dialog" role="document">
    <form action="{{url('/users/update/{id}')}}" method="POST" id="edit-form">
    {{ csrf_field() }}
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title" id="editUserModalLabel">Edit User</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal">x</button>
        </div>
        <div class="modal-body">

          <label for="edit-username">Username</label>
          <input class="form-control" type="text" name="username" id="username" >

          <label for="edit-password">Password <small>(optional)</small></label>
          <input class="form-control" type="password" name="password" id="password" autocomplete="new-password">

          <br>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="active" value="active" > Active
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="quality_manager" value="1" > Quality Manager
            </label>
          </div>
          <div class="checkbox">
            <label>
              <input type="checkbox" name="administrator" value="1" > Administrator
            </label>
          </div>
          
          <div class="checkbox">
            <label>
              <input type="checkbox" name="account_manager" value="1" >Account Manager
            </label>
          </div>
           <div class="checkbox">
            <label>
              <input type="checkbox" name="executive_manager" value="1" > Executive Manager
            </label>
          </div>

        </div>
        <br><br>
        <div class="modal-footer">
        <button type="button" style="float:right;background-color:red;"class="modal-button" data-bs-dismiss="modal">Close</button>
        <button  type="submit" name="update" id="update" style="background-color:#193c64;border-color:#193c64;height:50px; color:white;" class="btn btn-primary" >Save User</button>
        </div>
      </div>
    </form>
  </div>
</div>
<script>
  $(document).on('click', '.edit-form', function(e) {
    e.preventDefault();

    
    $("#username").val($(this).attr('data-username'));
    $("#password").val($(this).attr('data-password'));

});
</script>

Here is the UserController.php (I haven't finished the update method because I wanted to get the data displayed in the inputs first):

<?php

namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use App\Http\Requests;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\DB;
use Illuminate\View\View;
use URL;

use DataTables;

class UserController extends Controller
{
    public function index(): View
    {
        $users = DB::table('users')->get();
        return view('users',['users'=>$users]);
        
    }
public function edit($id)
    {
        $user = User::find($id);

       $data['username'] = $user->username;
        $data['active'] = $user->active;
        $data['administrator'] = $user->administrator;
        $data['quality_manager'] = $user->quality_manager;
        $data['account_manager'] = $user->account_manager;
        $data['executive_manager'] = $user->executive_manager;
        $data['update'] = URL::route('update-users', $id);
        return view('users')->with('data',$data);
    }
public function update(Request $request, $id)
    {
   
        $username=$request->input('username');
        $password = bcrypt($request->input('password'));
      
        $quality_manager=$request->input('quality_manager');
        $administrator=$request->input('administrator');
        $account_manager=$request->input('account_manager');
        $executive_manager=$request->input('executive_manager');
        $active=$request->input('active');

    }

Here are the user routes:

Route::get('/users/edit/{id}', [App\Http\Controllers\UserController::class, 'edit'])->name('edit-users');
Route::get('/users', [App\Http\Controllers\UserController::class, 'index'])->name('users');
Route::post('/users/update/{id}', [App\Http\Controllers\UserController::class, 'update'])->name('update-users');

I have tried using JQuery and Ajax, but no luck.

Upvotes: 0

Views: 1573

Answers (1)

Zafeer Ahmad
Zafeer Ahmad

Reputation: 405

first add @csrf just below of your bootstrap modal form tag then.

pass some necessary data to your edit button while looping and you should not add id attribute to it if you are iterating it.

<a class="btn btn-default btn-xs edit-form" data-bs-toggle="modal" data-bs-target="#editModal" data-id="{{$user->id}}" data-username="{{$user->name}}" data-password="{{ $user->password }}">
Edit
</a>

write a short jquery code on the same page of your file like

$(document).on('click', '.edit-form', function(e) {
    e.preventDefault();

    $("#username").val($(this).attr('data-username'));
    $("#password").val($(this).attr('data-password'));

});

this will pre populate the required data into modal form.

This will solve your problem.

Upvotes: 0

Related Questions