如何在引导模式窗口中显示Flash消息? [英] How to show flash messages in bootstrap modal window?

问题描述

这是问题所在.我有一个窗体的引导模式窗口，如果发生任何错误，我会在其中显示flask.flash()的错误消息.但！当我第一次单击上载时，我的模式窗口正在关闭，只有重新打开模式窗口时，我才能看到错误消息.因此，当我单击Upload按钮而不关闭模式窗口时，错误消息应该显示出来，如果发生错误，但是如果没有错误，则它应该可以正常工作.如何使其表现出我想要的方式?是js的东西吗? (我不知道)还是可以用长颈瓶和靴子制成?无论如何，需要您的帮助.

Here is the problem. I have a bootstrap modal window with forms where i show up error messages with flask.flash() if any happend. But! When I click upload for the first time my modal window is closing, and I can see the error message only when I reopen the modal window. So the error message should show up when I click Upload button without closing the modal window, if the error happend, but if there is no errors, it should work as it is. How to make it behave the way I want? Is it js stuff? (which I don't know) Or it could be made by flask and bootstrap? Anyway, need your help guys.

<form method="post" action="{{ url_for('index') }}" enctype="multipart/form-data">
                <div class="modal-body">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                            <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                               {{ message }}
                              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <div class="input-group mb-3">
                      <div class="custom-file">
                        <input type=file name=dump_file class="file-input" id="custom-file-input" multiple>
                        <label class="custom-file-label" for="custom-file-input" data-browse="Browse">Choose file</label>
                      </div>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline1" name="radio" class="custom-control-input" value="linux">
                      <label class="custom-control-label" for="customRadioInline1">Linux</label>
                    </div>
                    <div class="custom-control custom-radio custom-control-inline">
                      <input type="radio" id="customRadioInline2" name="radio" class="custom-control-input" value="windows">
                      <label class="custom-control-label" for="customRadioInline2">Windows</label>
                    </div>
                    <!-- <span class="glyphicon glyphicon-paperclip"></span> -->
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                  <button type="submit" class="btn btn-info">Upload</button>
                </div>
          </form>
      </div>
    </div>
  </div>

推荐答案

是的，我也对此感到困惑. JQuery有一个简单的解决方案: 基本上，只有在错误(存在闪光警告)的情况下，此代码才会打开模态

Yeah, I was stuck with this too. There is a easy solution with JQuery: This code basically opens up the modal only if the error (flash warning exist)

其中.flash是您为Flash警告命名的div，

where .flash is the div that you named for your flash warning and

<script>
    $(document).ready(function() { // When page finished loading
  if ( $('.flash').length ) { // if there is an DOM that has class has-error
     $('#changePasswordModal').modal('show'); // Show Modal
  }
});
</script>

这篇关于如何在引导模式窗口中显示Flash消息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！