Blog: Notes from drawing to keyboard.

Rails UJS for Forms

JS frameworks are fun, but for most apps a sprinkling of JavaScript and Rails RJS gets a lot done, it’s simple to use and easy to maintain.

Often, a feature requires a form to be added to the list page allowing a user to add elements. It’s nice if this works with Ajax, without a page reload as the user adds the elements.

To get started, add a remote attribute and id to the link to the new action.

<%= link_to "Add Friend to This List",
            new_list_friend_path(@list),
            remote: true, id: 'new_friend' %>

In your form partial, tell the form to use ajax using the remote attribute:

<%= simple_form_for( [@list, @friend], remote: true) do |f| %>

Tell the create action to render the JS view instead of the usual html view.

if @friend.save
        format.html { redirect_to @friend.list,
                  notice: 'Friend was successfully created.' }
        format.js

...        

Create a create.js view and the JS you want when the friend is created. Remember to use the ‘j’ helper to escape the content.

$('#friends').append('<%= j render @friend %>');
$('#q').val('');

For a bonus, it’s nice to allow the user to close the form when they are done.

add the following to the application.js:

$(function(){
  $( document ).on('click', '.done', function(e) {
    $($(event.target).data("show")).show();
    $($(event.target).data("remove")).remove();
  });
});

and then add a link to the form to close it.

  <a href="#" class="done"
    data-remove="#new_friend"
    data-show="#new_friend_link">Cancel</a>

References

• http://railscasts.com/episodes/136-jquery-ajax-revised?view=asciicast
• http://guides.rubyonrails.org/v4.2/working_with_javascript_in_rails.html
• https://robots.thoughtbot.com/a-tour-of-rails-jquery-ujs