When we view an article in the admin area one of the options we have is to delete it.
Clicking on the delete link on this page takes us to another page where we can confirm that we want
to delete this article.
The delete button submits a form to the same page using the post method and when submitted using.
Post the article is deleted and were redirected back to the admen index.
Instead of going via this page to get confirmation we can do it in Javascript instead which will be
faster and therefore a better experience for the user.
First we need to identify this delete link elements on the article page so we'll add an I.D. attribute
to it.
Now we can add an event handler for when this link is clicked in the script file.
This says when the elements with the I.D. of delete article is clicked.
Run the code inside this function.
Now if I click the delete link nothing different happens.
Were taken to the Delete confirmation page as before.
The argument to this function represents the click event in the browser to replace the behaviour.
When this link is clicked we need to stop the original behaviour of the link which is to request the
page in the h ref attributes of the link.
We do this by calling the prevent default method on the Click event.
Now in the browser.
If I click the delete link nothing happens.
Next we want to show a confirmation dialogue.
We can do this with the Confirm function which shows a dialogue with this message and O K and cancel
buttons and returns true if O K was pressed and false.
Otherwise let's add a message for now if the message is confirmed.
Now if I click delete We get the confirmation dialogue which I can cancel and nothing happens.
If I click o k we see the alert message.
So instead of this message we want to request the delete article script using the post method so that
the article is deleted without showing this confirmation page.
We can't use the post method in the link element.
Only in a form.
So what we can do is create a farm on the fly and submit that we can do that in J query by first creating
a farm element.
Like this.
Then we can set the attributes of that farm.
First we'll set the method to be post using the attribute function.
Then we need to set the action attribute or where the form is submitted to to the Delete article script.
We can get this from the hcf attributes of the link.
We're clicking on.
In Jake Query we can get the current element by using the this keyword and using the attribute function
again to get the value of the hcf attribute.
Then we need to add this farm to the astm l. before we can submit it.
We can do that using the append to function appending it to the body element.
Finally we can submit the farm.
This is the equivalence of having a farm in h.t. a male with these attributes and clicking a submit
button.
Instead we've just created it dynamically in the browser and submitted it with code.
Let's give that a try.
If I click delete and click on okay to confirm that I want to delete this article we're redirected back
to the index page and the article has indeed been deleted.
For articles with images the option to delete the image also goes via a confirmation page.
This page works in the same way as the delete article page if it's submitted using post then the image
is deleted.
So if we add the click event handler to this link to.
The Javascript code we just wrote will work out Mattingly.
To identify the delete link in the article page.
We gave it a unique I.D. in the I.D. attribute only one element can have this value far in idae.
Let's change this to a class instead.
Multiple elements can have the same class.
We'll see more of this later on when we learn about stylesheets.
Let's add the same class to the Delete link on the edit article image page 2.
Then in our javascript code.
Instead of attaching this click event handler to the element.
With this idea if we change it to this this will run any time.
A link with the delete class is clicked.
Now if we edit the article image and click delete the confirmation is shown using javascript.
And if I click okay the image is removed and were redirected as expected.
So we haven't actually changed any P H P cold here.
The delete code still expects the post method but we've improved the user experience by showing the
confirmation using javascript instead of a full page in the browser.
And if the user has javascript turned off in their browser the other confirmation is still shown.