CODEWITHSUNDEEP
jinja2bootstrap-modal
Christian MacNevin
Christian MacNevin

Reputation: 71

Bootstrap Modal not appearing - jinja2

I'm the thousandth person to ask a similar question, so I'm certain it's something simple.

First time working with boostrap / jinja in Chrome. Simply put, the button is there, but clicking it does nothing. The data is all populating from Jinja just fine, and the jinja is rendering out the for loops properly, with matching id's between target calls and div id's.

**EDIT: After following the suggestion of looking at this URL: https://getbootstrap.com/docs/5.0/components/modal/#usage and cutting and pasting the sample "live demo" that isn't working either. Could be something environmental I'm missing?

<!DOCTYPE html>
<html lang="en">

<html>
  <head>
  </head>
  <body>
    {% block content %}
      <table>
        <tr>
          <td>
            {% for loc, content in variant.location.items() %}
            {% set modal_id = day.header + item_name +variant.variant_name %}
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#{{modal_id}}">{{ loc }} : {{ content.quantity }}</button>
            {% endfor %}
          </td>
        </tr>
      </table>
    {% endblock %}
  </body>

  {%block modals%}
    {% for loc, content in variant.location.items() %}
      {% set modal_id = day.header + item_name + variant.variant_name %}

      <!-- Modal -->
      <div id="{{ modal_id }}" class="modal fade" role="dialog" style="z-index: 10000000">                
        <div class="modal-dialog">
          <div classs="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
              <p>STUFF</p>
            </div>
          </div>
        </div>
      </div> 
    {% endfor %}
  {%endblock%}
</html>

Upvotes: 4

Views: 957

Answers (1)

costaparas
costaparas

Reputation: 5237

Based on your generated HTML, I can see two main issues.

Your id attributes contain non-standard characters, which often cause problems for libraries like Bootstrap. Please familiarize yourself with the documentation:

Using characters except ASCII letters, digits, '_', '-' and '.' may cause compatibility problems

Remove the non-standard characters (such as (, ), /, , and what appear to be non-ASCII smart quotes (“ and ”)) from your id attributes, which should solve this problem.

The other issue is that your generated HTML doesn't seem to have the Bootstrap CSS or JS loaded anywhere at all. Without the JS, the modals wouldn't do anything. The JS is what makes the modals appear.

You need to load these at the start, along with jQuery which is a dependancy for Bootstrap.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

Upvotes: 1

Related Questions