For the life of me I can't figure out what's wrong with this code. It used to work in an earlier version and after I rearranged the javascript at the bottom of the page it just won't work properly. It keeps giving me this error:
The row where it throws the error is the following:
$('.formset_row').formset({
And this is the jquery plugin that i used. This used to work perfectly until like yesterday when i probably touched something i shouldnt have.
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<!-- Semantic UI -->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Select2 JS -->
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="/static/js/script.js"></script>
<script>
/*$('body').on('focus',".my-date-picker", function(){
$('.my-date-picker').datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
showTodayButton: true
});
});*/
</script>
<script src="/static/formset/jquery.formset.js"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: '<div style="color: #34C6AA;" class="my-2 text-center"><span class="oi oi-plus"></span> Add Education</div>',
deleteText: '<div style="color: #f4816e; text-decoration: none;" class="my-2 text-center"> <span class="oi oi-x"></span> Remove Education</div> ',
prefix: 'educations'
});
</script>
</body>
EDIT1: As requested im sharing the code that uses the class formset
{% extends '_base.html' %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
</br>
<h1 class="display-4 text-responsive">Edit your education information</h1>
<h3 class="display-6 text-muted">This will be visible on your profile</h3>
<p><span style="color: #f4816e;">IMPORTANT:</span></p>
<ul>
<li>Leave the End Date field empty if you are currently enrolled in your school/university</li>
</ul>
<hr>
<form method="POST" action="">
{% csrf_token %}
{{ formset.management_form }} {# This is necessary when using formsets #}
{% for form in formset %}
{{ form.media }} {# This shit is responsible for showing the datepicker #}
<div class="formset_row">
<div class="row">
{% if forloop.first %}
{% for hidden in form.hidden_fields %}
{{ hidden }}
{% endfor %}
{% endif %}
{% for field in form.visible_fields %}
{% if field.name == "start_date" or field.name == 'end_date' %}
{% if field.name == 'end_date' %}
<div class="col-lg-2 col-sm-12 col-md-1">
{{ field.label }}
{{ field }} </br>
</div>
{% else %}
<div class="col-lg-2 col-sm-12 col-md-1">
{{ field.label }}
{{ field }} </br>
</div>
{% endif %}
{% elif field.name != 'DELETE' %}
<div class="col-lg-4 col-sm-12 col-md-4">
{{ field.label }}
{{ field }} </br>
</div>
{% else %}
{{ field }}
{% endif %}
{% endfor %}
</div>
</div>
{% endfor %}
<div class="d-block d-sm-none ">
<input type="submit" name="save_and_next" value="Save and continue to next step" class="btn btn-success btn-block">
<input type="submit" name="save_and_profile"value="Save and go to profile" class="btn btn-outline-info btn-block">
<a href="{% url 'recruitment:update_coach_prof_exp' %}" class="btn btn-light btn-block">Skip step</a>
</div>
<div class="d-none d-md-block ">
<input type="submit" name="save_and_next" value="Save and continue to next step" class="btn btn-success">
<input type="submit" name="save_and_profile"value="Save and go to profile" class="btn btn-outline-info">
<a href="{% url 'recruitment:update_coach_prof_exp' %}" class="btn btn-light">Skip step</a>
</div>
</form>
<script>
$('body').on('focus',".my-date-picker", function(){
$(this).datetimepicker({
format: 'DD/MM/YYYY',
ignoreReadonly: true,
showTodayButton: true
});
});
</script>
<script src="{% static 'formset/jquery.formset.js' %}"></script>
<script type="text/javascript">
$('.formset_row').formset({
addText: '<div style="color: #34C6AA;" class="my-2 text-center"><span class="oi oi-plus"></span> Add Education</div>',
deleteText: '<div style="color: #f4816e; text-decoration: none;" class="my-2 text-center"> <span class="oi oi-x"></span> Remove Education</div> ',
prefix: '{{ formset.prefix }}'
});
</script>
{% endblock content %}
EDIT2: I added console.log(row) in the jquery plugin after insertDeleteLink = function(row) {
EDIT3 : Added content of line 76 (and above) from jquery plugin
FINAL EDIT
In the end I solved the problem by looking up a more recent fork of the plugin and just replacing the whole code. Upon merging it I was able to find out that the difference was in the jquery plugin settings.
I literally know nothing about jquery and I can't really give an explanation on why earlier it didn't work and now it does. What I can say is that in the plugin settings'second row, when the formTemplate property was $.data it didn't work. Now it's null and it works.
If someone can write here an explanation for myself and for others as to why this error appeared (and it kind of appeared out of nowhere) I will reward them the bounty.
This problem caused me a lot of distress, and even though now i've overcome it and I feel great relief, I still would like to understand a little better what happened so that I won't be caught off guard next time. Also I believe that many others will benefit from it as this specific plugin is being used by hundreds if not thousands of Django websites all over the web.