Как показать флеш-сообщения в модальном окне начальной загрузки?

Question

Вот проблема. У меня есть модальное окно начальной загрузки с формами, где я показываю сообщения об ошибках с помощью flask.flash (), если таковые произошли. Но! Когда я нажимаю кнопку «загрузить» в первый раз, моё модальное окно закрывается, и я вижу сообщение об ошибке только при повторном открытии модального окна. Поэтому сообщение об ошибке должно отображаться, когда я нажимаю кнопку Upload, не закрывая модальное окно, если ошибка произошла, но если ошибок нет, она должна работать как есть. Как заставить его вести себя так, как я хочу? Это JS вещи? (чего я не знаю) Или это можно сделать с помощью колбы и бутстрапа? В любом случае, нужна ваша помощь, ребята.

<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 - модальный идентификатор

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