如何在django媒体表单上使用jquery

xuo3flqw  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(335)

我试图通过媒体元类在django表单上注入额外的javascript和jquery。
我将一个表单返回到create.html模板,并使用执行的js函数而不是jquery函数呈现ok。
模板的base.html:

...
{% block content %}
{% endblock %}
...
{% block javascript %}
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  ...
  <script type="text/javascript">
    console.log('base.html js');
  </script>
{% endblock javascript %}

create.html:

{% extends "base.html" %}
{% load static %}
{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    console.log('create.html js');
  </script>
{% endblock javascript %}
{% block content %}
  {% if form %}
    {{ form.media }}
    {% include 'form.html' %}
  {% endif %}
{% endblock content %}

form.html:

{% load static %}
{% block javascript %}
  {{ block.super }}
  <script type="text/javascript">
    console.log('create.html js');
  </script>
{% endblock javascript %}
...
{% for field in form %}
  {{ field|add_class:"form-control" }}
{% endfor %}

forms.py:

class PlaceForm(forms.ModelForm):
  class Media:
    js = (
        'js/custom_tag_widget.js',
    )

自定义标签小部件.js:

$(document).ready( function() {
  console.log('form media js');
});

我有此控制台输出,并显示一个错误:

form.html js
ReferenceError: $ is not defined
base.html js
create.html js

有人能帮我吗?提前谢谢。

jc3wubiy

jc3wubiy1#

似乎jquery没有正确加载。
我猜这是因为你的自定义js custom_tag_widget.js 之前加载 https://code.jquery.com/jquery-3.3.1.min.js .
检查网络中文件的顺序。
如果jquery在自定义js之后加载,则可以移动块 content 后挡 javascript 在html文件中

gudnpqoy

gudnpqoy2#

请查收 Network 选项卡,检查js文件是否返回404,以及 custom_tag_widget.js 这是正确的。
此外,项目中的静态配置可能不正确。
请查收https://docs.djangoproject.com/en/3.2/howto/static-files/

相关问题