ic-target - The Target Attribute

Summary

The ic-target attribute tells Intercooler the response from a request should be used to replace a different element than the current one. This is commonly used with action attributes, for example to make a button replace a div in the UI.

Syntax

The value of the ic-target attribute can be:

  • The string this, indicating that the element that the ic-target attribute is on is the target
  • The string closest followed by a valid CSS selector, indicating that the closest parent to the element satisfying the given CSS selector is the target (e.g. closest tr)
  • The string find followed by a valid CSS selector, indicating that the closest child satisfying the given CSS selector is the target (e.g. find .indicator-elt)
  • A valid global CSS selector

This attribute may be placed on parent elements, allowing you to specify behavior across multiple elements.

Dependencies

ic-target has no effect on dependencies.

Button Example

Here is a simple button that updates a div on click:

  <div id="target">0 Clicks</div>
  <button ic-post-to="/update" ic-target="#target">Update Div</button>
      

Note that the response to the button click is the content to swap in for the div, not the button.

0 Clicks

Input Example

Here is an example of an input that posts its input to the server to validate it, replacing the enclosing div (using standard Bootstrap error classes.)

  <div id="emailDiv">
    <div class="form-group">
      <label class="control-label">Enter Email:</label>
      <input type="text" class="form-control" name="email" ic-post-to="/verify_email" ic-target="#emailDiv">
    </div>
  </div>
Tab out of the input to trigger a post...