Thin-man

How it works

In your views

This example sends an AJAX request to retrieve a form for editing a user, then replaces the html of the DOM element selected by the css selector #user-<user.id> with the ajax response, presumeably the user edit form.

<%= ajax_link 'edit', edit_user_path(user), {}, dom_target(user) %>

This example posts/patches a form with user data via AJAX and replaces the html of the DOM element selected by #user-<user.id> with the response, presumeably the read-only representation of the user record.

<%= form_for(user, html: ajax_form_hash("#user-#{user.id}") do |f| %>

This creates a delete link that will remove the DOM element selected by #user-<user.id> after receiving a success response.

<%= ajax_delete 'delete', user_path, {}, dom_target(user) %>

You can drive stick if you prefer. This does the same thing as the first example:

<%= link_to 'edit', edit_user_path(user),
    data: {ajax_link: true, ajax_target: "#user-#{user.id}"} %>

This does the same thing as the second example:

<%= form_for user, html: {
    data: { ajax_form: true, ajax_target: "#user-#{user.id}"} } do |f| %>

And this is the same as the third example:

<%= link_to 'delete', user_path,
    data: {ajax_delete: true, ajax_target: dom_target(user) %>

See here for more options and ways to customize the behavior of ajax requests.

In your controllers

The most basic method is to simply respond with an html partial:

render partial: 'edit', locals: { user: @user }

See here for more dark magic you can do from your controller to vivify your client.

How to make a restul-AJAX app with ThinMan

Authors and Contributors

Eric Draut (@edraut), Adam Bialek (@abialek)