0

I have a series of 6 modals that are created through a flask/jinja2 frame work loop and 1 modal that is an example outside of the loop. The modals all populate and populate correctly when looking at the page source. The example modal that is outside the loop shows without issue, however the other 6 modals will not fire.

https://www.sfiltrowani.pl/filter_instructions is the live site with the problem. https://github.com/rscales02/sfiltrowani is the full code git repository.

This is for a flask app run on AWS elastic beanstalk. I was able to get the example modal to show by defining modal id and data target manually, those were the only changes I made from a copy/paste of the original modal code and original link to modals.

example link identical links from A-F

<a href="#" data-toggle="modal" data-target="#instrukcjaF.jpg   ">{{ _('(instrukcja photo F)') }}</a>

modal loop to create image modals for instructions

{% for image in images %}

<!-- Modal -->

<div class="modal fade" id="{{ image }}" role="dialog">

<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
        <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
   </div>

  </div>
 </div>
 {% endfor %}

Expected results a modal that fires for each photo in my instructions. Current results only example modal will show.

[Edit] I am new to the stack, edited to show the 3 lines of code that were hidden, due to lack of indentation. Thanks and sorry!

classydoc
  • 21
  • 4

2 Answers2

0

Your link does not point to the modal to show .

The modal needs an ID that is referenced by data-target

<a href="#" data-toggle="modal" data-target="#this-modal-id">{{ _('(instrukcja photo F)') }}</a>

<div class="modal-dialog"  id="this-modal-id">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
            <img id='modal-img' src="{{ url_for('static', filename='images/instructions/' + image) }}" alt="{{ loop.index }}">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
JBurt
  • 48
  • 1
  • 5
  • I edited my comment as this is my first, the editing threw me and some of the code was not properly formatted. The edited comment I believe reflects your change and the modals still do not function properly. Thanks. – classydoc Jan 11 '19 at 01:38
  • Sorry, I missed the top level div when quoting you try moving the id up to there. This link may have more useful information https://www.w3schools.com/howto/howto_css_modals.asp – JBurt Jan 11 '19 at 01:44
  • Top level div is where the id is. You didn't miss it without the proper indentations the '
    's disappeared.
     – classydoc Jan 11 '19 at 01:51
0

I fixed it! It would appear that modal id's are sensitive to specific formatting and not just random strings. Previous version that did not work had id and data-targets of 'instrukcja*.jpg' when '.jpg' was removed, the modals function perfectly.

classydoc
  • 21
  • 4