So laden Sie Daten in 1 Modal mit Zweig

Question

Ich habe eine HTML-Tabelle, die Daten aus der Datenbank enthält. Wenn ich auf den Titel einer Tabellenzeile klicke, sollte ein Modal geöffnet werden, das die Daten der Zeile enthält. jetzt

denn ich habe es auf diese Weise gelöst:

<table> 
{% for item in items %} 
<tr> 
    <td> 
     <td><a href="#" data-toggle="modal" data-target="modal{{ item.id }}">{{ item.name }}</a></td> 
    </td> 
</tr> 
{% endfor %} 
</table> 

{% for item in items %} 
<div class="modal" id="modal{{ item.id }}"> 
    <div class="modal-dialog" role="document"> 
     <div class="modal-content"> 
     <h5 class="modal-title">ID: {{ item.id }}</h5> 
     ... 
     </div> 
    </div> 
</div> 

Es ist jetzt arbeiten, auf keinen Fall. Aber wie Sie sehen können, wird für jedes Element im Array ein Modal erstellt. Also zum Beispiel wenn ich 9000 Items im Array habe. Ich werde 9000 Modale in HTML haben. Ich denke, das ist nicht gut, also suche ich nach einer Möglichkeit, nur 1 Modal zu verwenden und seinen Inhalt basierend auf der ID einzuschließen.

Wie kann ich dies oder was ist der beste Weg, dies zu tun mit Zweig und PHP (nicht Symfony Framework, nur Zweig-Engine)?

Ich benutze Bootstrap 4 für meine Modal/Table.

EDIT:

@entio verknüpft mich auf eine ähnliche Frage, also versuchte ich es aus. Zuerst folgte ich entio Antwort auf meine $tickets (das Array, das die Daten enthält alle) kodieren zu json:

{% autoescape %} 
    var globalDataObject = {{ tickets|json_encode()|raw }}; 
{% endautoescape %} 

Das JSON-Objekt wie folgt aussieht:

0: 
    0: "93" 
    1: "3" 
    2: "Testticket" 
    3: "0" 
    4: "" 
    5: "2017-12-08 14:43:21" 
    6: "0000-00-00 00:00:00" 
    7: "2017-12-08 14:43:21" 
    8: "test" 
    9: "Test" 
    description: "test" 
    subject: "Testticket" 
    closed_at: "0000-00-00 00:00:00" 
    closemessage: null 
    device: "Test" 
    customerid: "3" 
    last_answer: "2017-12-08 14:43:21" 
    opened_at: "2017-12-08 14:43:21" 
    state: "0" 
    ticketid: "93" 
1: 
    0: "94" 
[...] 

Mein Problem ist jetzt, dass ich don weiß nicht, wie man auf dieses json-Objekt zugreifen kann. Die Antwort von entios verknüpfter Frage hilft mir nicht weiter. Meine aktuelle Kodex (copy% Paste mit einigen Änderungen der verlinkten Antwort):

<script type="text/javascript"> 
    {% autoescape %} 
    var globalDataObject = {{ tickets|json_encode()|raw }}; 
    {% endautoescape %} 

    (function($) { 
    var myModal = $('#ticketModal'); 
    $('#subject').on('click', function(){ 
     $.ajax({ 
      type: 'GET', 
      url: 'home.php?ticketid='+$(this).data('id'), 
      dataType: 'json', 
      success: function(data){ 
      htmlData = '<h1>Test:'+data.subject'; 
      myModal.find('.modal-body').html(htmlData); 
      modal.modal('show); 
      } 
     }); 
     return false; 
    }); 
})(jQuery); 
</script> 

Der HTML-Code meiner Tabellenzeilen wird folgendermaßen geändert:

<td><a href="#" id="subject" data-id="{{ ticket.ticketid }}">{{ ticket.subject}}</a></td> 

So die Daten-ID für alle Zeilen In der Tabelle sind die Datenbank-IDs. Wie kann ich jetzt im Json nach dem richtigen Item suchen und ein Modal öffnen, das Daten vom json-Objekt enthält?

Der aktuelle Javascript-Code funktioniert nicht. Ich schätze, es ist, weil ich nie Zugang zu bekomme.

Answer 1

Wenn Sie JS nicht einbeziehen möchten, müssen Sie alle Knoten generieren.

Andernfalls können Sie einfach ein Objekt mit all Ihren Daten an JS übergeben und dynamisch modales Click-Ereignis erstellen lassen. Parsen zu json mit json_encode Filter erfolgen:

<script type="text/javascript"> 
    var globalDataObject = {{ yourDataObject|json_encode() }}; 
</script> 

Dies ist etwas im Zusammenhang, so dass Sie von ihm die Antworten lernen können: Load JSON data into a Bootstrap modal