Foreach Eintrag in DB: Tabellenzeile mit Onclick Modal mit einer Reihe

Question

Sorry, wenn der Titel verwirrend sein mag,

Ich verwende Laraverl Klinge, und ich habe eine foreach in meinem Tisch, um so viele Zeilen zu zeigen, als Datenbank Datensätze.

@foreach ($terminals as $terminal) 
          <tr> 
           <td>{{ $terminal->id }}</td> 
           <td>{{ $terminal->serial }}</td> 
           @if ($terminal->state != 0) 
            <td><a href="" data-toggle="modal" data-target="#terminalModal--{{ $terminal->id }}">{!! GetTerminalState($terminal->state) !!}</a></td> 
           @else 
            <td>{!! GetTerminalState($terminal->state) !!}</td> 
           @endif 
           <td> 
            <a href="{{ route('showSpecificTerminal', $terminal->id) }}" class="btn btn-primary btn-sm"> 
             <i class="fa fa-cc-visa" aria-hidden="true"></i> Terminal Details 
            </a> 
           </td> 
          </tr> 
          <!-- TODO: Move Modal outside of table?--> 
          @if ($terminal->state != 0) 
           <div class="modal fade" tabindex="-1" role="dialog" id="terminalModal--{{ $terminal->id }}"> 
            <div class="modal-dialog" role="document"> 
             <div class="modal-content"> 
              <div class="modal-header"> 
               <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
               <h4 class="modal-title">Terminal (S/N: {{ $terminal->serial }})</h4> 
              </div> 
              <div class="modal-body"> 
               <h3 class="text-center">In use by</h3> 
               <strong>ID: </strong>{{ $terminal->user->id }}<br> 
               <strong>Username: </strong>{{ $terminal->user->name }}<br> 
               <strong>Real Name: </strong>{{ $terminal->user->realname }}<br> 
               <strong>E-Mail: </strong>{{ $terminal->user->email }}<br> 
               <strong>OID: </strong>{{ $terminal->user->oid }}<br> 
               <a href="{{ route('showSpecificProfile', $terminal->user->id) }}" class="btn btn-block btn-primary btn-sm"> 
                <i class="fa fa-user" aria-hidden="true"></i> Profile 
               </a> 
              </div> 
              <div class="modal-footer"> 
               <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
              </div> 
             </div><!-- /.modal-content --> 
            </div><!-- /.modal-dialog --> 
           </div><!-- /.modal --> 
          @endif 
         @endforeach 

Wie Sie sehen können, in dem ForEach ich GetTerminalState meine benutzerdefinierte Funktion verwenden, die ein Bootstrap-Label Echo („Nicht in Gebrauch“ für wenn $terminal->state 0, und „in Gebrauch“ denn wenn es nicht 0) .

Wenn es 0 Zero ist, sollte es ein Modal generieren, das beim Klicken auf das Etikett geöffnet wird. Innerhalb dieses Modales möchte ich eine Tabelle verwenden, aber das funktioniert nicht (Tabelle innerhalb einer Tabelle).

Also muss ich das modale aus der Tabelle verschieben, aber später nicht ein anderes ForEach verwenden. Kennt jemand eine bessere Methode zum dynamischen Erzeugen von Modals pro Datenbankeintrag?

Answer 1

Verwenden Sie Javascript, um Ihre Modale zu generieren. Hören Sie, klicken Sie auf Ereignis auf Ihren Etiketten, übergeben Sie die DB-Datensatz-ID zu Ihrem JavaScript-Code und machen Sie einen Ajax-Aufruf für die Daten, die in das Modal und rendern es.