> For the complete documentation index, see [llms.txt](https://cbwire.ortusbooks.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cbwire.ortusbooks.com/3.x/essentials/actions.md).

# Actions

Methods that are invoked based on user interactions.

Actions are methods on your component that either change the component's state ( Data Properties ) or perform some action needed ( such as updating your database ).

Here is a basic example of how to use it:

```html
<cfscript>
    data = {
        "currentTime" : now()
    };
    
    function updateTime() {
        data.currentTime = now();
    }
</cfscript>

<cfoutput>
    <p>
        Current time: #currentTime#
    </p>
    <button wire:click="updateTime">Update</button>
</cfoutput>
```

{% hint style="info" %}
Actions do not need to return any value. Return values are ignored.
{% endhint %}

## Running Actions

CBWIRE listens for browser events and invokes actions using [Directives](/3.x/template-features/directives.md). The directives follow the format: **wire:\[browser event]=\[action]**.

Some examples of events you can listen for include:

| Event   | Directive    |
| ------- | ------------ |
| click   | wire:click   |
| keydown | wire:keydown |
| submit  | wire:submit  |

Here are a few examples of each in HTML:

```html
<button wire:click="doSomething">Do Something</button>

<input wire:keydown.enter="doSomething">

<form wire:submit.prevent="save">
    <button>Save</button>
</form>
```

You can listen for any browser events on elements by using the **wire:\[event]** directive, where \[event] is the event's name. For example, to listen for a "foo" event on a button element, you would use the following code:&#x20;

```html
<button wire:foo="someAction">
```

On some elements such as forms or links, you need to add a **.prevent** modifier to prevent the browser's default behavior. Otherwise, the browser will cause a page reload and you will get unintended results.

```html
<a href="" wire:click.prevent="doSomething">Do Something</a>
```

## Passing Parameters

You can pass parameters to your actions, such as here using **actionName( params )**.

```html
<cfoutput>
    <div>
        <button wire:click="addTask('Some Task')">Add Task</button>
    </div>
</cfoutput>
```

The parameter is then passed through to your [Actions](/3.x/essentials/actions.md) via function arguments.

```javascript
// Action
function addTask( taskName ){
    queryExecute( "
        insert into tasks (
            name
        ) values (
            :name
        )
    ", { name = arguments.taskName } );
}
```

## Magic Actions

There are a few magic actions already available to your components.

| Action                        | Description                                            |
| ----------------------------- | ------------------------------------------------------ |
| $refresh                      | Will re-render the component without firing any action |
| $set( 'dataproperty', value ) | Shortcut to update the value of a property             |
| $toggle( 'dataproperty' )     | Shortcut to toggle boolean properties off and on       |

Consider the example below.

```html
<cfscript>
    data = {
        "message": ""
    };
    
    function setMessageToHello() {
        data.message = "Hello";
    }
</cfscript>

<div>
    #message#
    <button wire:click="$set( 'message', 'Hello' )">Say Hi</button>
</div>
```

## Refresh

Sometimes you may need to force your component to completely refresh in the DOM. This is particularly true when you have nested components.

```html
<cfoutput>
    <div>
        <cfif showTeamForm>
            #wire( "TeamForm" )#
        <cfelse>
            <button wire:click="selectTeamForm">Show Team Form</button>
            #wire( "UserForm" )#
        </cfif>
    </div>
</cfoutput>
```

To force a refresh, simply call **refresh()** from any action on your component.

```javascript
<cfscript>
    data = {
        "showTeamForm": false
    };

    function selectTeamForm() {
        data.showTeamForm = true;      
        refresh(); // force a refresh
    }
</cfscript>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://cbwire.ortusbooks.com/3.x/essentials/actions.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.