title: Jquery in django : Uncaught TypeError: Cannot read property 'createDocumentFragment' of null
body: <p>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:
  <a href="https://i.stack.imgur.com/fozqo.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fozqo.jpg" alt="enter image description here" /></a></p>
  <p>The row where it throws the error is the following:
  <code>$('.formset_row').formset({</code></p>
  <p>And this is <a href="https://github.com/elo80ka/django-dynamic-formset" rel="nofollow noreferrer">the jquery plugin</a> that i used. This used to work perfectly until like yesterday when i probably touched something i shouldnt have.</p>
  <pre><code>    &lt;!-- Select2 JS --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js&quot;&gt;&lt;/script&gt;
  
      &lt;!-- Semantic UI --&gt;
      
     
      
      &lt;script src=&quot;https://code.jquery.com/jquery-3.6.0.slim.min.js&quot; integrity=&quot;sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/static/bootstrap/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
      &lt;!-- Select2 JS --&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;/static/js/script.js&quot;&gt;&lt;/script&gt;
      
      
      &lt;script&gt;
          /*$('body').on('focus',&quot;.my-date-picker&quot;, function(){
              $('.my-date-picker').datetimepicker({
                  format: 'DD/MM/YYYY',
                  ignoreReadonly: true,
                  showTodayButton: true
              });
          });*/
      &lt;/script&gt;
      &lt;script src=&quot;/static/formset/jquery.formset.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          $('.formset_row').formset({
              addText: '&lt;div style=&quot;color: #34C6AA;&quot; class=&quot;my-2 text-center&quot;&gt;&lt;span class=&quot;oi oi-plus&quot;&gt;&lt;/span&gt; Add Education&lt;/div&gt;',
              deleteText: '&lt;div style=&quot;color: #f4816e; text-decoration: none;&quot; class=&quot;my-2 text-center&quot;&gt; &lt;span class=&quot;oi oi-x&quot;&gt;&lt;/span&gt; Remove Education&lt;/div&gt; ',
              prefix: 'educations'
          });
      &lt;/script&gt;
  
  
  
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>EDIT1: As requested im sharing the code that uses the class formset</strong></p>
  <pre><code>{% extends '_base.html' %}
  {% load crispy_forms_tags %}
  {% load static %}
  
  
  
  {% block content %}
  &lt;/br&gt;
      &lt;h1 class=&quot;display-4 text-responsive&quot;&gt;Edit your education information&lt;/h1&gt;
  &lt;h3 class=&quot;display-6 text-muted&quot;&gt;This will be visible on your profile&lt;/h3&gt;
  &lt;p&gt;&lt;span style=&quot;color: #f4816e;&quot;&gt;IMPORTANT:&lt;/span&gt;&lt;/p&gt;
  &lt;ul&gt;
      &lt;li&gt;Leave the End Date field empty if you are currently enrolled in your school/university&lt;/li&gt;
  &lt;/ul&gt;
  &lt;hr&gt;    
  &lt;form method=&quot;POST&quot; action=&quot;&quot;&gt; 
      {% 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 #}
              
              
              &lt;div class=&quot;formset_row&quot;&gt;
              &lt;div class=&quot;row&quot;&gt;
                      
                      {% if forloop.first %}
                              {% for hidden in form.hidden_fields %}
                                  {{ hidden }}
                              {% endfor %}
                      {% endif %}
                      {% for field in form.visible_fields %}
                          
                              {% if field.name == &quot;start_date&quot; or field.name == 'end_date' %}
                                  {% if  field.name == 'end_date' %}
                                      &lt;div class=&quot;col-lg-2 col-sm-12 col-md-1&quot;&gt;
                                          {{ field.label }} 
                                          {{ field }} &lt;/br&gt;
                                          
                                      &lt;/div&gt;
                                  {% else %}
                                      &lt;div class=&quot;col-lg-2 col-sm-12 col-md-1&quot;&gt;
                                          {{ field.label }}
                                          {{ field }} &lt;/br&gt;
                                      &lt;/div&gt;
                                  {% endif %}
                              {% elif field.name != 'DELETE' %}
                                  &lt;div class=&quot;col-lg-4 col-sm-12 col-md-4&quot;&gt;
                                      {{ field.label }}
                                      {{ field }} &lt;/br&gt;
                                  &lt;/div&gt;
                              {% else %}
                                  {{ field }}
                              {% endif %}
                          
                          
                      {% endfor %}
              &lt;/div&gt;
              &lt;/div&gt;
          {% endfor %}
      
      &lt;div class=&quot;d-block d-sm-none &quot;&gt;
          &lt;input type=&quot;submit&quot; name=&quot;save_and_next&quot; value=&quot;Save and continue to next step&quot; class=&quot;btn btn-success btn-block&quot;&gt;
          &lt;input type=&quot;submit&quot; name=&quot;save_and_profile&quot;value=&quot;Save and go to profile&quot; class=&quot;btn btn-outline-info btn-block&quot;&gt;
          &lt;a href=&quot;{% url 'recruitment:update_coach_prof_exp' %}&quot; class=&quot;btn btn-light btn-block&quot;&gt;Skip step&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;d-none d-md-block &quot;&gt;
          &lt;input type=&quot;submit&quot; name=&quot;save_and_next&quot; value=&quot;Save and continue to next step&quot; class=&quot;btn btn-success&quot;&gt;
          &lt;input type=&quot;submit&quot; name=&quot;save_and_profile&quot;value=&quot;Save and go to profile&quot; class=&quot;btn btn-outline-info&quot;&gt;
          &lt;a href=&quot;{% url 'recruitment:update_coach_prof_exp' %}&quot; class=&quot;btn btn-light&quot;&gt;Skip step&lt;/a&gt;
      &lt;/div&gt;
  
      
  &lt;/form&gt;
  &lt;script&gt;
      $('body').on('focus',&quot;.my-date-picker&quot;, function(){
          $(this).datetimepicker({
              format: 'DD/MM/YYYY',
              ignoreReadonly: true,
              showTodayButton: true
          });
      });
  &lt;/script&gt;
  &lt;script src=&quot;{% static 'formset/jquery.formset.js' %}&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      $('.formset_row').formset({
          addText: '&lt;div style=&quot;color: #34C6AA;&quot; class=&quot;my-2 text-center&quot;&gt;&lt;span class=&quot;oi oi-plus&quot;&gt;&lt;/span&gt; Add Education&lt;/div&gt;',
          deleteText: '&lt;div style=&quot;color: #f4816e; text-decoration: none;&quot; class=&quot;my-2 text-center&quot;&gt; &lt;span class=&quot;oi oi-x&quot;&gt;&lt;/span&gt; Remove Education&lt;/div&gt; ',
          prefix: '{{ formset.prefix }}'
      });
  &lt;/script&gt;
  </code></pre>
  <p>{% endblock content %}</p>
  <p><strong>EDIT2: I added console.log(row) in the jquery plugin after insertDeleteLink = function(row) {</strong></p>
  <p><a href="https://i.stack.imgur.com/zBLZp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zBLZp.png" alt="enter image description here" /></a></p>
  <p><strong>EDIT3 : Added content of line 76 (and above) from jquery plugin</strong>
  <a href="https://i.stack.imgur.com/YsdO2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YsdO2.png" alt="enter image description here" /></a></p>
  <p><strong>FINAL EDIT</strong></p>
  <p><a href="https://i.stack.imgur.com/GeJMB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GeJMB.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>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 <code>formTemplate</code> property was <code>$.data</code> it didn't work. Now it's <code>null</code> and it works.</p>
  <p><strong>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.</strong></p>
  <p>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.</p>