wire:dirty
CBWIRE enriches form interactivity by managing real-time feedback on changes. The wire:dirty directive is particularly useful when you want to notify users that changes have been made to a form but have not yet been saved to the server.
Example: Profile Settings Update Notification
Consider a form used to update profile settings. The wire:dirty directive can be used to show an "Unsaved changes..." message, providing clear feedback to the user that their changes are not yet saved:
In your profileSettings view file (wires/profileSettings.cfm):
Here, the "Unsaved changes..." message is hidden by default and appears only when the user modifies the input fields. The message will disappear once the form is submitted and the data is synchronized with the server.
Removing Elements with .remove
.remove
You can invert the behavior of wire:dirty by using the .remove modifier:
This div will be visible by default and hide when the form becomes "dirty".
Targeting Specific Property Updates
In cases where you need to indicate unsaved changes for specific fields, you can combine wire:dirty with wire:target:
This setup shows an unsaved changes message specifically for the name field when it is modified.
Toggling Classes
Often, you might want to visually indicate changes by toggling CSS classes rather than showing or hiding elements. For example, to highlight an input field with a yellow border when it is dirty:
When the user types into this input field, a yellow border will appear, visually indicating that the changes have not yet been saved.
Last updated