При создании кода 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);
}
})
});