CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrapflask
Anthony
Anthony

Reputation: 33

Modals created in jinja conditional statement are all showing the same data

I am relatively new the web programmer so this may or may not be a solution solvable through JavaScript. If not, please point me in the correct direction.

{% 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 %}

Here I am iterating through every thought associated with a user. Each thought displays a panel showing the thought with an icon to edit the thought.

When you click the icon, a modal pops up with the body of the thought. The issue I'm having is all of the modals contain the same pre-populated thought (the first one in the list).

The link (href={{ "/edit/" ~ thought.id }}) on the edit icon is correct as well as the body of the panel, however when you load the modal, it is not loading the correct thought. Any ideas?

EDIT: I can't figure out how to comment code. Following advice, I took the modal out of the for loop. I'm currently using this function to pass data from my button in the for loop to my modal.

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

It's working however I can only pass information if it's formatted like this:

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

Is there any way to change this function so I can pass it as a string ike this:

<h1>thought_id</h1>

Upvotes: 3

Views: 2596

Answers (1)

Adrianopolis
Adrianopolis

Reputation: 1292

Again this is not the most efficient solution but would prevent you from having to pull the modal outside your loop and use JS to update your modal.

Quick fix for your links datatarget

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

Quick Fix to your modal id

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

!!!!! OR GO THE MORE EFFICIENT ROUTE !!!!!

If you do go the route of moving the dialog out of for loop you can do something like below by adding a class to your links and attache a click event to them. Also add data-thought_id and data-thought_body to the link in your for loop.

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');
  });
});

Your new 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>

Your modal(outside the for loop):

<!-- 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>

Upvotes: 3

Related Questions