3 |
3 | Any content that is returned will be used to replace the content of the current element (or, more commonly, another
2 | element, via the ic-target attribute, see below). An empty
3 | response will be interpreted as a No-Op. See Intercooler Responses for
4 | more info.
Since it is common for an action to replace a different element than the one that the action occured
7 | on, you may want to use the ic-target attribute to target
8 | a different element for replacement.
The default action depends on the type of an HTML element:
13 | 14 |input, select - A value change.form - A form submission.By default, intercooler uses POST's for all non-GET requests, due to older browser
23 | limitations. It includes the _method parameter and the X-HTTP-Method-Override headers
24 | that indicate the intended HTTP method, but some server-side infrastructure might not understand these conventions.
If you wish to use the actual HTTP method and forgo older browser support, you can use the following meta tag 27 | in your head tag:
28 | 29 |<meta name="intercoolerjs:use-actual-http-method" content="true"/>-------------------------------------------------------------------------------- /www/_layouts/blog.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: default 3 | --- 4 | 5 |
beforeAjaxSend.ic(event, settings) event, which allows programmers to modify the setting hash passed
13 | to `$.ajax()` to do thinks like add headers, set content type, remove parameters, etc.
14 |
15 | Full release notes are here:
16 |
17 | 
12 |
13 | ( A visual response to [/r/webdev/comments/4iphv4/12_year_of_progress/](https://www.reddit.com/r/webdev/comments/4iphv4/12_year_of_progress/) )
--------------------------------------------------------------------------------
/www/_posts/2016-5-24-twelve-html-attributes.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog_post
3 | nav: blog
4 | title: Twelve HTML Attributes
5 | ---
6 |
7 | This little live stock quote app was built using intercooler and SparkJava by some 8 | UCSC students I have been working with.
9 | 10 |It required only twelve intercooler attributes and two lines of javascript.
11 | 12 | 13 | 14 |The source for this app is here.
-------------------------------------------------------------------------------- /www/_posts/2016-6-24-intercooler-0.9.7-released.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: blog_post 3 | nav: blog 4 | --- 5 | 6 | I have released intercooler v0.9.7, available on the main site, as well as through bower. 7 | 8 |action attributes:
19 | * ic-action-beforeSend
20 | * ic-action-success
21 | * ic-action-error
22 | * ic-action-complete
23 |
24 | These actions are fired during the jQuery AJAX life cycle.
25 |
26 | Enjoy, and thanks for using intercooler!
27 |
28 | Carson / [@carson_gross](https://twitter.com/carson_gross)
--------------------------------------------------------------------------------
/www/_posts/2017-12-15-intercooler-1.2.1-released.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog_post
3 | nav: blog
4 | ---
5 |
6 | I have released intercooler v1.2.1, available on the main site, as well as through bower and NPM.
7 |
8 | once modifier to the ic-trigger-on
14 | attribute, to allow an event to trigger one and only one request.
15 | * Added the ic-transform-response attribute to
16 | allow transforming JSON responses from a server into HTML on the client side.
17 |
18 | * Fixed a bug that prevented ic-on-beforeTrigger from
19 | working properly
20 |
21 | Enjoy, and thanks for using intercooler!
22 |
23 | Carson / [@carson_gross](https://twitter.com/carson_gross)
--------------------------------------------------------------------------------
/www/_posts/2017-2-17-intercooler-1.1.0-released.md:
--------------------------------------------------------------------------------
1 | ---
2 | layout: blog_post
3 | nav: blog
4 | ---
5 |
6 | I have released intercooler v1.1.1, available on the main site, as well as through bower and NPM.
7 |
8 | This tutorial walks through the Angular JS 15 | tutorial and shows you the corresponding intercoolerjs concepts.
16 | 17 |To bootstrap intercooler, include the source from the download page.
19 | 20 |There are no injectors in intercooler.
22 | 23 |There are no scopes in intercooler.
25 | 26 |There are no templates in intercooler.
28 | 29 |There are no templates in intercooler.
31 | 32 |There are no models in intercooler.
34 | 35 |There are no controllers in intercooler.
37 | 38 |There are no modules in intercooler.
40 | 41 |There are no filtering repeaters in intercooler.
43 | 44 |There is no two-way data binding in intercooler.
46 | 47 |You don't need to deal with XHRs in intercooler.
50 | 51 |There is no dependency injection in intercooler.
52 | 53 |There is no prefix naming convention in intercooler.
56 | 57 |There are no minification issues in intercooler.
58 | 59 |There is no routing in intercooler.
62 | 63 |There is nothing special about multiple views in intercooler.
64 | 65 |There are no filters in intercooler.
68 | 69 |There is not a custom event mechanism in intercooler. Just use JQuery.
72 | 73 |There is nothing special about REST-ful end points in intercooler.
76 | 77 |There is no need for a custom services in intercooler.
78 | 79 |Use the ic-adding and ic-removing classes and CSS3 animations to specify an animation in intercooler.
That's it! You now know how Angular and intercooler compare with one another, and how to port 86 | an Angular application to intercooler!
87 | 88 |ic-action-target - The Action Target AttributeThe ic-action-target overrides the standard ic-target
16 | attribute when deciding what element to target with the ic-action
17 | attribute.
18 |
The value of the ic-action-target attribute can be:
this, indicating that the element that the ic-action-target attribute
25 | is on is the targetclosest followed by a valid CSS selector, indicating that the
27 | closest parent to the element satisfying the given css selector is the
28 | target (e.g. closest trfind followed by a valid CSS selector, indicating that the
30 | closest child satisfying the given css selector is the target (e.g. closest .indicator-eltThis attribute may be placed on parent elements, allowing you to specify behavior across 35 | multiple elements.
36 | 37 |ic-action-target has no effect on dependencies.
ic-add-class - The Add Class AttributeThe ic-add-class attribute allows you to add classes to an element after a specified delay.
The value of the attribute can be either a valid CSS class name, a valid CSS class name followed by a colon 20 | followed by a time delay, or a comma separated list of either of these.
21 | 22 |The ic-add-class attribute has no effect on dependencies.
Here is a simple example, which adds a 'fadeRed' class after 2 seconds and takes 10 seconds to 29 | complete the transition.
30 | 31 |32 | <h3 ic-add-class="fadeRed">This Will Fade Red</h3> 33 |34 | 35 | 41 |
ic-append-from - The Append From AttributeThe ic-append-from attribute binds a given HTML element's children to a URL. It does not
16 | cause any requests to happen by itself, but it can respond to events caused by other attributes.
When Intercooler issues a request for an element with an ic-append-from, it will issue a
19 | GET
20 | and will append the resulting HTML fragment as children of the current element. If you wish to limit the total
21 | number of children on of an element, you can use the ic-limit-children
23 | attribute.
The value of the attribute should be a valid relative path (e.g. ic-append-from="/foo/bar").
ic-append-from implies a dependency on its path, and Intercooler will issue requests for elements
32 | whenever it detects an action that the path depends on. See Dependencies for
33 | more information.
Here is a simple example, using a poll interval to update:
39 | 40 |41 | <ul ic-append-from="/list_src" ic-poll="2s" ic-limit-children="5"></ul> 42 |43 | 44 | 45 |
ic-attr-src - The Attribute Source AttributeThe ic-attr-src attribute binds a given HTML element's attribute to a URL. It does not cause any
16 | requests to happen by itself, but it can respond to events caused by other attributes.
When Intercooler issues a request for an element with an ic-attr-src, it will issue a GET
19 | and will replace the current element attribute value with resulting text fragment.
The value of the attribute should be a valid attribute name, followed by a colon, then a valid relative
24 | path
25 | (e.g. ic-attr-src="style:/foo/bar").
ic-attr-src implies a dependency on its path, and Intercooler will issue requests for elements
30 | whenever it detects an action that the path depends on. See Dependencies for
31 | more information.
Here is a simple example, using a poll interval to update:
36 | 37 |38 | <div ic-style-src="style:/style" ic-poll="1s">Cause you move to a different sound</div> 39 |40 | 41 | 42 |
ic-confirm - The Confirm AttributeThe ic-confirm attribute tells Intercooler to confirm the action with the user using the
16 | string of the attribute and the javascript confirm() function.
This can be useful when you want to confirm destructive operations, such as a delete.
19 | 20 |The value of the ic-verb attribute should be a string asking the user to confirm the given action.
23 |
This attribute may be placed on parent elements, allowing you to specify behavior across 26 | multiple elements.
27 | 28 |The ic-confirm attribute has no effect on dependencies.
35 | <button ic-post-to="/target_url" ic-confirm="Are you sure?">Click Me!</button> 36 |37 | 38 | 39 |
ic-delete-from - The Delete-To AttributeThe ic-delete-from attribute binds the default action (see below) of HTML element to a
16 | DELETE to the given URL. For example, on a button, when the button is clicked, an
17 | AJAX DELETE will be issued to the given URL.
The value of the attribute should be a valid relative path (e.g. ic-delete-from="/foo/bar").
ic-delete-from implies a dependency on its path, and Intercooler will issue requests for elements
28 | whenever it detects an action that the path depends on. See Dependencies for
29 | more information.
Here is a simple example, with a span that depends on the updated URL:
34 | 35 |36 | <button class="btn btn-lg btn-primary" ic-delete-from="/delete_me">Delete Me!</button> 37 |38 | 39 | 40 |
ic-deps - The Dependencies AttributeThe ic-deps attribute tells Intercooler that an element depends on a given path and should be
16 | updated if a change to that path is detected.
The value of the ic-deps attribute is a comma-separated list of paths that the element depends on.
21 | Note that the special single character "*" indicates that an element depends on all detected
22 | changed.
To disable dependencies on an element, you can use ic-deps="ignore"
ic-deps adds the dependencies it specifies to the element it is on.
Here is a simple element that depends on any changes:
33 | 34 |35 | <button ic-post-to="/path/1">Button 1</button> 36 | <button ic-post-to="/path/2">Button 2</button> 37 | <div ic-src="/src" ic-deps="*">0 Clicks</div> 38 |39 | 40 | 41 |
ic-disable-when-doc-hidden - Disable When Document Hidden AttributeThe ic-disable-when-doc-hidden attribute tells Intercooler to not to issue a given request if the
16 | document is currently hidden, as determined by the document.hidden property. This allows you to
17 | pause polling, for example, when a document is in an inactive tab, or the screen saver is running.
The value of the attribute should be true or false
ic-disable-when-doc-hidden has no dependency implications.
ic-disable-when-doc-inactive - Disable When Document Hidden AttributeThe ic-disable-when-doc-inactive attribute tells Intercooler to not to issue a given request if the
16 | document does not have focus, as determined by the document.hasFocus() property. This allows you to
17 | pause polling, for example, when a document is not focused. If you wish for polling to occur even if the window
18 | is inactive (but still potentially visible), consider using the
19 |
20 | ic-disable-when-document-hidden
21 |
22 | attribute instead.
The value of the attribute should be true or false
ic-disable-when-doc-inactive has no dependency implications.
ic-enhance - The Enhance AttributeThe ic-enhance attribute tells intercooler to enhance all anchor tags (links) and form tags
16 | found below the attribute, causing them to issue AJAX requests rather than their standard behavior.
For anchor tags this means that the href is copied over to ic-src, the
19 | ic-push-url attribute is set to true, and the ic-deps attribute
20 | is set to ignore so no dependent requests are generated for it.
Only local references will be enhanced. Anchor tags that point to other sites, or that reference fragment 23 | ids will not be modified.
24 | 25 |For form tags this means that the action is copied over to ic-src, the
26 | ic-verb attribute is set to method attribute, and the ic-deps attribute
27 | is set to false so no dependent requests are generated for it.
In both cases, intercooler attributes can be overridden or added directly to the element if you so wish.
30 | 31 |The value of the attribute should be true or false.
ic-enhance has no effect on dependencies.
45 | <div ic-enhance="true"> 46 | <h3>Here is an enhanced link</h3> 47 | <a href="/ic-enhance">A Link</a> 48 | </div> 49 |50 | 51 |
ic-fix-ids - The Fix IDs AttributeThe ic-fix-ids attribute tells Intercooler to replace the IDs of any added elements
16 | with globally unique IDs so that they don't conflict with any existing IDs on the page.
The value of the ic-fix-ids attribute should be "true", or it should be omitted entirely.
This attribute may be placed on parent elements, allowing you to specify behavior across 23 | multiple elements.
24 | 25 |ic-fix-ids attribute has no effect on dependencies.
ic-get-from - The Get-From AttributeThe ic-get-from attribute binds the default action (see below) of HTML element to a
16 | GET to the given URL. For example, on a button, when the button is clicked, an
17 | AJAX GET will be issued to the given URL.
The value of the attribute should be a valid relative path (e.g. ic-get-from="/foo/bar").
ic-get-from implies a dependency on its path, and Intercooler will issue requests for elements
28 | whenever it detects an action that the path depends on. See Dependencies for
29 | more information.
Here is a simple example, with a span that depends on the updated URL:
34 | 35 |36 | <button ic-get-from="/target_url" ic-target="#target-span"> 37 | Click Me! 38 | </button> 39 | 40 | <span id="target-span"> 41 | You haven't clicked yet... 42 | </span> 43 |44 | 45 | 46 |
ic-global-include - The Global Include AttributeThe ic-global-include attribute tells Intercooler to include additional parameters in
16 | all requests that it makes to the server, allowing you to pass up additional UI information to the server.
The value of the ic-global-include attribute can either be a CSS/JQuery element selector of elements
21 | to include in the request or a JSON object of name/value pairs to include. If it is a JSON object, it must
22 | satisfy the jQuery parseJSON() requirements.
This attribute may be placed on any element in the document and will be included with all intercooler requests.
25 | 26 |ic-global-include has no effect on dependencies.
In this example, the input specifies it should be included on all requests to the server.
33 | 34 |35 | <div ic-src="/update">Please Enter A Name...</div> 36 | 37 | <input id="name" name="name" ic-global-include="#name"/> 38 | 39 | <button ic-post-to="/update">Upload Name</button> 40 |41 | 42 |
Note that the response to the button click is the content to swap in for the div, not the button.
43 | 44 |ic-indicator - The Global Indicator AttributeThe global indicator attribute can be used to show an indicator while a request is in process. This 16 | indicator will be shown in addition to any local request indicators otherwise specified.
17 | 18 |The value of the attribute should be a valid selector of the indicator element to show, or
21 | false if you wish for an element to not show a global indicator specified on a
22 | parent element.
27 | <div ic-global-indicator="#indicator"> 28 | <button ic-post-to="/target_url" > 29 | Click Me! 30 | <i class="fa fa-spinner fa-spin ic-indicator" style="display:none"></i> 31 | </button> 32 | <br/> 33 | Global Indicator: <i id="indicator" class="fa fa-spinner fa-spin" style="display:none"></i> 34 | </div> 35 |36 | 37 | 38 |
ic-history-elt - The History ElementThe ic-history-elt attribute tells intercooler the element to take a snapshot of when storing
16 | history entries, as well as the element to restore history snapshots into.
Typically this attribute is placed on an element that is present on every page in your web application, so it 19 | is always possible to restore history.
20 | 21 |The value of this attribute should always be true
No effect.
28 | 29 |ic-include - The Include AttributeThe ic-include attribute tells Intercooler to include additional parameters in a request that
16 | it makes to the server, allowing you to pass up additional UI information to the server.
The value of the ic-include attribute can either be a CSS/JQuery element selector of elements
21 | to include in the request or a JSON object of name/value pairs to include. If it is a JSON object, it must
22 | satisfy the jQuery parseJSON() requirements.
This attribute may be placed on parent elements, allowing you to specify behavior across 25 | multiple elements.
26 | 27 |ic-include has no effect on dependencies.
In this example, the button includes the value of the input when it POSTs to the server.
34 | 35 |36 | <div ic-src="/update">Please Enter A Name...</div> 37 | <input id="name" name="name"/> 38 | <button ic-post-to="/update" ic-include="#name">Upload Name</button> 39 |40 | 41 |
Note that the response to the button click is the content to swap in for the div, not the button.
42 | 43 |ic-indicator - The Indicator AttributeThe indicator attribute can be used to show an indicator while a request is in process.
16 | 17 |The value of the attribute should be a valid selector of the indicator element to show
20 | 21 |You can also use the ic-indicator CSS class on elements within an element
22 | to specify an indicator.
This attribute may be placed on parent elements, allowing you to specify behavior across 25 | multiple elements.
26 | 27 |Normally request indicators are show via the $.show() function. If you wish to use a CSS
30 | transition instead, you can add the ic-use-transition class to the indicator instead. If
31 | this class is on the indicator, it will be removed while a request is in flight and then
32 | readded when the request is over.
Here is a simple example of an indicator next to a button:
39 | 40 |41 | <button ic-post-to="/target_url" ic-indicator="#indicator"> 42 | Click Me! 43 | </button> 44 | 45 | <i id="indicator" class="fa fa-spinner fa-spin" style="display:none"></i> 46 |47 | 48 | 49 |
Here is a simple example of an indicator next to a button that uses a CSS transition:
67 | 68 |69 | <button ic-post-to="/target_url" ic-indicator="#indicator"> 70 | Click Me! 71 | </button> 72 | 73 | <i id="indicator" class="fa fa-spinner fa-spin ic-use-transition"></i> 74 |75 | 76 | 77 |
ic-limit-children - The Limit Children AttributeThe ic-limit-children allows you to limit the number of children an element can have
16 | after a ic-append-from or ic-prepend-from fires.
The value of the attribute should be a valid integer.
21 | 22 |Here is a simple example, using a poll interval to update:
25 | 26 |27 | <ul ic-append-from="/list_src" ic-poll="2s" ic-limit-children="5"></ul> 28 |29 | 30 | 31 |
ic-local-vars - The Local Vars AttributeThe ic-local-vars attribute tells Intercooler to include parameters from localStorage
16 | in your intercooler requests. This can be used to maintain local state that is persistent and not encoded
17 | directly in the DOM.
The value of the ic-local-vars attribute is a comma separated list of string names that will be
22 | used to index into the localStorage object.
This attribute may be placed on parent elements, allowing you to specify behavior across 25 | multiple elements.
26 | 27 |Note that the X-IC-Set-Local-Vars response header can be used to write values into localStorage
ic-local-vars has no effect on dependencies.
In this example, the button includes a local variable when it POSTs to the server.
36 | 37 |38 | <button ic-post-to="/update" ic-local-var="foo">Upload Local Var</button> 39 |40 | 41 |
ic-on-beforeSend - JQuery AJAX Request life cycle attributeThis attribute is a javascript expression that will be evaluated before an AJAX request is initiated on behalf
16 | of Intercooler. It corresponds to the beforeSend property in JQuery's ajax() method.
17 |
This attribute is a valid javascript expression, evaluated within an isolated scope.
22 | 23 |This attribute may be placed on parent elements, allowing you to specify behavior across 24 | multiple elements.
25 | 26 |Available symbols are:
27 |data - The data to be send to the serversettings - The AJAX settings objectxhr - The XHR objectThe ic-on-beforeSend can be placed on an parent element, allowing general request processing
34 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
ic-on-beforeTrigger - JQuery AJAX Request life cycle attributeThis attribute is a javascript expression that will be evaluated before an AJAX request is initiated on behalf 16 | of Intercooler. It is evaluated before the normal intercooler trigger logic is executed. If the expression returns 17 | false, intercooler will not execute the triggered action. 18 |
19 | 20 |This attribute is a valid javascript expression, evaluated within an isolated scope.
23 | 24 |This attribute may be placed on parent elements, allowing you to specify behavior across 25 | multiple elements.
26 | 27 |Available symbols are:
28 |evt - The jQuery event objectelt - The element that was triggeredThe ic-on-beforeTrigger can be placed on an parent element, allowing general request processing
34 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
ic-on-complete - JQuery AJAX Request life cycle attributeThis attribute is a javascript expression that will be evaluated after an AJAX request is completed
16 | on behalf of Intercooler, regardless of status. It corresponds to the complete property in
17 | JQuery's ajax() method.
This attribute is a valid javascript expression, evaluated within an isolated scope.
22 | 23 |This attribute may be placed on parent elements, allowing you to specify behavior across 24 | multiple elements.
25 | 26 |Available symbols are:
27 | 28 |status - The AJAX status objectxhr - The XHR objectThe ic-on-complete can be placed on an parent element, allowing general request processing
34 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
ic-on-error - JQuery AJAX Request life cycle attributeThis attribute is a javascript expression that will be evaluated after an erroneous AJAX request is completed
16 | on behalf
17 | of Intercooler. It corresponds to the error property in JQuery's ajax() method.
This attribute is a valid javascript expression, evaluated within an isolated scope.
22 | 23 |This attribute may be placed on parent elements, allowing you to specify behavior across 24 | multiple elements.
25 | 26 |Available symbols are:
27 | 28 |status - Possible values (besides null) are "timeout", "error", "abort", and "parsererror"str - Textual portion of the HTTP status, such as "Not Found" or "Internal Server Error."xhr - The XHR objectThe ic-on-error can be placed on an parent element, allowing general request processing
35 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
ic-on-success - JQuery AJAX Request life cycle attributeThis attribute is a javascript expression that will be evaluated after a successful AJAX request is completed
16 | on behalf
17 | of Intercooler. It corresponds to the success property in JQuery's ajax() method.
This attribute is a valid javascript expression, evaluated within an isolated scope.
22 | 23 |This attribute may be placed on parent elements, allowing you to specify behavior across 24 | multiple elements.
25 | 26 |Available symbols are:
27 | 28 |data - The data to be send to the servertextStatus - The AJAX textStatusxhr - The XHR object
35 | Returning false from this expression will halt Intercooler's normal request processing and
36 | prevent content swapping.
37 |
The ic-on-success can be placed on an parent element, allowing general request processing
40 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
ic-patch-to - The Patch-To AttributeThe ic-patch-to attribute binds the default action (see below) of HTML element to a
16 | PATCH to the given URL. For example, on a button, when the button is clicked, an
17 | AJAX PATCH will be issued to the given URL.
The value of the attribute should be a valid relative path (e.g. ic-patch-to="/foo/bar").
ic-patch-to implies a dependency on its path, and Intercooler will issue requests for elements
28 | whenever it detects an action that the path depends on. See Dependencies for
29 | more information.
Here is a simple example, with a span that depends on the updated URL:
34 | 35 |36 | <button ic-patch-to="/target_url">Click Me!</button> 37 | 38 | <span ic-src="/target_url">You haven't clicked yet...</span> 39 |40 | 41 | 42 |
ic-pause-polling - The Pause Polling AttributeThe ic-pause-polling attribute tells Intercooler to not poll in the presence of an ic-poll
16 | attribute. This can be used to implement a Pause/Play UI.
The value of the attribute should be true or false
ic-pause-polling has no dependency implications.
Here is a simple Pause/Play UI that starts in a paused state, and can be started by clicking the play 29 | button:
30 | 31 |32 | <div ic-prepend-from="/poll" ic-poll="1s" ic-target="#content" ic-pause-polling="true"> 33 | <div> 34 | <div class="btn btn-default" ic-post-to="/play"><i class="fa fa-play"></i></div> 35 | <div class="btn btn-default" ic-post-to="/pause"><i class="fa fa-pause"></i></div> 36 | </div> 37 | <div id="content" ic-limit-children="5"> 38 | </div> 39 | </div> 40 |41 | 42 | 43 |
ic-poll-repeats - The Poll Repeats AttributeThe ic-poll-repeats attribute is used in conjuction with the ic-poll
16 | attribute. It tells Intercooler to repeat the poll up to a specified number.
The value of the attribute should a valid integer.
21 | 22 |ic-poll-repeats is only functional when using the ic-poll attribute.
Here is a simple example of a poll repeat:
29 | 30 |31 | <div ic-src="/seconds" ic-poll="2s" ic-poll-repeats="5">You have been on this page for 0 seconds...</div> 32 |33 | 34 | 35 |
ic-poll - The Poll AttributeThe ic-poll attribute tells Intercooler to poll the URL given by a ic-src
16 | attribute on a given interval.
The value of the attribute should a valid integer, followed by the string "s" (for seconds) or "ms" (for 21 | milliseconds). (e.g. ic-poll="100ms" indicates that the server should be polled every 100 milliseconds.)
22 | 23 |ic-poll has no dependency implications.
Here is a simple example of a poll interval:
30 | 31 |32 | <div ic-src="/seconds" ic-poll="2s">You have been on this page for 0 seconds...</div> 33 |34 | 35 | 36 |
ic-post-errors-to - The Post-Errors-To AttributeThe ic-post-errors-to attribute tells Intercooler to post all errors that occur during requests
16 | and content swapping to a given URL, typically for server side logging.
This attribute is typically specified on the body tag of your web application.
The value of the attribute should be a valid URL (e.g. "/errors").
ic-post-errors-to has no dependency implications.
Here is a simple example usage. All errors that occur within the body will be posted to the /errors
31 | url
34 | <body ic-post-errors-to="/errors"> 35 | ... 36 | </body> 37 |38 | 39 | 40 |
ic-post-to - The Post-To AttributeThe ic-post-to attribute binds the default action (see below) of HTML element to a
16 | POST to the given URL. For example, on a button, when the button is clicked, an
17 | AJAX POST will be issued to the given URL.
The value of the attribute should be a valid relative path (e.g. ic-post-to="/foo/bar").
ic-post-to implies a dependency on its path, and Intercooler will issue requests for elements
28 | whenever it detects an action that the path depends on. See Dependencies for
29 | more information.
Here is a simple example, with a span that depends on the updated URL:
34 | 35 |36 | <button ic-post-to="/target_url">Click Me!</button> 37 | 38 | <span ic-src="/target_url">You haven't clicked yet...</span> 39 |40 | 41 | 42 |
ic-prepend-from - The Prepend From AttributeThe ic-prepend-from attribute binds a given HTML element's children to a URL. It does not
16 | cause any requests to happen by itself, but it can respond to events caused by other attributes.
When Intercooler issues a request for an element with an ic-prepend-from, it will issue a
19 | GET
20 | and will prepend the resulting HTML fragment as children of the current element. If you wish to limit the total
21 | number of children on of an element, you can use the ic-limit-children
23 | attribute.
The value of the attribute should be a valid relative path (e.g. ic-prepend-from="/foo/bar").
ic-prepend-from implies a dependency on its path, and Intercooler will issue requests for elements
32 | whenever it detects an action that the path depends on. See Dependencies for
33 | more information.
Here is a simple example, using a poll interval to update:
39 | 40 |41 | <ul ic-prepend-from="/list_src" ic-poll="2s" ic-limit-children="5"></ul> 42 |43 | 44 | 45 |
ic-prompt - The Prompt AttributeThe ic-prompt attribute tells Intercooler to prompt the user for input before issuing an AJAX
16 | request. The input is included in the ic-prompt-value parameter of the request. If you wish
17 | to change this, you can use the ic-prompt-name attribute to override it.
If the user cancels the prompt, no request will be made.
20 | 21 |The value of the ic-prompt attribute should be a string prompting the user for input.
This attribute may be placed on parent elements, allowing you to specify behavior across 26 | multiple elements.
27 | 28 |The ic-prompt attribute has no effect on dependencies.
35 | <button ic-post-to="/target_url" ic-prompt="What's your name?">Click Me!</button> 36 |37 | 38 | 39 |
ic-push-params - The Push Parameters AttributeThe ic-push-parameters attribute tells intercooler to push additional parameters along with
16 | the url when the ic-push-url parameter is used.
This can be useful if you want to include parameters in the URL in the navigation bar, such as the search 19 | term in a search dialog.
20 | 21 |The value of this attribute is a comma separated list of names of parameters to push in the URL
24 | 25 |This attribute may be placed on parent elements, allowing you to specify behavior across 26 | multiple elements.
27 | 28 |No effect.
31 | 32 |Here is a simple example, which pushes an input value called example when
35 | the form submits
38 |39 | 40 | 41 |
ic-push-url - The Push URL AttributeThe ic-push-url attribute tells intercooler to push the location of the ajax request associated
16 | with the current element into the location bar.
This can be useful if you want to support the back button after an intercooler request replaces some content 19 | on a page.
20 | 21 |The value of this attribute can be either true or false
This attribute may be placed on parent elements, allowing you to specify behavior across 26 | multiple elements.
27 | 28 |No effect.
31 | 32 |ic-put-to - The Put-To AttributeThe ic-put-to attribute binds the default action (see below) of HTML element to a
16 | PUT to the given URL. For example, on a button, when the button is clicked, an
17 | AJAX PUT will be issued to the given URL.
The value of the attribute should be a valid relative path (e.g. ic-put-to="/foo/bar").
ic-put-to implies a dependency on its path, and Intercooler will issue requests for elements
28 | whenever it detects an action that the path depends on. See Dependencies for
29 | more information.
Here is a simple example, with a span that depends on the updated URL:
34 | 35 |36 | <button ic-put-to="/target_url">Click Me!</button> 37 | 38 | <span ic-src="/target_url">You haven't clicked yet...</span> 39 |40 | 41 | 42 |
ic-remove-after - The Remove After AttributeThe ic-remove-after attribute tells Intercooler to remove the element it is on after a given
16 | interval.
The value of the attribute should a valid integer, followed by the string "s" (for seconds) or "ms" (for 21 | milliseconds). (e.g. ic-remove-after="1500ms" indicates that the element should be removed after 1500 milliseconds.)
22 | 23 |ic-remove-after has no dependency implications.
Here is a simple example of a span removal:
30 | 31 |32 | <a ic-post-to="/remove_after" ic-target="#flash-span">Click Me!</a> <span id="flash-span"></span> 33 |34 | 35 | 36 |
ic-remove-class - The Remove Class AttributeThe ic-remove-class attribute allows you to remove classes from an element after a specified delay.
The value of the attribute can be either a valid CSS class name, a valid CSS class name followed by a colon 20 | followed by a time delay, or a comma separated list of either of these.
21 | 22 |The ic-remove-class attribute has no effect on dependencies.
Here is a simple example, which removes an 'icRed' class after 2 seconds and takes 10 seconds to 29 | complete the transition.
30 | 31 |32 | <h3 class="example icRed" ic-remove-class="icRed:2s">This Will Fade Red</h3> 33 |34 | 35 | 43 |
ic-replace-target - The Replace Target AttributeThe ic-replace-target attribute tells Intercooler the target element of the intercooler request
16 | should be replaced entirely with the server response, rather than replacing the inner HTML of the target.
This is useful in cases where you cannot wrap an element around a potential target easily, such as 19 | table rows.
20 | 21 |The value of the ic-target attribute should be "true", or it should be omitted entirely.
This attribute may be placed on parent elements, allowing you to specify behavior across 26 | multiple elements.
27 | 28 |ic-replace-target has no effect on dependencies..
Here is a simple button that replaces an entire div, rather than just the content in the div. 35 | You can tell by the lack of border afterwards.
36 | 37 |38 | <div id="target" style="border: 1px solid red">Before</div> 39 | <button ic-post-to="/update" ic-target="#target" ic-replace-target="true">Update Div</button> 40 |41 | 42 |
Note that the response to the button click is the content to swap in for the div, not the button.
43 | 44 |ic-scroll-offset - The Scroll Offset AttributeThe ic-scroll-offset attribute tells Intercooler to apply an offset when scrolling to a given target.
16 | This can be useful when you need an element to be positioned offest from the top of the viewport when using
17 | the ic-scroll-to-target attribute.
The value of the attribute should a valid integer
22 | 23 |ic-scroll-offset has no dependency implications.
ic-scroll-to-target - The Scroll To Target AttributeThe ic-scroll-to-target attribute tells Intercooler to scroll the top of the target element
16 | into the viewport, if it is not visible. This can be paired with the ic-scroll-offset attribute
17 | to fine tune exactly what position is scrolled to.
The value of this attribute can be either true or false
ic-scroll-to-target has no dependency implications.
ic-select-from-response - The Response Selector AttributeThe response selector attribute can be used to select the element to take the inner HTML from in a 16 | a server response.
17 | 18 |The value of the attribute should be a valid selector of the element to take the content from.
21 | 22 |This attribute may be placed on parent elements, allowing you to specify behavior across 23 | multiple elements.
24 | 25 |Here is a simple example of a response selector filtering a full HTML document for a list:
28 | 29 |ic-src - The Source AttributeThe ic-src attribute binds a given HTML element to a URL. It does not cause any requests to happen
16 | by itself, but it can respond to events caused by other attributes, such as
17 | ic-poll or
18 | ic-post-to.
When Intercooler issues a request for an element with an ic-src, it will issue a GET
21 | and will replace the current elements content with resulting HTML fragment, if it is different than the
22 | current content.
The value of the attribute should be a valid relative path (e.g. ic-src="/foo/bar").
ic-src implies a dependency on its path, and Intercooler will issue requests for elements
31 | whenever it detects an action that the path depends on. See Dependencies for
32 | more information.
Here is a simple example, using a poll interval to update:
37 | 38 |39 | <div ic-src="/seconds" ic-poll="5s">You have been on this page for 0 seconds...</div> 40 |41 | 42 | 43 |
ic-sse-src - The Server Sent Event Source AttributeThe ic-sse-src attribute binds a given HTML element to a given
16 | Server Sent Event
17 | source.
When the Server Sent Event source sends a message, the content of that message will be swapped into the 20 | element the attribute is on, using the swap strategy specified.
21 | 22 |When the Server Sent Event source sends an event, any child elements listening for that event will 23 | be triggered.
24 | 25 |See the documentation for more details.
26 | 27 |The value of the attribute should be a valid relative path (e.g. ic-src="/foo/bar").
ic-sse-src has no effect on dependencies.
ic-style-src - The Style Source AttributeThe ic-style-src attribute binds a given HTML element's style attribute to a URL. It does not cause any
16 | requests to happen by itself, but it can respond to events caused by other attributes.
When Intercooler issues a request for an element with an ic-style-src, it will issue a GET
19 | and will replace the current element's style value with resulting text fragment.
The value of the attribute should be a valid style attribute name, followed by a colon, then a valid relative
24 | path
25 | (e.g. ic-style-src="color:/foo/bar").
ic-style-src implies a mutation to any dependency on its path, and Intercooler will issue
30 | GET requests for elements that depend on that path after the POST completes.
See Dependencies for more information.
33 | 34 |Here is a simple example, using a poll interval to update:
37 | 38 |39 | <div ic-style-src="color:/color" ic-poll="200ms">I'm turning red!</div> 40 |41 | 42 | 43 |
ic-swap-style - The Swap Style AttributeThe ic-swap-style attribute tells intercooler how to swap content received from the server into
16 | the target element.
The value of the attribute should be one of 'replace', 'append', 'prepend'
ic-swap-style has no effect on dependencies.
ic-switch-class - The Switch Class AttributeThe ic-switch-class attribute allows you to switch classes
16 | between elements after a response has been received. This allows you to
17 | for example update a tab state without replacing the tabs in the server
18 | response.
The value of this attribute should be the name of the class to be switched between sibling 23 | elements and the attribute should be placed on the parent element.
24 | 25 |The ic-switch-class attribute has no effect on dependencies.
Here is a simple bootstrap tab example. Note that the body of the tabbed UI is
32 | replaced with new HTML, but the tabs are not, since we are targeting #content.
33 | The tabs update based on switching the class active between them.
36 | <ul class="nav nav-tabs" ic-target="#content" ic-switch-class="active"> 37 | <li class="active"><a ic-get-from="/tab1">Tab1</a></li> 38 | <li><a ic-get-from="/tab2">Tab2</a></li> 39 | <li><a ic-get-from="/tab3">Tab3</a></li> 40 | </ul> 41 | <div id="content"> 42 | Tab 1 43 | </div> 44 |45 | 46 |
ic-transform-response - Transform Response attributeThis attribute is a javascript expression that will be evaluated after a response is received, allowing the 16 | client side to transform the given response (e.g. from JSON to HTML)
17 | 18 |This attribute is a valid javascript expression, evaluated within an isolated scope.
21 | 22 |This attribute may be placed on parent elements, allowing you to specify behavior across 23 | multiple elements.
24 | 25 |Available symbols are:
26 | 27 |content - The string content of the server responseurl - The URL that the content came fromelt - The element that triggered the requestThe ic-transform-response attribute can be placed on an parent element, allowing general request processing
34 | for an entire page. Intercooler will find the closest element with this attribute and evaluate it.
Note that, due to the way intercooler evaluates expressions, you must include a return statement in this attribute to return the value.
Here is a simple example, using a poll interval to update a list coming from a JSON end point and ic-transform-response
41 | to convert that JSON into HTML:
44 | <ul ic-get-from="/ips" 45 | ic-poll="1s" 46 | ic-transform-response="return jsonToHTML(content)"> 47 | <li>No Data Yet...</li> 48 | </ul> 49 |50 | 51 | 52 |
ic-transition-duration - The Poll AttributeThe ic-transition-duration attribute tells Intercooler to wait the specified amount of time
16 | after applying the ic-transitioning class to the target element and then executing the content swap,
17 | which gives a CSS transition time to complete.
The value of the attribute should a valid integer, followed by the string "s" (for seconds) or "ms" (for 22 | milliseconds). (e.g. ic-transition-duration="100ms" indicates that the server should be polled every 100 milliseconds.)
23 | 24 |ic-transition-duration has no dependency implications.
Here is a simple example, where the inner content is faded in and out on a button:
32 | 33 |
34 | <style>
35 | #transition-2 span {
36 | transition: all .9s;
37 | }
38 |
39 | #transition-2.ic-transitioning span {
40 | opacity: 0;
41 | }
42 | </style>
43 |
44 | <a id="transition-2" ic-transition-duration="1s" class="btn btn-primary" ic-post-to="/transition_2"><span>Click Me!</span></a>
45 |
46 |
47 |
48 | ic-trigger-delay - The Trigger Delay AttributeThe ic-trigger-delay attribute tells Intercooler to delay the firing of a request in response
16 | to a trigger until the specified time interval has passed. If the trigger occurs again before the interval
17 | is complete, the earlier trigger will cancel and new trigger will begin waiting for the specified interval.
The value of the attribute should a valid integer, followed by the string "s" (for seconds) or "ms" (for 22 | milliseconds). (e.g. ic-trigger-delay="100ms" indicates intercooler will delay firing the request for 23 | 100 milliseconds after the trigger has occurred.)
24 | 25 |ic-trigger-delay has no dependency implications.
Here is a text box that updates a div with its content after a delay:
32 | 33 |34 | <input type="text" name="text" 35 | ic-post-to="/text" ic-trigger-on="keypress" ic-trigger-delay="500ms" 36 | ic-target="#text-div" ic-indicator="#indicator"/> 37 | <i id="indicator" class="fa fa-spinner fa-spin" style="display:none"></i> 38 | <br/> 39 | Text: <div id="text-div"></div> 40 |41 | 42 |
ic-trigger-from - The Trigger From AttributeThe ic-trigger-from attribute tells Intercooler to watch another element in the DOM for
16 | events that will trigger a request.
The value of the attribute should be either document, window or a valid
21 | jQuery selector for the element.
ic-trigger-from has no effect on dependencies.
Here is a div that is triggered by the click event of an otherwise unrelated button:
30 | 31 |32 | <button id="myButton">Click Me</button> 33 | <div ic-get-from="/get_it" ic-trigger-from="#myButton"> 34 | Not Loaded Yet... 35 | </div> 36 |37 | 38 |
ic-trigger-on - The Trigger On AttributeThe ic-trigger-on attribute tells Intercooler to load the content of a ic-src attribute
16 | when a given event occurs.
This can be used to implement infinite scrolling, lazy loading of elements, etc.
19 | 20 |The value of the attribute should be a valid JQuery event:
23 | 24 | http://api.jquery.com/category/events/ 25 | 26 |The special event scrolled-into-view will fire when an element first scrolls into view.
The special event timeout allows you to trigger the request after a given interval (e.g.
29 | timeout:400ms will fire after 400 milliseconds
The changed modifier can be added after the event name and a space. Intercooler will only trigger a request
32 | if the value of the element in question has changed if this modifier is present.
The once modifier can be added after the event name and a space. Intercooler will only trigger a request
35 | once for the given event if this modifier is present.
If a parent element has an ic-sse-src attribute on it, it is possible to use server sent
40 | events to trigger an element by using the sse: prefix, followed by the event name.
See the documentation for more details.
43 | 44 |ic-trigger-on has no effect on dependencies.
ic-trigger-on supports multiple events, separated by a comma: click, change
Here is a div with a header tag near the bottom that issues a request once it is scrolled into view:
55 | 56 |57 | <h2>Scroll Down To Load <i class="fa fa-arrow-down" style="margin-bottom:150%"></i> </h2> 58 | 59 | <h2 ic-src="/get_it" ic-trigger-on="scrolled-into-view"> 60 | Not Loaded Yet... 61 | </h2> 62 |63 | 64 |
ic-verb - The Verb AttributeThe ic-verb attribute tells Intercooler to use a different HTTP verb when issuing
16 | a request than it would otherwise.
This can be useful in cases where, for example, you want to reuse a form for both editing and 19 | creating new models, and need to select the appropriate verb.
20 | 21 |The value of the ic-verb attribute should be one of:
GETPOSTPUTDELETEic-verb attribute has no effect on dependencies.
This page is no longer up to date.
12 | 13 |Redirecting to the New Examples Page in 3 seconds...
14 | 15 | 23 |This example shows some of the features of the intercooler debugger. The debugger 14 | can be launched by including the following javascript:
15 |
16 | <script>
17 | $.getScript("https://intercoolerreleases-leaddynocom.netdna-ssl.com/intercooler-debugger.js");
18 | </script>
19 |
20 | 21 | 22 |
23 | 24 |The buttons below will all show up in the "Elements" tab of the debugger. If you click on the element it will 25 | highlight the element in the UI and show you the intercooler related details, including the target.
26 | 27 |The "Log" tab will include all the log messages that intercooler generates, with links back to the elements that 28 | generate them.
29 | 30 |Finally, the "Errors" tab will include any error states that intercooler detects. In this case, there are two: 31 | Button 2 has a bad target, and Button 3 has a bad indicator.
32 | 33 |Note that the "server side" implementation is mocked out using mockjax, so you can see the entire 34 | implementation. Click the "Source Code" tab to see the code.
35 | 36 |This example lazily loads an expensive to calculate graph in a div within the page, allowing the 14 | page to respond immediately.
15 | 16 |Note that the "server side" implementation is mocked out using mockjax, so you can see the entire 17 | implementation. Click the "Source Code" tab to see the code.
18 | 19 |ic-get-from
25 | attribute. In order to trigger the loading when the page loads, the
26 | ic-trigger-on
27 | attribute is set to "load".
28 | If you wish to prototype intercooler interfaces locally, with no server, or if you wish to avoid server round 11 | trips for certain elements, you can take advantage of the prototyping system built into intercooler:
12 | 13 |ic-ignore class to it.
16 | No content will be processed in this section, so you can use intercooler attributes without risk of triggering
17 | things like polling, event support, etc.
18 | ic-local-* attributes to return status codes or custom intercooler headers to
30 | more fully simulate server requests.
31 | ic-ignore section, to better
34 | visually simulate your UX.
35 | Using this technique, you can build prototype or local-content UX with no Javascript whatsoever!
39 | 40 |Consider the humble anchor tag, foundation of the web:
17 | 18 |<a href="http://www.google.com">Click Me</a>
This bit of HTML tells the browser:
21 | 22 |Let's break this sentence down into its components:
26 | 27 |Intercooler generalizes each of these components:
32 | 33 |ic-trigger-on lets you specify the event that
36 | causes the request.
37 | ic-post-to,
44 | ic-put-to, ic-delete-from and ic-get-from attributes, you can make
45 | use of the full catalog of HTTP actions.
46 | ic-target attribute
49 | to target any particular element for replacement.
50 | To give a general form to the original statement:
54 | 55 |This generalization and extension of the traditional patterns of web development lets you create 60 | rich user interaction while minimizing the associated conceptual and complexity burdens. As you peruse 61 | the examples section you will be surprised how many UX patterns normally associated with heavy javascript 62 | can be implemented using this simple pattern.
63 | 64 |See the documentation to find out everything you can do with Intercooler.
65 | 66 |Fresh on the heels of saying that we were adopting Semantic Versioning in 0.2.0, we 13 | promptly violated Semantic Versioning.
14 | 15 |Last time, promise! ☺
16 | 17 |Here are steps to upgrade from Intercooler 0.2.0 to 0.3.0:
ic-load-on attribute to ic-trigger-on.ic.* should be reversed to *.ic - this
24 | is more consistent with jQuery event name spacing.setLogger, log, setLogLevel and
26 | logLevels were removed from the API and should be replaced by jQuery event listeners for the
27 | log.ic event.Not too bad, but still, sorry about that!
31 | 32 |This tutorial will show you how to implement bulk operations on a table using IntercoolerJS.
14 | 15 |Here are the steps for implementing bulk operations
24 | 25 |ic-src attribute to
28 | re-render the table. Give the form a useful ID.
29 | ic-post-to attribute, and include the
33 | checked rows by using the ic-post-to.
34 | Here is a diff showing what's necessary to implement the bulk operations:
40 | 41 | 42 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/0f3499cdf8896180fa50fe9dac48a88315d82256 43 | 44 | 45 |This tutorial will show you how to implement "Click To Load" behavior with only a few lines of IntercoolerJS. 14 | It builds on the previous Infinite Scroll tutorial.
15 | 16 |Here are the steps for implementing inifinite scroll
25 | 26 |tbody so
29 | we can target it for appending.
30 | page and
33 | value of the next page to load
34 | ic-append-from,
38 | ic-target, and
39 | ic-trigger-on
40 | attributes to trigger appending to the table body, and that includes the hidden input using the
41 | ic-include tag to include the last hidden
42 | input in the table.
43 | Here is a diff between infinite scroll and click-to-load:
49 | 50 | 51 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/11322f35cda1a7c9fa480f845b43cb28e162f64a 52 | 53 | 54 |This tutorial will show you how to add AJAX to a Rails CRUD UI using Intercooler.
14 | 15 |Here are the steps for converting a Rails CRUD UI into an AJAX UI
24 | 25 |ic-get-from and
31 | ic-target attributes.
32 | ic-request
35 | parameter.
36 | ic-put-to and
39 | ic-target attributes.
40 | update method to render partials correct.y
43 | X-IC-SetLocation header.
46 | new and create UI and controller code in a similar manner.
49 | Here is a diff between the standard Rails code and Intercooler-powered code:
55 | 56 | 57 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/b425ad671746c34039bd84fc76bb7c11d6537b24 58 | 59 | 60 |This tutorial will show you how to make the Rails flash and IntercoolerJS play well together.
14 | 15 |Here are the basic steps
24 | 25 |render :partial technique in rails.
31 | ic-append-from and
35 | ic-deps attributes.
36 | Here is a diff of the changes:
42 | 43 | 44 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/afba53a5d78b5d79ac352f83ddf62ee5585a7d5e 45 | 46 | 47 |To use intercooler with Turbolinks in Rails, you will need to enable the jquery-turbolinks gem.
17 |
See this 21 | diff on 22 | github for the template.
23 |This tutorial will show you how to add AJAX to a Rails CRUD UI using IntercoolerJS.
29 | 30 | Go To Tutorial... 31 |This tutorial will show you how to fix the Rails flash so that it works properly in IntercoolerJS.
37 | 38 | Go To Tutorial... 39 |This tutorial will show you how to implement infinite scroll in IntercoolerJS.
45 | 46 | Go To Tutorial... 47 |This tutorial converts the previous infinite scroll UI into a click-based "Load More" UI.
53 | 54 | Go To Tutorial... 55 |This tutorial shows you how to update multiple rows in a table UI using IntercoolerJS.
61 | 62 | Go To Tutorial... 63 |This tutorial shows you how to implement inline server-side validation of input using IntercoolerJS.
69 | 70 | Go To Tutorial... 71 |This tutorial will show you how to implement infinite scroll with only a few lines of IntercoolerJS.
14 | 15 |Here are the steps for implementing infinite scroll
24 | 25 |tbody so
28 | we can target it for appending.
29 | span to the last element in the table that uses the
32 | ic-append-from,
33 | ic-target, and
34 | ic-trigger-on
35 | attributes to trigger appending to the table body.
36 | Here is a diff between the will-paginate code and Intercooler code:
42 | 43 | 44 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/13daf988bc86c5da1e62fea8def155e3e8ea5307 45 | 46 | 47 |This tutorial will show you how to implement inline server-side field validation in Rails with only a few lines 14 | of IntercoolerJS.
15 | 16 |Here are the steps for implementing inline validation
25 | 26 |div with an ID so
29 | we can target it for appending.
30 | ic-post-to annotation to the input and target the wrapping div with an
37 | ic-target annotation.
38 | Here's a diff between the standard rails form code and the IntercoolerJS inline validation version:
44 | 45 | 46 | https://github.com/LeadDyno/intercooler-tutorial-app/commit/b94118fbb5cb0ccd065c6e27d316de3e29313bce 47 | 48 | 49 |In a word: simplicity.
15 | 16 |With intercooler you can add AJAX to your application without using client-side models, routing, validation, 17 | rendering, factories or dependency injection.
18 | 19 |In fact, you don't need to write any javascript at all.
20 | 21 |Intercooler is a natural extension of HTML: simple attributes with a familiar syntax are all that is 24 | required to add AJAX requests to your application.
25 | 26 |Intercooler does use javascript to communicate with a server, but the events triggering the requests are 27 | described with HTML attributes (or are simply implied) rather than with imperative javascript.
28 | 29 |Rather than expecting a JSON response from the server, intercooler expects HTML. This HTML is then loaded 30 | into the DOM directly.
31 | 32 |This is in contrast with Javascript MVC frameworks such as Ember.js or 33 | Angular.js, which typically use JSON as a data transport and have much 34 | more involved client-side binding and rendering.
35 | 36 |Below is a diagram showing an intercooler request:
37 | 38 |
39 | 
40 |
The AJAX response is a bit of HTML generated by the server, which is swapped into the DOM in place of the 43 | existing 44 | content.
45 | 46 |This technique is fast and simple.
47 | 48 |Intercooler was inspired by Turbolinks and, particularly, 49 | by the 50 | excellent pjax library.
51 | 52 |"The minimum complexity compatible with user joy."
55 | 56 |