Codejoy Codejoy - 4 months ago 23
jQuery Question

Django widgets for forms being ignored? (datepicker and tabindex on datefield and modelchoice)

I am trying to build a nice form and found some cool CSS for it, the form is looking good but a few of the fields (mostly one that comes from a choice field since the model has a foreignkey) and another that is from a datefield are totally being ignored. I was on stack overflow and using widgets I think correctly and it seems like my code is not working right and I see no errors in the developers console. The forms:

from django import forms
from .models import Group

class GroupForm(forms.ModelForm):
notes=forms.CharField(widget = forms.Textarea)
billing_address = forms.ModelChoiceField(queryset = '', widget=forms.Select(attrs={'tabindex':'5'}))
start_date = forms.DateField(widget=forms.TextInput(attrs=
{
'class':'datepicker',
'tabindex' : '6',
'placeholder' : 'Groups start date'
}))

class Meta:
model=Group
exclude = ['created_at', 'updated_at']


In my template view I have this:

<div class="col-2">
{{ form.billing_address.errors }}
<!-- {{ form.notes.label }}
{{ form.notes }} -->
<label>
Billing Address
{{ form.billing_address }}
</label>
</div>
<div class="col-2">
{{ form.mailing_address.errors }}
<!-- {{ form.notes.label }}
{{ form.notes }} -->
<label>
Mailing Address
{{ form.mailing_address }}
</label>
</div>
<div class="col-4">
<label>
Start Date
{{ form.start_date }}
</label>
</div>


Of course this template has a base.html with the links to I thought all the right css and js files:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">

<link href="{% static 'ipaswdb/css/styles.css' %}" type="text/css" media="all" rel="stylesheet">
<link href="{% static 'ipaswdb/css/switchery.min.css' %}" type="text/css" media="all" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">

<script type="text/javascript" src="{% static 'ipaswdb/js/switchery.min.js' %}"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="{% static 'ipaswdb/js/bootstrap.min.js' %}"></script>


This just doesn't work and the rendered source is here:

<label>
Billing Address
<select id="id_billing_address" name="billing_address">
<option value="" selected="selected">---------</option>
<option value="1">Las Cruces</option>
<option value="2">Albuquerque</option>
</select>
</label>
</div>
<div class="col-2">

<!-- Notes
<textarea cols="40" id="id_notes" maxlength="255" name="notes" rows="10">
</textarea> -->
<label>
Mailing Address
<select id="id_mailing_address" name="mailing_address">
<option value="" selected="selected">---------</option>
<option value="1">Las Cruces</option>
<option value="2">Albuquerque</option>
</select>
</label>
</div>
<div class="col-4">
<label>
Start Date
<input id="id_start_date" name="start_date" type="text" />
</label>
</div>


I am adding my views.py as well because I think I was on too many blogs and am using one way of doing things and was editing another way of doing things that is being completely ignored by my first way of doing the forms.

class GroupCreateView(CreateView):
model = Group

fields = '__all__'
exclude = ['created_at', 'updated_at']
template_name = 'ipaswdb/group/group_form.html'


And my urls.py

from django.conf.urls import url

from . import views
from ipaswdb.views import GroupCreateView

app_name = 'ipaswdb'
urlpatterns = [
url(r'group/$', views.group_list, name='group_list'),
url(r'group/(?P<group_id>[0-9]+)/$', views.group_detail, name='group_detail'),
url(r'group/add/$', GroupCreateView.as_view(), name='group-add'),

]


Not sure what I am missing, I thought I did everything right ?

EDIT: Datepicker in general was not working either because I didn't have the jquery-ui js file loading after jquery and I didn't have the javascript for finding the class and adding the datepicker to it. Did fix that after the form fix answer.

Answer

You need to update your view to use the form:

from .forms import GroupForm

class GroupCreateView(CreateView):
    model = Group
    form_class = GroupForm
    ...

Since you exclude the fields in the form, you can remove exclude from the view.