I am working on an implementation of django-floppyforms, specifically the slider widget. However I cannot get it to display in my django web application. The native slider will work but the jQuery slider will not. The below image shows the problem.
The Error
> UserWarning: A {% csrf_token %} was used in a template, but the
> context did not provide the value. This is usually caused by not
> using RequestContext. warnings.warn("A {% csrf_token %} was used in
> a template, but the context did not provide the value. This is
> usually caused by not using RequestContext.")
This Question, this question, and this question all suggest making sure that the django.core.context_processors.csrf context processor is used, one of the solutions is to use RequestContext from django.template
As you can see below I have tried to implement it but it keeps giving me the same error.
Any ideas?
- Django==1.6.2
- django-floppyforms==1.2.0
views.py
def sview(request):
jquery_slider = Slider()
native_slider = SlideForm()
return render_to_response('slider_one.html', {
'jquery_slider': jquery_slider,
'native_slider': native_slider,
}, context_instance=RequestContext(request))
slider_one.html
{# slider.html #}
{% include "floppyforms/input.html" %}
<div id="{{ attrs.id }}-slider"></div>
<html>
<body>
<h1>This is your slider_one.html template</h1>
<script type="text/javascript" src="{{ STATIC_URL }}/js/jquery.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}/css/jquery-ui.min.css"></script>
<form action="" method="post">
{% csrf_token %}
{{ jquery_slider }}
{{ native_slider }}
<input type="submit" value="Submit" />
</form>
<script type="text/javascript">
$(document).ready(function() {
var type = $('<input type="range" />').attr('type');
if (type == 'text') { // No HTML5 support
$('#{{ attrs.id }}').attr("readonly", true);
$('#{{ attrs.id }}-slider').slider({
{% if value %}value: {{ value }},{% endif %}
min: {{ attrs.min }},
max: {{ attrs.max }},
step: {{ attrs.step }},
slide: function(event, ui) {
$('#{{ attrs.id }}').val(ui.value);
}
});
}
});
</script>
forms.py
import floppyforms as forms
class Slider(forms.RangeInput):
min = 5
max = 20
step = 5
template_name = 'slider_one.html'
class Media:
js = (
'/static/js/jquery.min.js',
'/static/js/jquery-ui.min.js',
)
css = {
'all': (
'/static/css/jquery-ui.css',
)
}
class SlideForm(forms.Form):
num = forms.IntegerField(widget=Slider)
def clean_num(self):
num = self.cleaned_data['num']
if not 5 <= num <= 20:
raise forms.ValidationError("Enter a value between 5 and 20")
if not num % 5 == 0:
raise forms.ValidationError("Enter a multiple of 5")
return num
EDIT:
I also have the below enabled in the MIDDLEWARE_CLASSES of my settings.py file
django.middleware.csrf.CsrfViewMiddleware'
