formset() is not a function, typeerror using jquery.formset.js

Question

I'm using jquery.formset.js to try and dynamically add and delete rows to my formset.

https://github.com/elo80ka/django-dynamic-formset

I'm getting an error in Chrome developer tools:

Uncaught TypeError: $(...).formset is not a function(…)

And I don't get why... Here is what my template looks like with my script defined at the bottom and link to jquery.formset.js.

{% extends 'project/base.html' %}
{% block title %}...{% endblock %}
{% load staticfiles %}

{% block content %}

<form id="time-form" method="POST" action="" class="dynamic-form" enctype="multipart/form-data">{% csrf_token %}
    <div style="overflow-x:auto; padding-bottom:0;">
        <table id="timesheet" class="tables">
            <tbody>
                <tr class="table-header">
                    <th>Date</th>
                    <th colspan="2">Description</th>
                </tr>
                    {{ time_formset.management_form }}
                    {% for form in time_formset %}
                        <tr class="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>
                                {% if forloop.last %}
                                    {% if form.instance.pk %}<td>{{ form.DELETE }}</td>{% endif %}
                                {% endif %}
                            {% endfor %}
                        </tr>
                    {% endfor %}
                </tbody>
        </table>
    </div>
    </br>
    <input type = "submit" id = "save" value = "Save">
</form>
<script type="text/javascript" src='/media/jquery.formset.js'></script>
<script type="text/javascript" src="{% static 'app/jquery.js' %}"></script>
<script src="{% static 'app2/jquery-ui/external/jquery/jquery.js' %}"></script>
<script src="{% static 'app2/jquery-ui/jquery-ui.js' %}"></script>
...
<script>
$(function() {

    //ERROR RAISED HERE//

    $('#time-form div table#timesheet tbody tr.formset_row').formset({
        prefix: '{{ time_formset.prefix }}'
    });

});
</script>

I've checked that the js file is linked okay with an alert on document ready which has worked fine. And I've checked the element $ exists and it returns true. I'm not sure what is going wrong here?

Note: my formset is an InLineFormSet

TimeFormSet = inlineformset_factory(TimeSheet, Time, form=TimeForm, extra=1, can_delete=True)

Help???

Answer 1

Try loading jQuery before the formset plugin.

<script type="text/javascript" src="{% static 'app/jquery.js' %}"></script>
<script type="text/javascript" src='/media/jquery.formset.js'></script>

Using /media/ for the plugin looks unusual, I expected to see the static tag the same as for app/jquery.js.