Question

been scratching my head. I’ve followed the examples to use a jquery datepicker for my datefield in my form. Here are my code (note:indentation are correct in my code):

from django import forms
from django.contrib.admin.widgets import FilteredSelectMultiple
from myproject.customUsers.models import SchoolClass#,Student
from django.contrib.auth.models import User
from myproject.widgets import CalendarWidget

    class ConsentFormTpl(forms.Form):
        title =  forms.CharField()
        message = forms.CharField()
        deadline = forms.DateField(widget=CalendarWidget)
        availClass  = forms.ModelChoiceField(queryset=SchoolClass.objects.all(),empty_label="None")
        students = forms.ModelMultipleChoiceField(queryset=User.objects.filter(groups__name='Students'),widget=FilteredSelectMultiple("Students",is_stacked=False))

In my widgets file, I have:

class CalendarWidget(forms.DateInput):
    class Media:
        css = {
               'all':('css/ui-darkness/jquery-ui-1.8.9.custom.css',),
        }
        js = ('js/jquery-ui-1.8.9.custom.min.js',)

Finally in my template I use {{form.media}}. Strangely, the css and js files for CalendarWidget did not appear in my html. (the files for FilteredSelectMultiple are there). I checked through the shell it seems already:

>>> from django import forms
>>> from myproject.widgets import CalendarWidget
>>> class C(forms.Form):
...    title = forms.DateField(widget=CalendarWidget)
... 
>>> c=C()
>>> print c.media
<link href="http://xyz.com/media/css/ui-darkness/jquery-ui-1.8.9.custom.css" type="text/css" media="all" rel="stylesheet" />
<script type="text/javascript" src="http://xyz.com/media/js/jquery-ui-1.8.9.custom.min.js"></script>

template:

{% extends "base.html" %}
{% block content %}
<script type="text/javascript">

        $(document).ready(function(){
                //some stuff here
                        })

            }

            //When user change classes, load new set of students
            $("select#id_availClass").change(function(){
                getStud( $(this).val() );
            })

            $("#id_deadline").datepicker();

            // Loads initial set of students when form loads
            getStud(-1);

        })
</script>
<link rel="stylesheet" type="text/css" href="http://xyz.com/media/admin/css/base.css" />
<link rel="stylesheet" type="text/css" href="http://xyz.com/media/admin/css/forms.css" />
<script type="text/javascript" src="/admin/jsi18n/" />
<script type="text/javascript" src="/media/admin/js/core.js" />
{{ form.media }}
<form action="" method="post">{% csrf_token %}
    {{ form.as_p }}
    <input type="submit" name="yes" value="Submit" />
</form> {% endblock %}

Update:I managed to print the form media out before pushing it into render_to_response. The files are there!

form = ConsentFormTpl()
        print form.media

    return render_to_response('consent_form/consent_form2.html',{'form':form},context_instance=RequestContext(request))

Any pointers people?

Answer 1

Ah, thanks to @seitaridis, I managed to find out where my error was. I did not specify the doctype, and ` wasn’t allowed. Gosh, I am embarrassed by such a simple mistake.