Modal bootstrap to edit entries in Laravel

Question

Hello, I’m a beginner in PHP/Laravel programming and would like to include a modal for the registration and editing of database records. Follow the example:

In my index.blade.php I have:

@extends('app.layouts.basic')

@section('title', 'Liste de Clients')

@section('contenu')

<div class="col text-center" style="padding: 0px 0px 20px 0px">
  <a class="btn btn-primary" href="{{ route('client.create') }}" role="button">Ajouter nouveau client</a>
</div>

<table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">Code</th>
        <th scope="col">Nom</th>
        <th scope="col">tva</th>
        <th scope="col">Adresse</th>
        <th scope="col">Code Postale</th>
        <th scope="col">Ville</th>
        <th scope="col"></th>
      </tr>
    </thead>

    <tbody>
      @foreach ($clients as $client )
      <tr>
        <td>{{ $client->id }}</td>
        <td>{{ $client->nom }}</td>
        <td>{{ $client->tva }}</td>
        <td>{{ $client->adresse }}</td>
        <td>{{ $client->cp }}</td>
        <td>{{ $client->ville }}</td>
        <td><a href="{{ route('client.edit', $client->id ) }}"<i class="fas fa-pencil-alt"></i></td>
      </tr>
      @endforeach
    </tbody>
  </table>

  <nav aria-label="Page navigation example">
    <ul class="pagination justify-content-center">
      {{ $clients->appends($request)->links() }}
    </ul>
  </nav>
  
  <div style="text-align: center">
  Resultats {{ $clients->count() }} sur {{ $clients->total() }} ({{ $clients->firstItem() }} à {{ $clients->lastItem() }})
  </div>

@endsection

On my page Edit.blade.php:

@extends('app.layouts.basic')


@section('title', 'Ajouter un nouveau client')

@section('contenu')

  <div class="container">
    <form action='' method="POST">
      <input type="hidden" name="id" value="{{ $clients->id }}">
      @csrf
      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="inputNom">Nom</label>
          <input type="text" class="form-control" name="nom" value="{{  $clients->nom ?? old('nom') }}" id="inputNom" placeholder="Construart SPRL">
          {{ $errors->has('nom') ? $errors->first('nom') : '' }}
        </div>
        <div class="form-group col-md-6">
          <label for="inputTva">TVA</label>
          <input type="text" class="form-control" name="tva" value="{{  $clients->tva ?? old('tva') }}" id="inputTva" placeholder="BE08 2139 0852">
          {{ $errors->has('tva') ? $errors->first('tva') : '' }}
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-4">
          <label for="inputPays">Pays</label>
          <select name="pays_id" id="inputPays" class="form-control">

            @foreach ($pays as $pays)
            <option value="{{ $pays->id }}" {{ ( $clients->pays_id ?? old('pays_id')) == $pays->id ? 'selected' : ''}} >{{ $pays->nompays }}</option>
            @endforeach

          </select>
        </div>
        <div class="form-group col-md-2">
          <label for="inputCp">CP</label>
          <input type="text" class="form-control" name="cp" value="{{ $clients->cp ?? old('cp') }}" id="inputCp" placeholder="1930">
          {{ $errors->has('cp') ? $errors->first('cp') : '' }}
        </div>
        <div class="form-group col-md-6">
          <label for="inputVille">Ville</label>
          <input type="text" class="form-control" name="ville" value="{{ $clients->ville ??  old('ville') }}" id="inputVille" placeholder="Zaventem">
          {{ $errors->has('ville') ? $errors->first('ville') : '' }}
        </div>
      </div>
      <div class="form-group">
        <label for="inputAddresse">Addresse</label>
        <input type="text" class="form-control" name="adresse" value="{{  $clients->adresse ?? old('adresse') }}" id="inputAddresse" placeholder="Excelsiorlaan 16">
        {{ $errors->has('adresse') ? $errors->first('adresse') : '' }}
      </div>
      <div class="custom-control custom-switch">
        <input type="checkbox" class="custom-control-input" name="activation" id="activation" value="2">
        <label class="custom-control-label" for="activation">Active?</label>
      </div>
      <button type="submit" class="btn btn-primary">Enregistrer</button>
    </form>
  </div>

@endsection

In short, I would like you to open the modal with the contents of Edit.blade.php.

Note: I already have the bootstrap and Jquery on @extends('app.layouts.basic') and it is working perfectly, I just did not find the recipe to run the modal.

Thank you for your attention.

Answer 1

Well from what I understand, your problem is just how to display a modal, here below, follows an example, how to display a modal, just by clicking a button. To display your content inside, you just need to uncluize your form within the "Paste the code here":

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria- 
labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
           <div class="modal-content">
            Cola o código html aqui
          </div>
    </div>

More information about forms: https://getbootstrap.com/docs/4.0/components/modal/