Modale erstellt in Jinja Bedingungsanweisung zeigen alle die gleichen Daten

Question

Ich bin relativ neu der Web-Programmierer, so dass dies möglicherweise eine Lösung durch JavaScript oder nicht lösbar sein kann. Wenn nicht, bitte zeigen Sie mir in die richtige Richtung.

{% for thought in user.thoughts %} 

<div class="panel panel-default"> 

    <!-- Icon to Display Modal --> 
    <div class="panel-heading" align="right"> 
     <a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal" data-placement="left" title="Edit">Icon Here!</a> 
    </div> 

    <!-- Modal --> 
    <div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel"> 
     <div class="modal-dialog" role="document"> 
      <div class="modal-content" align="left"> 

        <!-- Form in Modal--> 
        <form action={{ "/editthought/" ~ thought.id }} method="post" role="form"> 
         <div class="modal-body"> 
          <textarea class="form-control" rows="10" type="text">{{ thought.body }}</textarea> 
         </div> 

         <div class="modal-footer"> 
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
          <button type="submit" class="btn btn-primary">Save changes</button> 
         </div> 
        </form> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 

<!-- Thought Body --> 
<div class="panel-body"> 
    {{ thought.body }} 
</div>  

{% endfor %} 

Hier Iterate ich durch jeden Gedanken mit einem Benutzer verbunden. Jeder Gedanke zeigt ein Feld an, das den Gedanken mit einem Symbol zum Bearbeiten des Gedankens anzeigt.

Wenn Sie auf das Symbol klicken, erscheint ein Modal mit dem Körper des Gedankens. Das Problem, das ich habe, ist, dass alle Mods den gleichen vorgefüllten Gedanken enthalten (der erste in der Liste).

Der Link (href = {{"/ edit /" ~ thought.id}}) auf dem Bearbeitungssymbol ist ebenso korrekt wie der Hauptteil des Bedienfelds. Wenn Sie jedoch das Modal laden, lädt es nicht richtiger Gedanke. Irgendwelche Ideen?

EDIT: Ich kann nicht herausfinden, wie Code zu kommentieren. Nach dem Ratschlag habe ich das Modal aus der for-Schleife genommen. Ich verwende diese Funktion derzeit, um Daten von meiner Schaltfläche in der For-Schleife an mein Modal weiterzuleiten.

<script>function testFun(variable){document.getElementById('thought_id').inne‌​rHTML=variable;}</sc‌​ript> 

Es ist jedoch arbeiten ich nur Informationen weitergeben kann, wenn es wie folgt formatiert ist:

<h1 id="thought_id"></h1> 

Gibt es eine Möglichkeit, diese Funktion zu ändern, so kann ich es als String ike passieren dies:

<h1>thought_id</h1> 

Answer 1

Wieder ist dies nicht die effizienteste Lösung, aber würde verhindern, dass Sie das Modal außerhalb Ihrer Schleife ziehen müssen und JS verwenden, um Ihr Modal zu aktualisieren.

Quick Fix für Ihre Links

<a href={{ "/edit/" ~ thought.id }} data-toggle="modal" datatarget="#EditModal_{{thought.id}}" data-placement="left" title="Edit"> 

Quick Fix auf Ihre modal id

<div class="modal fade" id="EditModal_{{thought.id}}" tabindex="-1" role="dialog" aria-labelledby="LabelModel"> 

!!!!! Datatarget ODER GEHEN SIE DIE EFFIZIENTER ROUTE !!!!!

Wenn Sie den Pfad zum Verschieben des Dialogs aus der for-Schleife herausgehen, können Sie etwas wie unten tun, indem Sie Ihren Links eine Klasse hinzufügen und ihnen ein click-Ereignis hinzufügen. Fügen Sie auch data-gedachte_id und data-gedachte_stelle dem Link in Ihrer for-Schleife hinzu.

jQuery:

$(function() { 
    $('.thought-link').click(function(event) { 
    event.preventDefault(); 
    var action_path = '/editthought/' + $(this).attr('data-thought_id'); 
    var thought_body = $(this).attr('data-thought_body'); 
    $('#EditModal form').attr('action', action_path); 
    $('#EditModal textarea').text(thought_body); 
    $('#EditModal').modal('show'); 
    }); 
}); 

Ihr neuer Link:

<a href="/edit/{{thought.id}}" data-toggle="modal" datatarget="#EditModal" data-placement="left" title="Edit" class="thought-link" data-thought_body="{{thought.body}}" data-thought_id="{{thought.id}}">Icon Here!</a> 

Ihre modal (außerhalb der for-Schleife):

<!-- Modal --> 
<div class="modal fade" id="EditModal" tabindex="-1" role="dialog" aria-labelledby="LabelModel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content" align="left"> 
     <!-- Form in Modal--> 
     <form action="" method="post" role="form"> 
     <div class="modal-body"> 
      <textarea class="form-control" rows="10" type="text"></textarea> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      <button type="submit" class="btn btn-primary">Save changes</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div>