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.

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>