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.
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 %}
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.
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.
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.
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.
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
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']
Related
I am creating a website server program with Flask and Python, I am relatively new to Flask. I have created a html form with a Select tag (drop down menu, single select). You can see the code below.
selectmenu.html
<!doctype html>
<html>
<body>
<form id="form" method="POST" class="selectform">
<select method="GET" size=5>
{% for x in options %}
<option value="{{x}}" SELECTED>{{x}}</option>
{% endfor %}
</select>
<input type="submit" name="go"></input>
</form>
</body>
</html>
The Python code for Flask:
app.py
#app.route('/selectmenu',methods=(['GET','POST']))
def selmenu():
optionfiles = os.listdir('options')
form = selectform()
if request.method == 'POST':
selectedoption = form.selectedoption.data
print(selectedoption)
return redirect('/')
return render_template('selectmenu.html',options=optionfiles,form=form)
And finally the Python WTForms classes code forms.py:
class selectform(FlaskForm):
optionfiles = os.listdir('userdata')
print(optionfiles)
selectedoption = SelectField('selectdropdown', choices=optionfiles,validators=[DataRequired()])
submitbutton = SubmitField('submit',validators=[DataRequired()])
But when the program called form.selectoption.data it returns None every time.
I have tried many tutorials, and Stackoverflow answers, but still can't get data from the form that isn't None.
NOTE: As you can tell I have uploaded snippets only of the code, as the actual files are all a lot larger! If you need any other bits of the code, e.g: the imports, then please ask, but I am pretty sure the error isn't the imports, for example! Otherwise I would receive an ImportError.
Thank you in advance for your help!
After finding this Stackoverflow post I found the answer.
I needed to use give the <select> tag a name, like this: name="optionsbox" in the html file.
Then do request.form.get("optionsbox") in the app.py file, instead of form.selectedoption.data. No changes needed in the forms.py file.
It seems that you are using Flask-WTF (FlaskForm) but the way you write the html part is not compliant with it.
To confirm you can replace selectmenu.html by :
<!doctype html>
<html>
<body>
<form method="POST">
{{ form.selectedoption() }}
{{ form.csrf_token }}
{{ form.submitbutton(class_='btn btn-primary') }}
</form>
</body>
</html>
If it is the case you might have a look at https://flask-wtf.readthedocs.io/en/stable/quickstart.html and https://flask.palletsprojects.com/en/1.1.x/patterns/wtforms/#forms-in-templates (for the easy template).
(And return render_template('selectmenu.html',options=optionfiles,form=form) can be replaced by return render_template('selectmenu.html',form=form) )
I'm developing an internal application and I would like to be able to nest my views to keep everything nice and organized. I plan on doing this by keeping different parts of the page in their own HTML files with their own Views (separate sidebar and navbar, separate charts, etc).
views.py
from django.shortcuts import render
from django.views.generic import TemplateView
import Recall.data_logger.models as DLM
class ReportHome(TemplateView):
template_name = 'data_logger/index.html'
class SelectorSidebar(TemplateView):
template_name = 'data_logger/sidebar.html'
def get(self, request, *args, **kwargs):
companies = DLM.Company.objects.order_by('company_name').all()
return render(request, self.template_name, {'companies':companies,})
index.html
<html>
<head></head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row">
{% include 'data_logger/sidebar.html' %} <!-- This is the part I need help with-->
</div>
</div>
</body>
</html>
sidebar.html
<div class="col-sm-3 col-md-1 sidebar">
<ul class="nav nav-sidebar">
{% for company in companies %}
<li>{{ company.company_name }}</li>
{% endfor %}
</ul>
</div>
I understand that by just using {% include 'data_logger/sidebar.html' %} it's just loading the HTML and bypassing SelectorSidebar, how do I direct it through the View?
I'd like a solution that allows me to access anything from a simple list of names to relitively large datasets being fed into a D3 chart.
Solution
This is what I ended up using:
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"
integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"
crossorigin="anonymous"></script>
<script>
$.get("_sidebar", function(data, status){
$("#_sidebar").html(data);
});
</script>
</head>
<body data-gr-c-s-loaded="true">
{% include 'data_logger/navbar.html' %}
<div class="container-fluid">
<div class="row" id="_sidebar"></div>
</div>
</body>
</html>
Where _sidebar is the URL to SelectorSidebar:
urlpatterns = [
path('', v.ReportHome.as_view(), name='ReportHome'),
path('_sidebar', v.SelectorSidebar.as_view(), name='SelectorSidebar'),
]
I think you are making some confusion on how Django templates and views work together.
In very simple terms a Django template is what defines the HTML code that makes up a page. You can keep your templates very modular and organized; to do this you can use the include template tag or you can use template inheritance, which is a very powerful way to have "modular" templates.
A Django view is basically a function (or a class of you are using class based views) that receive an HTTP request and build an HTTP response.
It doesn't make much sense to have "nested" views because usually you have just one HTTP request and you want to build just a response with the HTML needed to display the page.
So I think that you can happily use Django templates to put together all the modules that make up your page (header, sidebar, etc.), but each page should correspond to a single Django view.
Another approach could use AJAX and Javascript to make different HTTP requests and build up the page client-side, but I think that this is not the approach you are considering here.
As #baxeico answered, you can't have multiple views to serve a page, because one HTTP request is one view.
If you have content that needs to appear on a lot of pages, like your sidebar, and that content also requires some context information to render (like a list of companies to fetch from the db), you have two options:
If the stuff required to add to the sidebar is fairly limited, create a template context processor that you add to the list of context processors in your settings (TEMPLATES setting).
def sidebar_context(request):
return {'companies': DLM.Company.objects.order_by('company_name').all()}
and in your settings, you'd add something like 'myapp.custom_contexts.sidebar_context' at the top of the list.
Now, every single template has access to the context variable companies, including your sidebar template.
If the stuff shown in the sidebar is more dynamic, or more complex, you should consider fetching the data from within the browser using AJAX. You would create a view that returns JSON instead of HTML and in your sidebar template add javascript to fetch the data and populate the sidebar.
The view is as simple as your current one:
def sidebar(request):
return JsonResponse({'companies': Company.objects.all().values('name', 'id')})
which will return a list of dicts containing name and id of each company. In your AJAX handler for the successful response (which receives the data), you can then loop through data and access data[i].name and data[i].id which you can use to populate your list.
I won't go as far as posting the full javascript (please search for jQuery, ajax and django) but here's a bit to give you an idea, assuming jQuery:
$(window).on('load', function() {
$.ajax({
url: "{% url 'sidebar' %}", // assuming this is inside a template, if not {% url %} won't work and you'll have to get it in a different way
success: function(data) {
if (data.length > 0) {
for (var i=0; i<data.length; i++) {
var elem = $("<li>" + data[i].name + "</li>")
$("#companies").append(elem)
}
}
})
})
I have a model that contains a filefield and am using a modelform to add instances. When I come to modify an instance the form shows the current file and displays the file path ie library/filename.
Is there a way to show just the filename in the form?
Thanks
I got around this by using javascript.
I added the following to my model..
def filename(self):
return os.path.basename(self.file.name)
Then added this into my javascript in my template
{% block javascript %}
<script>
{% if part.file %}
$('[href="{{ part.file.url }}"]').html("{{ part.filename }}");
{% endif %}
</script>
{% endblock %}
This changed the link to show just the filename
A FileField will use by default the FileInput widget that produces a <input type="file"> HTML tag. I don't think you can change the default "display full path" behaviour from Django, check this post.
However, you can customise things in your ModelForm like that:
class YourForm(ModelForm):
class Meta:
...
widgets = {
'your_file_attribute': FileInput(attrs={'html_attribute': value}),
}
I am trying to add a simple script to my admin's panel in django. I am following this example from the doc, which works when I do this:
class ArticleAdmin(admin.ModelAdmin):
class Media:
js = ("my_code.js",)
admin.site.register(Article, ArticleAdmin)
my_code.js (which lives in STATICFILES_DIRS) gets executed when I open the "Article" link in the admin's panel (so this would be the example url: localhost:8000/admin/news/article/)
However, I want it to be executed in the home site, as in right after I login to the admin's panel (this would be the url:localhost:8000/admin/) . Where do I have to insert the class Media then?
Are you trying to make your custom javascript appear on all admin pages? Then the best thing to do is to override the default admin templatte.
Look in your django installation and find django/contrib/admin/templates/admin/base.html make a copy of it in templates/admin in your project folder. Then simply add the following to the html.
<script scr="my_code.js" type="text/javascript"></script>
Then the js will be available on all admin pages.
I found another way which is overriding instead of replacing as explained in here.
If you place the file base.html into templates/admin:
{% extends "admin/base.html" %}
{% load static %}
{% block footer %}
{{ block.super }}
<script type="text/javascript" src="{% static 'my_code.js' %}"></script>
{% endblock %}
This will insert the script after the footer in the at localhost:8000/admin/.
Here I am "overriding" the base.html. But since I am using .super (explained here) it adds the script after the footer tag.
I have a model which uses source and destination fields and these are usually populated from a frontend template. Template has two form fields which are associated with Google map autocomplete APIs. But if I want to create a new object through admin panel, how can I integrate autocomplete API with add form's source and destination fields?
You can easily use something like https://github.com/ubilabs/geocomplete/ in django admin —
Override the change form template to include the required js:
{% load staticfiles %}
{% block extrahead %}{{ block.super }}
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/geocomplete/1.4/jquery.geocomplete.min.js"></script>
<script src="{% static 'path/to/your/js/geocomplete.js' %}"></script>
{% endblock %}
In your own js file:
$("#address_input").geocomplete();
Docs here on how to populate form using the library:
https://github.com/ubilabs/geocomplete/#populate-form-data
There is Django admin widget called django-location-field that does exactly what you ask. I use it in my projects.
https://github.com/caioariede/django-location-field