JSignature Field Not Appearing in Django

2k Views Asked by At

First time posting on the site, apologies before hand as I am a newbie.

Building a Django project in Visual Studio for a class and need a signature form to appear on one of the pages. Currently been following this guide: https://pypi.org/project/django-jsignature/ but have hit a roadblock as all I can get to show on the page is a save button. Below I've listed what I've got.

forms.py

from django import forms

...

from jsignature.forms import JSignatureField

from jsignature.widgets import JSignatureWidget

...

class SignatureForm(forms.Form):

    signature = JSignatureField()

template.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 %}

views.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)

Again, when taken to my template page all that populates is a lone save button. I included this in the body of my layout html page as I had read it could be an issue with running the script on the page but still no luck.

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

Can anyone point me in the right direction? Hopefully I have provided sufficient info.

4

There are 4 best solutions below

0
On

I had the same problem. I fixed it by changing where I put {{ form.media }}. Documentation says to put it above the form, I instead inserted it bellow all my other JS imports.

base.html

.
.
.

<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 %}

form-template.html

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

Follow exactly what's in the django jsignature tutorial on the pypi site and just make sure you have the latest version of jquery in the head tag of your template. And also dont forget to pass an empty instance of the Signature form to your render method through to your template

I made a demo. Checkout https://djsign.herokuapp.com And you can find the codes at https://github.com/mnnlthmpsn/djsignature.git

0
On

I know this is old, but I just installed django-jsignature and had the same issue. I am new to Django and would like to share the solution to those that are also new to Django and want to use django-jsignature in their project.

There are a few things you have to check.

  1. First, use Chrome, then go to Developer Tools. Check your console and see if you have Javascript errors. If you do, you have to modify 2 files.

The 2 files you have to modify can be found at https://github.com/fle/django-jsignature/pull/11/commits

Reload your template page, and see if you still have javascript errors on your page. I am using jQuery Core 3.4.1. and this is working great for me with no errors. I have placed the jquery script link on the head section of my html page.

Remove all other javascript dependencies just to make sure they are not conflicting.

Now if you no longer have javascript errors and you still don't have a signature pad, move to step 2.

  1. Load your html template in Chrome and View Page Source. On where you're supposed to have the signature section, you should see a "hidden" div with in the form. That means that the form loaded correctly in html, but your CSS may cause this section not to display correctly.

If that is the case, try creating a new template and just have the jsignature template code in it without any CSS just to test.

  1. If you do not see a "hidden" div on your signature template html when clicking on View Page Source, that means you're page did not render correctly.

    a. On your views.py, make sure you add {'form': form } in your context. This instruction was not included in the Readme. example: return render(request, 'your_signature_template.html', {'form': form }

    b. On your signature_template html file, make sure you have {{ form.media }} on top of your form.

0
On

Same Problem, different solution:

I tried to embed the sign-field in a modal, where AGBs should be shown and signed. Beforehand i made sure that the signaturefield would show up correctly when using nothing but the example-case by fle plus my own base with header and sidebar. There, everything was working allright.

When trying to embed it into another page (with or without being in a modal), the Signaturefield would not show up, but DevTools (Chrome) showed that it loaded correctly.

I saw the size properties of the field being "ratio" for "height" and "width", and fixed "height" to 200px. Then everything worked all right.

forms.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']