django 中的 Jquery：未捕获的类型错误：无法读取 null 的属性“createDocumentFragment”

Posted 2023-02-24

【中文标题】django 中的 Jquery：未捕获的类型错误：无法读取 null 的属性“createDocumentFragment”

【英文标题】：Jquery in django : Uncaught TypeError: Cannot read property 'createDocumentFragment' of null

【发布时间】：2021-06-18 21:34:36

【问题描述】：

在我的一生中，我无法弄清楚这段代码有什么问题。它曾经在早期版本中工作，在我重新排列页面底部的 javascript 后，它就无法正常工作。它一直给我这个错误：

它抛出错误的行如下： $('.formset_row').formset(

这是我使用的the jquery plugin。这曾经很完美，直到昨天我可能触摸了我不应该触摸的东西。

    <!-- 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：根据要求分享使用类表单集的代码

% 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 内容 %

EDIT2：我在 jquery 插件中在 insertDeleteLink = function(row)

之后添加了 console.log(row)

EDIT3：从 jquery 插件中添加了第 76 行（及以上）的内容

最终编辑

最后我通过查找插件的更新分支并替换整个代码解决了这个问题。合并后，我发现不同之处在于 jquery 插件设置。

我实际上对 jquery 一无所知，我无法解释为什么之前它不起作用而现在它起作用了。我能说的是，在插件设置的第二行中，当formTemplate 属性为$.data 时，它不起作用。现在是null，它可以工作了。

如果有人可以在这里为我自己和其他人解释为什么会出现这个错误（而且它是凭空出现的），我会奖励他们。

这个问题给我带来了很大的困扰，虽然现在我已经克服了，我也松了口气，但我还是想了解一下到底发生了什么，以免下次措手不及.此外，我相信许多其他人将从中受益，因为这个特定的插件正在被网络上数百个甚至数千个 Django 网站使用。

【问题讨论】：

你能给我们看看有formset_row类的元素的html吗

这直到昨天才给我带来任何问题。疯狂的是，我尝试恢复旧的提交，但它仍然无法正常工作。

Heyyyy .. uhh .. 有什么消息吗？这个无法解决的错误正在占据我的生活

查看您的模板代码，<div class="formset_row"> 被插入到formset 上下文对象中每个form 的模板中。因为 javascript 错误显示 'cannot read property ... of null' 这意味着 jquery 找不到任何类 formset_row 的 div。这意味着 formset 对象为空。这只是一个猜测，除非您可以在页面上实际看到您的表单

我确实可以看到页面上的表格！

【参考方案1】：

如您所说，将 formTemplate 属性设置为 null 会导致您的表单正常工作。

来自插件的文档：

formTemplate

使用它来覆盖被克隆的表单，每次创建一个新表单 实例已添加。如果指定，这应该是一个 jQuery 选择器。

通过设置此值，您通过加载模板覆盖了整个表单元素。这就是为什么你得到Cannot read property 'createDocumentFragment' of null 错误，jQuery 找不到.formset_row 元素，因为你通过用模板覆盖它来删除它。通过将formTemplate 属性设置为null，插件被指示使用已经存在的元素（也就是不覆盖已经存在的元素）而不是模板（也就是用模板覆盖已经存在的元素）。

我希望这能为您解决问题。 :D