JSignature字段未出现在Django中

Question

第一次在网站上发帖，先道歉，因为我是新手。

在 Visual Studio 中为一个类构建一个 Django 项目，并且需要一个签名表单出现在其中一个页面上。 目前一直在关注本指南： https : //pypi.org/project/django-jsignature/但遇到了障碍，因为我只能在页面上显示一个保存按钮。 下面我列出了我所拥有的。

表格.py

from django import forms

...

from jsignature.forms import JSignatureField

from jsignature.widgets import JSignatureWidget

...

class SignatureForm(forms.Form):

    signature = JSignatureField()

模板.html

{% extends "app/layout.html" %}

{% block content %}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="utf-8" />

    <title></title>

</head>

<body>

    {{form.media }}

    <form action="." method="POST">

        {% for field in form %}

            {{ field.label_tag }}

            {{ field }}

        {% endfor %}

        <input type="submit" value="Save"/>

        {% csrf_token %}

    </form>

</body>

{% endblock %}

视图.py

from jsignature.utils import draw_signature

from app.forms import SignatureForm

...

def signature(request):

    assert isinstance(request, HttpRequest)

    return render(

        request,

        'app/template.html',

        {

            'title':'About',

            'message':'Your application description page.',

            'year':datetime.now().year,

        }

    )

def my_view(request):

    form = SignatureForm(request.POST or None)

    if form.is_valid():

        signature = form.cleaned_data.get('signature')

        if signature:

            #as an image

            signature_picture = draw_signature(signature)

            #or as a file

            signature_file_path = draw_signature(signature, as_file=True)

同样，当被带到我的模板页面时，所有填充的是一个单独的保存按钮。 我将其包含在我的布局 html 页面的正文中，因为我已经阅读过它可能是在页面上运行脚本的问题，但仍然没有运气。

<script src="ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

谁能指出我正确的方向？ 希望我提供了足够的信息。

Answer 1

我知道这很旧，但我刚刚安装了 django-jsignature 并且遇到了同样的问题。 我是 Django 的新手，想与那些也是 Django 新手并希望在他们的项目中使用 django-jsignature 的人分享解决方案。

有几件事你必须检查。

1. 首先，使用 Chrome，然后转到开发人员工具。 检查您的控制台，看看您是否有 Javascript 错误。 如果这样做，则必须修改 2 个文件。

您必须修改的 2 个文件可以在https://github.com/fle/django-jsignature/pull/11/commits找到

重新加载您的模板页面，看看您的页面上是否仍然存在 javascript 错误。 我正在使用 jQuery 核心 3.4.1。 这对我来说很好用，没有错误。 我已将 jquery 脚本链接放在我的 html 页面的头部部分。

删除所有其他 javascript 依赖项只是为了确保它们不冲突。

现在，如果您不再有 javascript 错误并且仍然没有签名板，请转到第 2 步。

2. 在 Chrome 中加载您的 html 模板并查看页面源代码。 在你应该有签名部分的地方，你应该在表单中看到一个“隐藏的”div。 这意味着表单在 html 中正确加载，但您的 CSS 可能导致此部分无法正确显示。

如果是这种情况，请尝试创建一个新模板并在其中包含 jsignature 模板代码，而无需任何 CSS 进行测试。

3. 如果您在单击“查看页面源代码”时未在签名模板 html 上看到“隐藏”div，则表示您的页面未正确呈现。

   一种。 在您的 views.py 上，确保在您的上下文中添加{'form': form } 。 该说明未包含在自述文件中。 示例： return render(request, 'your_signature_template.html', {'form': form }

   湾在您的 signature_template html 文件中，确保您的表单顶部有{{ form.media }} 。

Answer 2

完全按照 pypi 站点上 django jsignature 教程中的内容进行操作，只需确保模板的 head 标记中具有最新版本的 jquery。 并且不要忘记将签名表单的空实例传递给您的渲染方法到您的模板

我做了一个演示。 结帐https://djsign.herokuapp.com你可以在https://github.com/mnnlthmpsn/djsignature.git找到代码

Answer 3

我有同样的问题。 我通过更改放置{{ form.media }}位置来修复它。 文档说要将它放在表单上方，我改为将它插入到我所有其他 JS 导入的下方。

基本文件

.
.
.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"</script>
{% block extra_javascript %}{% endblock %}

表单模板.html

{% extends "base.html" %}
{% crispy form main_helper%}
{% block extra_javascript %}
   {{form.media}}
{% endblock %}

Answer 4

同样的问题，不同的解决方案：

我试图将符号字段嵌入到模式中，其中应该显示和签名 AGB。 事先我确保签名字段会在只使用 fle 的示例案例加上我自己的带有标题和侧边栏的基础时正确显示。 在那里，一切正常。

当尝试将其嵌入到另一个页面（无论是否处于模式中）时，Signaturefield 不会显示，但 DevTools (Chrome) 显示它已正确加载。

我看到该字段的大小属性是“高度”和“宽度”的“比率”，并将“高度”固定为 200 像素。 然后一切正常。

表格.py：

from django import forms
from .models import Signature
from jsignature.widgets import JSignatureWidget
from jsignature.forms import JSignatureField

class SignatureForm(forms.ModelForm):
    signature = JSignatureField(widget=JSignatureWidget(jsignature_attrs={'color': '#e0b642', 'height': '200px'}))
    class Meta:
        model = Signature
        fields = ['signature']