Caricare il contenuto di un modal da un url

[Askancy]

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.

 

 

 

 

 

load content modal from url

load dynamic content in boostrap modal

Laravel load content in modal ajax

[Ricsca]

Una demo?

[Askancy]

1 ora fa, Ricsca ha scritto:

Una demo?

C'è poco da mostrare con una demo, ma ho inserito un video che può dare "un'idea".

[Ricsca]

Ok ora o capito a cosa serve