Mix Ajax Into HTML with Intercooler.js

By Jake Rocheleau. in Coding. Updated on August 16, 2022.

It’s never been easier to add Ajax to any website. In fact it’s pretty common to build entire websites based around Ajax requests called Single-Page Apps (or SPAs).

However this has always required a bit of jQuery and some technical wrangling to update page content. If you just need some basic Ajax functionality you can use intercooler.js to mix this right into your HTML.

Intercooler lets you write HTML attributes that natively contain Ajax request URLs. When users click certain links, you can dictate that Ajax requests run instead of the normal click action.

This all relies on HTML5 data-* attributes such as ic-post-to. You can add this attribute to a button or an anchor link, and it’ll automatically connect into jQuery for an Ajax POST request.

There’s actually a page full of these attributes on the plugin website. Here’s a bit of sample code to see how it looks:

<a ic-post-to="/button_click">Click Me!</a>

This would send an Ajax POST request to the URL /buton_click, and load the response into the container element. Intercooler is a pretty simple library and incredibly powerful once you understand how it works.

Granted this won’t solve all your Ajax problems because it can’t auto-update other areas of the page. It also can’t append too many custom features without slowing down the page, so a detailed SPA should really use custom Ajax code.

Intercooler.js offers a more semantic way for writing Ajax code so that it loads and even offers a native fallback.

To install intercooler you just need a copy of jQuery along with a copy of the intercooler library which can be found on GitHub. You can even test without downloading any files by using a jQuery CDN and the local Intercooler CDN.

Put both into a <script> tag in the header of your page, and then just place the HTML attributes wherever you want!

Take a peek at the demos page to see a full list of demos you can toy with. I especially like the ‘Click to Edit’ demo because it shows exactly what’s possible and how far you can take this plugin.

If you’re interested in learning more check out the reference guide full of intercooler HTML attributes. Each one performs a different action so it’s crucial to study them all and see what fits best for your scenario.

Naturally, you can find all the source code for free on GitHub along with a brief installation guide.