#98 Inline editing attributes with Hotwire
05/12/2022
Free
Allow user to easily edit an attribute by just clicking on it!
This way you can have fewer full-page redirects; don't have to always render a full edit form.
5 years ago I would have used gem best_in_place for this, but now it can be easily achieved with turbo_frames!
Episode source code: https://github.com/corsego/98-hotwire-inline-edit-attributes/commit/1e6154863cff969bec5266add752a9d591f5a1a4
Text version: https://blog.corsego.com/hotwire-inline-edit-attributes
0:00 Inline editing problem
1:20 Edit single attribute inline
5:15 Edit any attribute individually
10:00 Link to edit empty value
10:35 Validations
11:40 Save by clicking outside
13:00 Optionally render whole edit form
2
Sign in to join the conversation
Current playlist
+28
Just enough Hotwire for Rails developers
#1
#59 Hotwire Turbo Streams CRUD
40:56
#2
#60 Hotwire Turbo Streams Autocomplete Search
27:28
#3
#63 Hotwire Modals (the right way)
21:15
#4
#65 Hotwire SPA: Flash Messages
27:34
#5
#66 StimulusJS: Targets, Values, Classes. Build a PRO dropdown
34:30
#6
#67 Streams: Infinite Scroll Pagination
18:06
#7
#68 Frames: Infinite Scroll Pagination
17:47
#8
#69 Frames + Streams: Infinite Scroll Pagination (Best approach)
08:40
#9
#70: Hotwire: Live form validations and previews
18:46
#10
#73 Hovercards with Hotwire Turbo Frames
14:03
#11
#75 ActsAsVotable: likes, bookmarks, hotwire, vote scopes, cached votes
52:20
#12
#80 Dynamic Forms with Turbo (not JS approach)
18:23
#13
#81 StimulusJS: Conditionally display form fields based on selected value
08:21
#14
#82 Chained Select Fields in a form. Gem City-State
22:56
#15
#84 Cookies Consent Banner
10:10
#16
#98 Inline editing attributes with Hotwire
14:38
#17
#99 Hotwire: Search and Infinite Pagination (Ransack with Pagy)
17:26
#18
#100 Browser tab title notifications
16:43
#19
#110 Realtime Online User Tracking with Actioncable, Kredis, Turbo Broadcasts
24:13
#20
#113 Kredis Live counter, HTTP vs Websocket Turbo Broadcasts
13:59
#21
#119 Trello Clone. Advanced Kanban Drag and Drop Sortable Lists with Hotwire
42:19
#22
#121 Turbo Broadcasts CRUD Demystified
24:20
#23
#143 Turbo Permanent: persist Audio Video and Search results while navigating pages
06:30
#24
#144 Why I am replacing Turbo Frames with Streams for ActsAsVotable?
09:17
#25
#148 DataTables without page refresh using Hotwire Turbo Frames
10:59
#26
#151 Advanced Hotwire modals
21:29
#27
#152 Custom Turbo Streams. How to redirect from a form that is inside a turbo frame?
20:37
#28
#153 Refactoring Hotwire Modals
10:03
#29
#156 Turbo 8 Morphing in real life
32:58
#30
#163 Instant page loads with Turbo 8 prefetch (aka InstantClick)
06:01
#31
#181 Search and Autocomplete French Company Information
00:00