Bootstrap модальное закрытие на WTForm Submit - ошибки не отображаются - Flask - PullRequest
0 голосов
/ 06 февраля 2020

При создании кода HTML для моего проекта flask мой модальный режим закрывается при отправке, даже если при отправке возникают ошибки. Я не могу найти способ сохранить модальное отображение, если есть ошибки.

Я пытался добавить JavaScript, но я продолжал получать ошибки, и тогда кнопка отправки не работала вообще. Также по какой-то причине команды $ .path jQuery не будут работать (я думаю, что это возможно из-за того, что я на локальном сервере?)

Любая помощь очень ценится.

  <button type="button" class="btn btn-outline-info btn-sm" data-toggle="modal" data-target="#myModal"><i class="fas fa-plus icon"></i>Add Training</button>
  <div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog form-width">
      <div class="modal-content">
        <div class="modal-header">
          <span>Add Training</span>
        </div>
        <div class="modal-body">
          <form method="POST" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
              <legend>Add training to your record</legend>
              <br>
              <div class="form-group form-grid">
                {{ form.training_course.label() }}
                {% if form.training_course.errors %}
                  {{ form.training_course(class="form-control form-control-sm is-invalid") }}
                  <div class="invalid-feedback">
                    {% for error in form.training_course.errors %}
                      <span>{{ error }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {{ form.training_course(class="form-control form-control-sm") }}
                {% endif %}
              </div>
              <div class="form-group form-grid">
                {{ form.training_provider.label() }}
                {% if form.training_provider.errors %}
                  {{ form.training_provider(class="form-control form-control-sm is-invalid") }}
                  <div class="invalid-feedback">
                    {% for error in form.training_provider.errors %}
                      <span>{{ error }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {{ form.training_provider(class="form-control form-control-sm") }}
                {% endif %}
              </div>
              <div class="form-group form-grid">
                {{ form.date.label() }}
                {% if form.date.errors %}
                  {{ form.date(class="form-control form-control-sm is-invalid") }}
                  <div class="invalid-feedback">
                    {% for error in form.date.errors %}
                      <span>{{ error }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {{ form.date(class="form-control form-control-sm") }}
                {% endif %}
              </div>
              <div class="form-group form-grid">
                {{ form.cpd.label() }}
                {% if form.cpd.errors %}
                  {{ form.cpd(class="form-control form-control-sm is-invalid", placeholder="CPD Hours") }}
                  <div class="invalid-feedback">
                    {% for error in form.cpd.errors %}
                      <span>{{ error }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {{ form.cpd(class="form-control form-control-sm", placeholder="CPD Hours") }}
                {% endif %}
              </div>
              <div class="form-group form-grid">
                {{ form.certificate.label() }}
                {% if form.certificate.errors %}
                  {{ form.certificate(class="form-control form-control-sm is-invalid", style="padding-bottom:30px;") }}
                  <div class="invalid-feedback">
                    {% for error in form.certificate.errors %}
                      <span>{{ error }}</span>
                    {% endfor %}
                  </div>
                {% else %}
                  {{ form.certificate(class="form-control form-control-sm", style="padding-bottom:30px;") }}
                {% endif %}
              </div>
            </fieldset>
            <div class="form-group" >
              {{ form.submit(class="btn btn-outline-info") }}
              <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Close</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>

JavaScript Я пытался использовать, но не работал из-за ошибки (Uncaught TypeError: $ .post не является функцией - несмотря на то, что у меня jQuery) есть:

$('#submit').click(function(event) {
  event.preventDefault();
  var url = "{{ url_for('training.completed_training') }}";
  $.post(url, data=$('#modForm').serialize(), function(data) {
    if (data.status == 'ok') {
      $('#myModal').modal('hide');
      location.reload();
    }
    else {
      $('#myModal .modal-content').html(data);
    }
})
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...