javascript - 如何在引导模式窗口中显示 flash 消息？

Question

问题来了。我有一个带有表单的 Bootstrap 模式窗口，如果发生任何错误，我会在其中显示带有 flask.flash() 的错误消息。但!当我第一次点击上传时，我的模态窗口正在关闭，只有当我重新打开模态窗口时我才能看到错误消息。因此，当我单击 Upload 按钮而不关闭模式窗口时，错误消息应该会显示，如果错误发生，但如果没有错误，它应该按原样工作。如何让它按照我想要的方式运行？是js的东西吗？ (我不知道)或者它可以通过 flask 和 Bootstrap 制作？无论如何，需要你们的帮助。

<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>

Answer 1

是的，我也被这个困住了。 JQuery 有一个简单的解决方案:这段代码基本上只有在错误(存在闪光警告)时才会打开模式

其中 .flash 是您为闪光警告命名的 div 和

changePasswordModal 是模式 ID

<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>