Я пытаюсь отправить формы Django в модальности Bootstrap 4 с помощью AJAX, но по какой-то причине он не отправляется. Когда вы нажимаете кнопку «Отправить», он просто закрывает модальное окно, и больше ничего не происходит. Содержимое корректно отображается в модальном теле, по крайней мере, но оно просто не передает.
Вот мой взгляд
class GaasWaferDesignFormView(SuccessMessageMixin, AjaxTemplateMixin, CreateView):
template_name = 'engineering/gaas_wafer_designs/gaas_wafer_design_form.html'
ajax_template_name = 'engineering/gaas_wafer_designs/gaas_wafer_design_form_inner.html'
form_class = GaasWaferDesignForm
model = GaasWaferDesign
form = GaasWaferDesignForm()
success_url = reverse_lazy('engineering:gaas_wafer_design_list')
success_message = "Success!"
def form_valid(self, form):
object = form.save(commit=False)
object.created_by = self.request.user
object.save()
return super(GaasWaferDesignCreateView, self).form_valid(form)
А вот мой шаблон с модальной структурой и кнопкой для модальных (gaas_wafer_design_list.html) ...
{% extends "pages/list_template.html" %}{% load static from staticfiles %}
{% load widget_tweaks %}
{% block title %}GaAs Wafer Design List{% endblock %}
{% block list_title %}GaAs Wafer Designs{% endblock %}
{% block list_title_2 %}Design Inventory{% endblock %}
{% block extra_js%}
{% endblock %}
{% block buttons %}
<div class="btn-group" role="group" aria-label="Button group with nested dropdown" style="margin-bottom: -150px; z-index:1000;">
<button class="btn btn-secondary" data-toggle="modal" data-target="#form-modal" id="create-button">Create a new wafer design</button>
<div class="btn-group" role="group">
<a id="btnGroupDrop1" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
View
</a>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item" href="#">Recycling Bin</a>
</div>
</div>
</div>
{% endblock %}
{% block table %}
<div class="modal fade" id="form-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Add Wafer Design</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div id="form-modal-body" class="modal-body">
</div>
</div>
</div><!-- /.modal-dialog -->
</div>
<thead>
<tr>
<th>
Wafer Design UI
</th>
<th>
Emitting Type
</th>
<th>
Contact Location
</th>
<th>
Optical Power
</th>
<th>
Design Date
</th>
<th>
Designer
</th>
<th>
Designer UI
</th>
<th>
Created At
</th>
</tr>
</thead>
<tfoot>
<tr>
<th>
Wafer Design UI
</th>
<th>
Emitting Type
</th>
<th>
Contact Location
</th>
<th>
Optical Power
</th>
<th>
Design Date
</th>
<th>
Designer
</th>
<th>
Designer UI
</th>
<th>
Created At
</th>
</tr>
</tfoot>
<tbody>
{% for gaas_wafer_design in gaas_wafer_designs %}
<tr>
<td><a href="{% url 'engineering:gaas_wafer_design_detail' pk=gaas_wafer_design.pk %}">{{ gaas_wafer_design.design_ui }}</a></td>
<td>{{ gaas_wafer_design.get_emitting_display }}</td>
<td>{{ gaas_wafer_design.contact_location }}</td>
<td>{{ gaas_wafer_design.optical_power }}</td>
<td>{{ gaas_wafer_design.design_date|date:"m/d/y" }}</td>
<td>{{ gaas_wafer_design.designer }}</td>
<td>{{ gaas_wafer_design.designer_ui }}</td>
<td>{{ gaas_wafer_design.created_at }}</td>
</tr>
{% endfor %}
</tbody>
<script>
var formAjaxSubmit = function(form, modal) {
$(form).submit(function (e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function (xhr, ajaxOptions, thrownError) {
if ( $(xhr).find('.has-error').length > 0 ) {
$(modal).find('.modal-body').html(xhr);
formAjaxSubmit(form, modal);
} else {
$(modal).modal('toggle');
}
},
error: function (xhr, ajaxOptions, thrownError) {
// handle response errors here
}
});
});
}
$('#create-button').click(function() {
$('#form-modal-body').load('create/', function () {
$('#form-modal').modal('toggle');
formAjaxSubmit('#form-modal-body form', '#form-modal');
});
});
</script>
{% endblock %}
Вот мой URL ...
url(r'^gaas-wafer-designs/create/$', gaas_wafer_designs.GaasWaferDesignFormView.as_view(), name='gaas_wafer_design_create'),
И, наконец, вот мой gaas_wafer_design_form_inner.html (шаблон с модальным содержимым тела)
{% load widget_tweaks %}
<form method="post" action="{% url 'engineering:gaas_wafer_design_create' %}">{% csrf_token %}
<div class="row">
<div class="form-group col-sm-12">
<div class="form-group">
<label for="{{ form.design_ui.id_for_label }}"><b>Design UI</b></label>
{% render_field form.design_ui class+="form-control" %}
{{ form.design_ui.errors }}
</div>
</div>
</div>
<!--/.row-->
<div class="row">
<div class="form-group col-sm-4">
<div class="form-group">
<label for="{{ form.emitting.id_for_label }}"><b>Emitting</b></label>
{% render_field form.emitting class+="form-control" %}
{{ form.emitting.errors }}
</div>
</div>
<div class="form-group col-sm-4">
<div class="form-group">
<label for="{{ form.contact_location.id_for_label }}"><b>Contact Location</b></label>
{% render_field form.contact_location class+="form-control" %}
{{ form.contact_location.errors }}
</div>
</div>
<div class="form-group col-sm-4">
<div class="form-group">
<label for="{{ form.optical_power.id_for_label }}">Optical Power</label>
{% render_field form.optical_power class+="form-control" %}
{{ form.optical_power.errors }}
</div>
</div>
</div>
<!--/.row-->
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<input type="submit" class="btn btn-primary" value="Save changes" />
</form>
Спасибо за любую помощь, вы можете оказать!