The first thing we're gonna need to do

is actually create a new application level JavaScript file.

So we'll go back over to our editor.

Go to our public directory, which is where our JavaScripts live.

And in here we'll have a foundation min.

We'll go ahead and add a new file.

We'll just call this app.js.

And so look in here we see we'll have

app.js, this is where we're going to put our code.

We're gonna also need to go into our layout and add that to the layout.

So, into our views, into our layouts, our main

layout, go to the very bottom, and you'll see here

we have our jQuery, our foundation, and so underneath that

we're going to do the same thing we've done before.

Which is HTML, script,

right, and then inside of our script we're gonna add our string.

So it's in the JavaScript folder and it's just called app.js.

So now that we've added it to our layout, we refresh our page,

and inspect the page.

Scroll down, we can see that we're looking for add app.js.

In our network, let's make sure it's loading the file.

Yep, there it is.

So, now we can add.

Close this and add our actual JavaScript.

So I'm going to paste in a bit of jQuery.

All right.

Now if you don't understand jQuery in full you can go take our jQuery

basics course which will be a great

introduction for all that you can see here.

So, basic overview, we're waiting until the document is

fully loaded, and we're gonna confirm every single destroy.

So we're looking for any form items, and will on the submit, we're gonna grab

the event and we're gonna interrupt it,

so we're gonna prevent the default from happening.

We're going to pull out the method which we

have a hidden field that has method in it.

And we're gonna get that value.

We're gonna store it to a method variable.

Inside we're gonna check that that method variable is defined,

so if it's not defined we don't wanna do anything.

And then if that method is set to delete.

So that says it's our delete method.

If we see a delete method come through in any form,

no matter what the case, we're going to say are you sure?

And if you're not sure, if you say no, then it's gonna prevent the default.

If you say, yes, it's going to continue and actually delete the record.

Let's make sure this is working for us now.

Refresh our page.

And let's try to delete our final list down here which says BOBO.

Destroy.

Now it pops up an alert that says, are you sure?

If we say, yes we are sure, it's gonna delete it.

If we do it again and say, destroy, and say

we're not sure or Cancel, it's not going to delete it.

Which is exactly what we want it to do.

All right.

So now we're going to move forward to finish up our

CRUD or create, read, update, and delete/destroy and refactor this a bit.

Because if you hit the create a new list you'll see we've got a form here.

List title, submit.

We go back and we hit the edit button.

You'll see we have a form that looks exactly the

same minus the text here saying update and this being populated.

So if you look at our code you'll actually see, we go to our forms.

We're gonna see that we have a create form and we have our edit form.

Now if we look at the two side by side they're very, very similar.

We don't really need all of this to be in two completely separate files.

So how can we find a way to combine this, to clean it up a little bit?

We're gonna do that by using blade and laravel

together to create form partials in our views folder.

So lets go ahead and do that now to try to tidy this up a little bit.

Let's start with editing our edit page.

So to get started using a partial to change our edit page, our edit form,

we're gonna create a file inside our to dos folder and we'll call it partials.

These are going to be all the partials related

to the to dos model, or to do lists model.

So in here we're going to make a new file and

we're going to call it _form.blade.php.

Now, you don't have to use underscore, that's just a construct that I like to

use that several other languages use for

partials or for showing that it's a partial.

So, now let's take and look at the comparison between these two forms.

So, we've got a little of change of here.

Not a lot.

Mostly in the form model or form open.

The name or the title item here in the label

and the text we're going to change to match the edit.

We're gonna make it all name throughout the entire project.

But for now, we're not gonna edit create, we're

gonna edit the edit page, so let's close create.

We're gonna grab out all the information here that is similar between

the two and we're gonna place that into our actual form partial.

Let's clean this up a little bit.

And then save it.

Now in here, we need a way to include our _form.blade.php into our model.

We're going to do that by using the blade command @include.

And then what we're going to include is our

partial, which is in the todos folder .partials folder.

And then the name of the file which is _form.

So, close this out.

And let's see if we can still get to our edit form.

Still looks the same.

Everything still works the same.

Let's see, just double check.

Okay, now it says My Listings.

Go back to edit.

Perfect.

That still looks good.

Now the next step for us is to change our create page.

This is gonna take a little bit more work, but to start with

we're only gonna need to include the exact same thing we had before.

So we'll go into our show, or excuse me, our create page.

We're gonna remove all of this out and

we're gonna paste it in includes partial form.

So if we're to do this we go back over and go back to our main page.

And then we're going to create a new list.

Everything here looks the same, but if we inspect the

element, you'll now notice that it's name instead of title.

So when we go back to our controller,

which is in our controllers folder.

To do list controller.

Now you're gonna see that when we go to

the store it's gonna be looking for title not name.

So let's let's update this so instead of title it says name.

So name.

We won't need to identify a column anymore.

We're also going to double check that our validators are okay.

This all looks good.

We don't use name title anymore.

We'll use name.

Save that with our index.

So that should all be good.

So, with those couple of changes, we should be

able to refresh the page and create a new list.

Okay.

So now we have created a new list.

This is great.

So, now we're able to go back and say, all right, now we have a simple create.

We have a simple edit, which is in our views.

All right.

And then @include todos.partials._form.

If we look in here, partials_form, any updates we

were to make here will actually show up in

both of our forms, which helps us take away

a repetition of four lines of code, which is great.

And in larger scale forms it's a huge, huge help.