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...