Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Sometimes our forms need special static files, CSS, images, or JavaScript, to make them work just the way we want.
We're pretty good at creating and
using forms.
0:00
Sometimes, though,
0:02
our forms aren't going to be just
the HTML that Django generates for us.
0:03
Or even the HTML we create for
ourselves with Djangos help.
0:07
Sometimes we're going to need to bring in
some outside libraries, JavaScript and
0:11
CSS, to give our forms and
extra bit of oomph and power.
0:14
Forms have a built in way of
adding assets to our page.
0:19
So let's go take a look at that and
make our answers a little easier to order.
0:22
So I said earlier that I wanted to
make it to where I could drag and
0:26
drop these in order to
be able to reorder them.
0:29
And so I'm gonna do that.
0:32
So a couple of things
that we're gonna use,
0:37
there's this really good
tutorial from Nicole Harris.
0:39
And I'll have links to all of these in
the teacher's notes about implementing
0:43
Django Formsets and she goes through
basically the stuff we've already done.
0:47
But she also uses this jQuery plugin,
which we're
0:52
also going to use,
that will do dynamic formsets.
0:57
You remember I mentioned before,
let's look at this real quick.
1:02
Inspect Element.
1:06
Look at this form.
1:09
Here we go.
1:12
So you see these inputs
here that are all hidden.
1:12
That's TOTAL_FORMS,
INITIAL_FORMS, MIN_NUM, MAX_NUM.
1:16
So these are the,
when we rendered our form.
1:20
[SOUND] Sorry I have to jump around so
much here.
1:25
When we rendered this management_form,
that's what those fields are.
1:28
And those have to be updated
to make Django happy.
1:31
So this little plugin here
handles that updating and
1:36
then we're gonna use this
sortable library from rubaxa.
1:41
That's just a nice little sortable and
1:47
we're gonna be using this for
the sorting, the drag and drop.
1:50
I'll have links to all this
in the teacher's notes, and
1:54
these things are already
inside of your workspace.
1:58
So we have this jQuery formset one here
and then down here we have these others.
2:01
And let's talk about how to use these,
because these belong to the courses app.
2:05
And we don't want to have
to put all of our media in
2:10
the HTML for our form page.
2:14
I mean, if the form uses the media,
2:19
the media should come with
the form is the way I see it.
2:22
So let's go back over here to forms.py,
and right now we have these two
2:26
forms for our true false and
our multiple choice.
2:31
Let's add.
2:36
Sorry, there we go.
2:41
Let's add a QuestionForm,
which is a ModelForm and
2:42
let's set the media on this and then we'll
make each of these be a QuestionForm.
2:47
So we set the media by defining
not class Meta, but class Media.
2:55
And then CSS is a dictionary,
3:00
because we can have all, screen,
print, that kind of stuff.
3:04
And we're gonna say that we
want courses/css/order.css.
3:09
And since that's a tuple,
we have to put a comma in there.
3:15
And then JavaScript, we don't have
any sort of screen all equivalent,
3:18
so these are just listed
as elements in a tuple.
3:24
So, we're gonna say,
3:27
courses/js/vendor/jquery.fn.sortable.min-
.js.
3:30
It's quite the name, and
courses/js/order.js.
3:36
Now these are inside of static courses and
then CSS or js.
3:42
But we just start with courses,
3:48
because Django knows how to find static
media through its static media finder.
3:50
And then we're gonna come down here and
change both of these to be QuestionForm.
3:55
And the main reason for
doing that is just so
4:06
that we don't have to repeat ourselves
over and over again on this.
4:08
Okay so the forms now have media but
we're not displaying the media anywhere.
4:11
So what we need to do is, well,
first of all let me show you something.
4:16
In this layout I've added
a couple of blocks.
4:21
One of which is block css, which appears
here at the end of all the CSS stuff.
4:23
And the other one down here at
the bottom is block javascript,
4:28
which appears down at the footer
with all the other javascript stuff.
4:31
So that way we can insert some CSS or
4:35
some JavaScript into our HTML
without having to do a lot of work.
4:38
So, in QuestionForm let's just do this
at the bottom cuz it doesn't matter.
4:45
Blocks can go anywhere.
4:50
Let's make a block css.
4:51
And inside here,
we're gonna do form.media.
4:56
And that would print out all the media.
5:01
But we just wanna print out
the css part of the media.
5:03
And then end that block.
5:07
And believe it or not, we want to do
the same thing for our JavaScript.
5:10
So, block javascript and
5:17
form.media.js.
5:23
And if you were paying attention earlier,
5:31
I talked about this
Django dynamic formset.
5:33
Now, that doesn't belong to our form.
5:35
That belongs to our formset.
5:38
And while I'm sure we could probably find
a way to specify media on our formset,
5:40
that's a little bit weird and
a little bit cumbersome.
5:44
So, wherever we're gonna
be using our formset,
5:47
we'll just go ahead and do the work there.
5:51
So we need to load static
from static files.
5:54
This is also why I didn't put the formset
ones into courses, I put it up here into
6:00
our site wide assets because you might
be using it on more than just courses.
6:04
If you find yourself using say the jQuery
sortable one on more than just courses,
6:09
you'd want to move it out as well.
6:13
So we're gonna load that and
then let's do a script tag,
6:16
src ="{% static
6:19
'js/vendor/jquery.formset.js'
6:24
%}".
6:33
And then we need to specify
some script tags period,
6:34
because we need to specify what to do.
6:40
So you remember we called
those forms answer-forms and
6:44
we say that that's a formset And
6:48
we want our addText attribute
to be be add answer.
6:52
And we want our deleteText attribute
to just be the word remove.
6:57
Okay, cool.
7:03
So there's our stuff.
7:04
So let's refresh this and
see what we've got.
7:07
Can I drag this?
7:11
I can, cool.
7:12
And if I let go, they should get numbered.
7:14
So if I want Emoji only to
appear up there blah blah blah.
7:17
We've got remove, so
I can remove these blank ones or
7:20
I can remove an existing one.
7:24
Let's Save and see what happens.
7:26
When we come back, oh,
it didn't actually remove it.
7:29
But you can see that we've changed
our order, which is great, and
7:33
then if we hit add answer,
it gives us another form to fill in.
7:38
So it's really nice being able
to do all these bits and pieces.
7:43
So you might have noticed before
when I hit remove on ASCII and
7:47
then hit Save, that ASCII is still there,
still hanging out.
7:52
So we need to go and change our view, so
7:57
what we're gonna do down here is we're
gonna say, we're not gonna go that far.
7:59
We're gonna say for
answer in answer_forms.deleted_objects.
8:05
Cuz deleted_objects is a list of objects
that have been chosen to be deleted.
8:14
Then we're gonna say answer.delete,
so delete that item.
8:18
So we're gonna go ahead and Save.
8:24
And then we're gonna come back over
here and we're gonna say remove again.
8:27
And we're gonna hit Save.
8:32
There we go.
8:34
And our question's updated and
ASCII has been removed.
8:35
So, awesome.
8:39
That required a few extra steps but
none of it was out of our league.
8:40
In fact, I'd say we're more than well
enough equipped to handle this and
8:44
just about any other situation
a form throws at us.
8:47
We only updated the answer formset on
the edit question page, but you should
8:50
probably go back and add similar UI
features to other parts of the app too.
8:54
So there you have it, forms in Django
are an amazingly versatile tool.
9:00
We can use them for validating data,
general purpose HTML forms, and
9:03
to provide a quick and easy way to edit or
create model instances.
9:07
Forms are used in lots of
internal places in Django too.
9:11
For example Django's admin
automatically creates forms for
9:15
you when you register a model with it.
9:17
You use these forms to update and create
your model instances as in the past.
9:20
You can even provide you own forms for
the admin to use.
9:24
And something we haven't talked about yet,
but Django's generic views,
9:29
will also auto-create forms for
you to use too.
9:32
You can look forward to
a course about those later on.
9:35
Django's forms are a great
addition to your Django toolbox.
9:39
And something I'm sure you'll find
yourself using in every project.
9:41
Thanks for learning with me and
I'll see you next time.
9:45
You need to sign up for Treehouse in order to download course files.
Sign up