Question

我正在尝试使用AJAX以Bootstrap 4模式提交Django表单，但是由于某种原因它没有提交。当您单击“提交”按钮时，它仅关闭模式，而没有任何其他反应。内容至少可以正确显示在模式主体中，但不会提交。

这是我的观点

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

感谢您的帮助！

Answer 1

我相信对象已创建，但是您的form_valid不会返回到success_url。在form_valid的末尾，您应该重定向到success_url。我不明白您要在form_valid末尾返回时要达到什么目的。

def form_valid(self, form):
    ...
    return HttpResponseRedirect(self.get_success_url())

然后您还可以覆盖success_url并根据需要添加按摩。

def get_success_url(self):
    # add message
    messages.add_message(self.request, messages.SUCCESS, 'Your message.')

    # reverse back to providers' page with success message
    return reverse_lazy('engineering:gaas_wafer_design_list')

我已经为此类功能编写了一个易于使用的软件包，您可以在django-bootstrap-modal-forms上进行查看。

Django / Bootstrap Modal未提交

1 个答案: