Back to the Learning!

Laracasts is packed full with over 1,000 lessons just like this one.
Sign up to get full access or log in to your account and sit back.

Watch everything for $15/mo Log In

Let's Build A Forum with Laravel and TDD

Subscribe to Series

Ajaxifying the Delete Button

Episode 33 Run Time 4:22

Now that each reply is wrapped within a dedicated Vue instance, we can easily swap out the traditional form for deleting the reply with a snappier AJAX version that doesn't require a page refresh.

View the source code for this episode on GitHub.

Tags vue ajax

Publish Date: May 2, 2017

Previous Next

Looking for the archived Disqus comments?

01

Episode 1 Run Time 7:59

Initial Database Setup With Seeding
02

Episode 2 Run Time 9:26

Test-Driving Threads
03

Episode 3 Run Time 9:09

A Thread Can Have Replies
04

Episode 4 Run Time 17:39

A User May Respond to Threads
05

Episode 5 Run Time 5:14

The Reply Form
06

Episode 6 Run Time 6:13

A User May Publish Threads
07

Episode 7 Run Time 5:43

Let's Make Some Testing Helpers
08

Episode 8 Run Time 7:54

The Exception Handling Conundrum
09

Episode 9 Run Time 14:12

A Thread Should Be Assigned a Channel
10

Episode 10 Run Time 10:41

How to Test Validation Errors
11

Episode 11 Run Time 13:25

Users Can Filter Threads By Channel
12

Episode 12 Run Time 8:24

Validation Errors and Old Data
13

Episode 13 Run Time 3:00

Extracting to View Composers
14

Episode 14 Run Time 7:37

A User Can Filter All Threads By Username
15

Episode 15 Run Time 18:47

A Lesson in Refactoring
16

Episode 16 Run Time 9:19

Meta Details and Pagination
17

Episode 17 Run Time 11:51

A User Can Filter Threads By Popularity
18

Episode 18 Run Time 15:46

A User Can Favorite Replies
19

Episode 19 Run Time 7:37

The Favorite Button
20

Episode 20 Run Time 7:06

From 56 Queries Down to 2
21

Episode 21 Run Time 8:28

Global Scopes and Further Query Reduction
22

Episode 22 Run Time 12:32

A User Has a Profile
23

Episode 23 Run Time 14:07

A User Can Delete Their Threads
24

Episode 24 Run Time 10:28

Authorization With Policies
25

Episode 25 Run Time 16:37

How to Construct an Activity Feed with TDD
26

Episode 26 Run Time 16:21

How to Construct An Activity Feed with TDD: Part 2
27

Episode 27 Run Time 7:39

Extracting Controller Queries to the Model
28

Episode 28 Run Time 5:10

The Activity Deletion Bug
29

Episode 29 Run Time 13:59

Flash Messaging With Vue
30

Episode 30 Run Time 6:06

A User's Activity Feed Should Include Favorited Replies
31

Episode 31 Run Time 7:59

Authorized Users Can Delete Replies
32

Episode 32 Run Time 13:51

A Vue Reply Component
Episode 33 Run Time 4:22

Ajaxifying the Delete Button
34

Episode 34 Run Time 16:28

A Vue Favorite Component
35

Episode 35 Run Time 8:31

Squashing Bugs
36

Episode 36 Run Time 21:59

A More Data-centric Approach
37

Episode 37 Run Time 11:44

A New Reply Component
38

Episode 38 Run Time 31:02

Laravel and Vue Pagination
39

Episode 39 Run Time 12:52

A User Can Filter By Unanswered Threads
40

Episode 40 Run Time 10:53

Thread Subscriptions: Part 1
41

Episode 41 Run Time 6:17

Thread Subscriptions: Part 2
42

Episode 42 Run Time 15:12

Thread Subscriptions: Part 3
43

Episode 43 Run Time 25:30

Thread Subscriptions: Part 4
44

Episode 44 Run Time 6:15

Test Refactoring
45

Episode 45 Run Time 13:22

Thread Subscriptions: Part 5
46

Episode 46 Run Time 10:25

Refactoring for the Better or Worse?
47

Episode 47 Run Time 5:20

Notification Fakes in a Nutshell
48

Episode 48 Run Time 15:54

This Thread Has Been Updated Since You Last Read It
49

Episode 49 Run Time 11:08

Spam Detection
50

Episode 50 Run Time 8:52

Graduating Inspection Methods to Classes
51

Episode 51 Run Time 6:56

Spam Detection At All Ports
52

Episode 52 Run Time 10:16

Handling Server Exceptions with JavaScript
53

Episode 53 Run Time 7:20

Refactoring to Custom Validation
54

Episode 54 Run Time 15:10

A User May Not Reply More Than Once Per Minute
55

Episode 55 Run Time 12:03

Refactoring to Form Requests
56

Episode 56 Run Time 9:28

Mentioned Users Notifications: Part 1
57

Episode 57 Run Time 12:14

Mentioned Users Notifications: Part 2
58

Episode 58 Run Time 8:02

Don't Forget to Scan Your Files
59

Episode 59 Run Time 7:34

Wrap Usernames Within Anchor Tags
60

Episode 60 Run Time 13:19

Instant Username Autocompletion
61

Episode 61 Run Time 13:33

Instant Username Autocompletion: Part 2
62

Episode 62 Run Time 7:48

Basic View Tweaks
63

Episode 63 Run Time 13:50

Testing Avatar Uploads
64

Episode 64 Run Time 14:04

Testing Avatar Uploads: Part 2
65

Episode 65 Run Time 28:03

AJAX Image Uploads
66

Episode 66 Run Time 14:49

Trending Threads With Redis
67

Episode 67 Run Time 12:14

Isolating Knowledge
68

Episode 68 Run Time 9:10

Thread Views: Design #1 - Trait
69

Episode 69 Run Time 8:23

Thread Views: Design #2 - Extract Class
70

Episode 70 Run Time 7:50

Thread Views: Design #3 - KISS
71

Episode 71 Run Time 9:46

Users Must Confirm Their Email Address: #1 - Protection
72

Episode 72 Run Time 23:06

Users Must Confirm Their Email Address: #2 - Confirmation
73

Episode 73 Run Time 15:16

Users Must Confirm Their Email Address: #3 - Cleanup
74

Episode 74 Run Time 8:02

Email Confirmation Loose Ends
75

Episode 75 Run Time 7:25

A Thread Should Have a Unique Slug: Part 1
76

Episode 76 Run Time 11:44

A Thread Should Have a Unique Slug: Part 2
77

Episode 77 Run Time 13:29

We Need a Regression Test
78

Episode 78 Run Time 14:17

Mark the Best Reply: Part 1
79

Episode 79 Run Time 7:57

Mark the Best Reply: Part 2
80

Episode 80 Run Time 6:08

Refactoring Authorization
81

Episode 81 Run Time 10:48

Remembering a Best Reply
82

Episode 82 Run Time 11:08

Confusing Errors and Solutions
83

Episode 83 Run Time 6:40

Thread Authorization
84

Episode 84 Run Time 8:00

An Administrator May Lock Any Thread
85

Episode 85 Run Time 16:10

An Administrator May Lock Any Thread: Part 2
86

Episode 86 Run Time 11:16

An Administrator May Lock Any Thread: Part 3
87

Episode 87 Run Time 11:58

An Administrator May Lock Any Thread: Part 4
88

Episode 88 Run Time 9:30

From Laravel 5.4 to Laravel 5.5
89

Episode 89 Run Time 9:32

Recaptcha
90

Episode 90 Run Time 12:50

Recaptcha Refactoring
91

Episode 91 Run Time 13:34

A Thread Can Be Updated
92

Episode 92 Run Time 12:43

A Thread Can Be Updated: Part 2
93

Episode 93 Run Time 15:21

A Thread Can Be Updated: Part 3
94

Episode 94 Run Time 9:06

First Class Search: Scout Review
95

Episode 95 Run Time 18:10

First Class Search: Implementation
96

Episode 96 Run Time 5:00

First Class Search: Faceting and Ranking
97

Episode 97 Run Time 11:50

First Class Search: Instant Results
98

Episode 98 Run Time 11:02

First Class Search: Forum Integration
99

Episode 99 Run Time 15:28

WYSIWYG
100

Episode 100 Run Time 12:12

WYSIWYG: Part 2
101

Episode 101 Run Time 19:29

Sanitizing is a Must
102

Episode 102 Run Time 1:58

Onward

Back to the Learning!

Let's Build A Forum with Laravel and TDD

Ajaxifying the Delete Button

Initial Database Setup With Seeding

Test-Driving Threads

A Thread Can Have Replies

A User May Respond to Threads

The Reply Form

A User May Publish Threads

Let's Make Some Testing Helpers

The Exception Handling Conundrum

A Thread Should Be Assigned a Channel

How to Test Validation Errors

Users Can Filter Threads By Channel

Validation Errors and Old Data

Extracting to View Composers

A User Can Filter All Threads By Username

A Lesson in Refactoring

Meta Details and Pagination

A User Can Filter Threads By Popularity

A User Can Favorite Replies

The Favorite Button

From 56 Queries Down to 2

Global Scopes and Further Query Reduction

A User Has a Profile

A User Can Delete Their Threads

Authorization With Policies

How to Construct an Activity Feed with TDD

How to Construct An Activity Feed with TDD: Part 2

Extracting Controller Queries to the Model

The Activity Deletion Bug

Flash Messaging With Vue

A User's Activity Feed Should Include Favorited Replies

Authorized Users Can Delete Replies

A Vue Reply Component

Ajaxifying the Delete Button

A Vue Favorite Component

Squashing Bugs

A More Data-centric Approach

A New Reply Component

Laravel and Vue Pagination

A User Can Filter By Unanswered Threads

Thread Subscriptions: Part 1

Thread Subscriptions: Part 2

Thread Subscriptions: Part 3

Thread Subscriptions: Part 4

Test Refactoring

Thread Subscriptions: Part 5

Refactoring for the Better or Worse?

Notification Fakes in a Nutshell

This Thread Has Been Updated Since You Last Read It

Spam Detection

Graduating Inspection Methods to Classes

Spam Detection At All Ports

Handling Server Exceptions with JavaScript

Refactoring to Custom Validation

A User May Not Reply More Than Once Per Minute

Refactoring to Form Requests

Mentioned Users Notifications: Part 1

Mentioned Users Notifications: Part 2

Don't Forget to Scan Your Files

Wrap Usernames Within Anchor Tags

Instant Username Autocompletion

Instant Username Autocompletion: Part 2

Basic View Tweaks

Testing Avatar Uploads

Testing Avatar Uploads: Part 2

AJAX Image Uploads

Trending Threads With Redis

Isolating Knowledge

Thread Views: Design #1 - Trait

Thread Views: Design #2 - Extract Class

Thread Views: Design #3 - KISS

Users Must Confirm Their Email Address: #1 - Protection

Users Must Confirm Their Email Address: #2 - Confirmation

Users Must Confirm Their Email Address: #3 - Cleanup

Email Confirmation Loose Ends

A Thread Should Have a Unique Slug: Part 1

A Thread Should Have a Unique Slug: Part 2

We Need a Regression Test