Wsrtjtyk

I created an inline relation between Reader and Book models.
I imported the formset in my template successfully but I can not create a new Book form by clicking a link related to my addtext attribute in the below script. In otherwords, for one Reader I want to be able to create more than one Book form by clicking a link.

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

The whole template is this:

{% 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 %}

Here is my view:

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')

Here is how it looks. I would like to have a link Add new Book above the submit button for creation of the new Book form for the current reader.

Any help will be appreciated.

It was as usual in these situations a javascript issue. I solve it.
My project could not found the path for jquery.formset.js file.
Use F12 always when you trying to debug javascript.