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:

component extends="cbwire.models.Component" {

    data = {
        "name": "",
        "email": ""
    };

    function saveSettings() {
        // Logic to save the settings
    }

    function renderIt() {
        return template( "wires.profileSettings" );
    }
}

In your profileSettings view file (wires/profileSettings.cfm):

<form wire:submit="saveSettings">
    <input type="text" wire:model="name">
    <input type="email" wire:model="email">

    <button type="submit">Save Changes</button>

    <div wire:dirty>Unsaved changes...</div> 
</form>

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

You can invert the behavior of wire:dirty by using the .remove modifier:

<div wire:dirty.remove>Data is in-sync...</div>

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:

<form wire:submit="saveSettings">
    <input type="text" wire:model="name" wire:dirty.class="border-yellow-500">
    <div wire:dirty wire:target="name">Unsaved name changes...</div>

    <button type="submit">Update</button>
</form>

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:

<input wire:model="name" wire:dirty.class="border-yellow-500">

When the user types into this input field, a yellow border will appear, visually indicating that the changes have not yet been saved.