Caricare il contenuto di un modal da un url

Admin

Askancy

Inviato 23 Dicembre 2021

Admin

- Condividi

Inviato 23 Dicembre 2021

Molto spesso succede di voler fare compiere delle azioni senza dover aggiornare la pagina, in questi casi entra in gioco il jQuery. In questa semplice guida, spiegherò come far caricare un contenuto dinamico all'interno di un Modal di boostrap

Cita

Il plugin Modal è una finestra di dialogo / pop-up di dialogo che viene visualizzata sulla parte superiore della pagina corrente.

Questa guida è valida anche se non si usa Laravel o Bootstrap, ma per semplificarla utilizzeremo questi due elementi.

La prima cosa che dovremmo fare è inserire il bottone che andrà a richiamare il modal:

<a href="{{url('admin/ajax/edit/nation/'.$value->id)}}" class="ls-modal btn btn-icon btn-bg-light">Modifica</a>

Nelle classi dell'href abbiamo aggiunto la classe ls-modal (potete rinominarla come volete voi), questa classe sarà il nostro richiamo nel jQuery.

Sempre nel solito blade, o come un componente incluso (@include(...)), andiamo a inserire il nostro modal ripulito:

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                </div>
                <div class="modal-body">
                    <p>Caricamento...</p>
                </div>
        </div>
    </div>
  </div>

Adesso non ci resta che inserire il jQuery prima della chiusura del </body>, io nel mio caso ho preferito inserire prima della chiusura del body un

@yield('js')

e nel blade dove abbiamo inserito il richiamo al modal:

@section('js')
    <script type='text/javascript'>
    $(document).ready(function(){
        $('.ls-modal').on('click', function(e){
        e.preventDefault();
        $('#myModal').modal('show').find('.modal-body').load($(this).attr('href'));
        });
    });
    </script>
@endsection

Come è possibile vedere il jQuery va ricercare il click sull'elemento con la classe ls-modal, andando a caricare il contenuto della pagina indicata nell'href all'interno di modal-body del modal.

Per andare più nelle specifico, andrò a spiegare anche come comportarsi nel route e nel controller.

web.php (route)

    Route::get('ajax/add/nation/{id}', 'AjaxController@getEditModal');

Nel controller invece andremo a gestire il nostro codice php, dove dovremmo indicare in quale tabella dovrà cercare i dati e in che view stamparli:

AjaxController.php (controller)

  public function getEditModal(Request $request, $id)
  {		
      $nation = Nation::where('id',$id)->first();
      return view('admin.component.modal', compact('nation')); 
  }

Il controller andrà a stampare i dati della variabile $nation, all'interno del view admin.component.modal, che dovrà contenere solamente uno scheletro dei dati, senza richiami di extends, css o js.

Ecco un video in cui mostra il caricamento dinamico del modal.