Question

我正在尝试遵循烧瓶文档。在成功提交表单（注册表单）后，我会弹出一条消息，说“注册成功”。但是，我试图在bootstrap模式中显示此消息。

简化代码是......

@app.route('/signup', methods=['GET','POST'])
def signup():
    form = SignupForm()
    if form.validate_on_submit():
        flash('You were successfully signed up')
return render_template('signup.html', form=form)

现在我只需要在表单提交成功的情况下使用成功flash消息触发模态。所以我在flash消息检查中有我的模态HTML片段。

<HTML code for forms>
<input type='submit' value="Signup" data-toggle="modal" data-target="#myModal">
{% with messages = get_flashed_messages() %}
{% if messages %}
    <ul class=flashes>
    {% for message in messages %}
        <div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        {{ message }}
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
    </ul>
{% endif %}
{% endwith %}

这根本不会触发模态。关于如何让它发挥作用的任何想法？

Answer 1

问题已经差不多一年了，但我的解决方案是在发现闪烁消息的情况下使用JavaScript触发模式。

在没有消息闪烁的情况下，需要typeof测试以确保页面正确加载。

/* Trigger flash modal */
$(document).ready(function() {
    var messages = "{{ get_flashed_messages() }}";

    if (typeof messages != 'undefined' && messages != '[]') {
        $("#myModal").modal();
    };
});

<div id="myModal" class="modal fade" 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">
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                <ul class=flashes>
                    {% for message in messages %}
                    <li>{{ message }}</li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endwith %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Answer 2

这是一个古老的问题（超过 5 年），但将来仍有人可能会像我现在一样偶然发现这个问题。

如果您不需要将脚本与 HTML 分开，则上一个答案效果很好，如果需要，您可以这样做：

在 HTML 文件中：将 id 添加到仅在消息可用时呈现的区域。就我而言，我添加了 id=flashes
在 JS 文件中：依靠 JQuery 的 .length 属性仅在消息区域被呈现时显示模态。

HTML

  <!--=== Modal ===-->
  <div class="modal fade" id="modalId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-body p-2" id="flashes">
          {% with messages = get_flashed_messages() %}
          {% if messages %}
          <ul class="text-center">
            {% for message in messages %}
            <li>{{ message }}</li>
            {% endfor %}
          </ul>
          {% endif %}
          {% endwith %}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Dimiss</button>
        </div>
      </div>
    </div>
  </div>
  <!--=== Add this script after JQ ===--->
  <script src="path_to_script.js"></script>

脚本

$(document).ready(function() {
  if ($("#flashes *").length > 0){
    $("#modalId").modal();
  }
});

在bootstrap模态中的烧瓶中闪烁的消息

2 个答案: