--- layout: default nav: attributes > ic-action ---

## `ic-action` - The Action Attribute

### Summary

The `ic-action` attribute tells Intercooler to perform a client side action when the element is triggered via the normal triggering mechanism, against the specified target.

This attribute allows you to make modifications to the client-side DOM without a server request, while using the declarative mechansims of Intercooler.

### Syntax

The value of the `ic-action` attribute is a list of commands, separated by the semi-colon character.

Each command consists of a function name, followed by:

- Nothing, if there are no arguments to the function:

      // equivalent to $(elt).remove();

      <div ic-action="remove">Remove Me</div>

- A colon followed by an unquoted string, if there is a single string argument to the function:

      // equivalent to $(elt).toggleClass("example-class"), note the lack of quotes

      <div ic-action="toggleClass:example-class">Toggle Class</div>

- A comma separated list of arguments to the function (strings must be quoted in this form):

      // equivalent to $(elt).effect('highlight', {color: '#99ff99'}, 1500), note that quotes are required for strings

      <div ic-action="effect:'highlight', {color: '#99ff99'}, 1500">Highlight Green</div>

Valid commands are any jQuery method that can be invoked on the target element (e.g. `fadeOut`) as well as the special `delay` command. The `delay` command takes an argument specifying an amount of time to wait (a number with either with a 'ms' or 's' suffix) and will delay the execution of the immediately following command by the specified amount. This can be used, for example, to give a CSS transition time to complete before executing another action.

Each command will be executed with a 420ms delay between them, unless otherwise specified by a `delay` command. (420 milliseconds is a bit longer than the standard jQuery animation time.)

### Why Not Just Use jQuery handlers? Or `onclick`?

This command syntax allows you to execute client side code using a declarative syntax and leveraging the existing intercooler attributes (e.g. `ic-target`, `ic-confirm`, etc.)

It is more expressive than regular javascript, supporting linear, declarative commands, rather than requiring complex callback expressions or multiple calls to `setTimeout()`.

It does not handle all UX cases, of course, but does allow you to capture many common UI/UX needs using a small and simple syntax.

### AJAX Lifecycle Integrated Actions

There are four additional `action` attributes:

- `ic-beforeSend-action` `ic-success-action` `ic-error-action` `ic-complete-action`

These actions are fired during the jQuery AJAX life cycle.

### Dependencies

`ic-action` has no effect on dependencies.

### Examples

Here are some button examples of `ic-action` in, er, action:

- Fade out and then remove the button:
  Code: fadeOut;remove
- Remove the button:
  Code: remove
- Fade out the button quickly (100 means 100 milliseconds, when passed to the `fadeOut()` method) and then remove the button:
  Code: fadeOut:100;remove
- Add the `fadeMe` class to the button, wait 1 second for the CSS transition to complete (`addClass` does not provide a completion callback) and then remove the button:
  Code: addClass:fadeMe;delay:1s;remove
- Toggle the `btn-primary` class on the button:
  Code: toggleClass:btn-primary

Here's an example of `ic-beforeSend-action`; the other `ic-*-action` attributes work similarly:

- Fade out and then remove the button before sending POST request to update span:
  You haven't clicked yet...