I have been working on creating a stylish form and managed to find some interesting CSS to enhance it. The form is looking good, however, a couple of fields are not displaying correctly; particularly one that is associated with a choice field as the model has a foreign key, and another field that is a date field. I tried troubleshooting on Stack Overflow by using widgets, but it seems like my code is not functioning correctly, and there are no errors showing up in the developer's console. Below is my code:
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']
My template view consists of the following:
<div class="col-2">
{{ form.billing_address.errors }}
<label>
Billing Address
{{ form.billing_address }}
</label>
</div>
<div class="col-2">
{{ form.mailing_address.errors }}
<label>
Mailing Address
{{ form.mailing_address }}
</label>
</div>
<div class="col-4">
<label>
Start Date
{{ form.start_date }}
</label>
</div>
I have included all the necessary CSS and JS files in my base.html template:
<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>
Despite following all the correct steps, the form is not rendering as expected. The source code that gets rendered is shown below:
<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">
<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>
Additionally, I have included my views.py file below, as I suspect there might be some discrepancies in the way I'm handling the forms:
class GroupCreateView(CreateView):
model = Group
fields = '__all__'
exclude = ['created_at', 'updated_at']
template_name = 'ipaswdb/group/group_form.html'
Here's 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'),
]
I'm not sure what I'm missing here. Despite following the correct procedures, it seems like something is not functioning as intended. Any insights would be greatly appreciated.
EDIT: I realized that the datepicker was not functioning due to the incorrect loading order of the jQuery UI JS file after jQuery, and the missing JavaScript to assign the datepicker class. This has been fixed subsequent to the form correction.