Question

我在阅读器和 Book 模型之间创建了内联关系。我已成功将模板集导入模板中，但是无法通过单击以下脚本中与我的 addtext 属性相关的链接来创建新的Book表单。 换句话说，对于一个读者，我希望能够通过单击一个链接来创建一个以上的书本形式。

   <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="{% static 'jquery.formset.js' %}"></script>
    <script type="text/javascript">
      $('table.book tr.formset_row').formset({
          addText: 'Add new Book',
          deleteText: 'Delete',
          prefix: 'reader_book_set',
          animateForms: true
      });
    </script>

整个模板是这样的：

{% extends 'base.html' %}
{% load bootstrap3 %}
{% load static %}
<!-- Latest compiled and minified JavaScript -->


{% block content %}

<div class="col-md-12 text-center">
<h2>Create / Edit Reader </h2>
</div>

<hr>

<form class="well" method="post" action="">
{% csrf_token %}
{% bootstrap_form form %}

<table class="table book">
  {{ formset.management_form }}

  {% for form in formset.forms %}
      {% if forloop.first %}
          <thead>
          <tr>
              {% for field in form.visible_fields %}
                  <th>{{ field.label|capfirst }}</th>
              {% endfor %}
          </tr>
          </thead>
      {% endif %}
      <tr class="{% cycle row1 row2 %} formset_row">
          {% for field in form.visible_fields %}
              <td>
                  {# Include the hidden fields in the form #}
                  {% if forloop.first %}
                      {% for hidden in form.hidden_fields %}
                          {{ hidden }}
                      {% endfor %}
                  {% endif %}
                  {{ field.errors.as_ul }}
                  {{ field }}
              </td>
          {% endfor %}
      </tr>
  {% endfor %}
</table>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="{% static 'jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('table.book tr.formset_row').formset({
      addText: 'Add new Book',
      deleteText: 'Delete',
      prefix: 'reader_book_set',
      animateForms: true
  });
</script>

    {% buttons %}
      <button type="submit" class="btn btn-primary">
         Submit
      </button>
    {% endbuttons %}
</form>
<hr>

{{ form.media }}
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/base.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/widgets.css' %}"/>
<script type="text/javascript" src="/admin/jsi18n/"></script>
<script type="text/javascript" src="/static/admin/js/core.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/RelatedObjectLookups.js"></script>
<script type="text/javascript" src="/static/admin/js/vendor/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/static/admin/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/admin/js/actions.min.js"></script>
<script type="text/javascript" src="/static/admin/js/calendar.js"></script>
<script type="text/javascript" src="/static/admin/js/admin/DateTimeShortcuts.js"></script>

{% endblock %}

这是我的观点：

class ReaderBookCreateView(LoginRequiredMixin, CreateView):
    model = Reader
    fields = '__all__'
    template_name='test/test.html'

    def get_context_data(self, **kwargs):
        data = super(ReaderBookCreateView, self).get_context_data(**kwargs)
        if self.request.POST:
            data['formset'] = BookFormSet(self.request.POST)#bound the formset with data
        else:
            data['formset'] = BookFormSet()#empty formset
        return data

    def form_valid(self, form):
        context = self.get_context_data()
        formset = context['formset']
        with transaction.atomic():
            self.object = form.save()

            if formset.is_valid():
                formset.instance = self.object
                formset.save()
        return super(ReaderBookCreateView, self).form_valid(form)

    def get_success_url(self, **kwargs):
        return reverse('client_list')

这是它的外观。我想在“提交”按钮上方有一个链接添加新书，用于为当前读者创建新的书表单。

任何帮助将不胜感激。

Answer 1

在这些情况下，这通常是一个JavaScript问题。我解决了。我的项目找不到 jquery.formset.js 文件的路径。尝试调试javascript时，请始终使用F12。

如何通过单击链接来创建内联表单集中的新表单

1 个答案: