在引导模式的烧瓶中闪烁消息

Question

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

简化的代码是...

@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 消息检查中添加了模态 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('show');
    };
});

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

在引导模式的烧瓶中闪烁消息

问题描述投票：0回答：2

2个回答

最新问题

在引导模式的烧瓶中闪烁消息

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2