Not RJS and Turbolinks

#20 Not RJS and Turbolinks


Using Javascript responses, we can make our Rails application have a quick and responsive Single Page Application feel to it.
rails javascript performance



    <h4>Listing Users</h4>     <table class="table table-condensed table-hover">       <thead>         <tr>           <th></th>           <th>First name</th>           <th>Last name</th>           <th>Email address</th>           <th>Updated</th>         </tr>       </thead>       <tbody id='users'>         <%= render @users %>       </tbody>     </table>     <br>

    <%= link_to 'New User', '#new_user', data: { toggle: 'modal' }, class: 'btn btn-primary' %>     <div class="modal fade" id="new_user">       <%= simple_form_for, remote: true do |f| %>       <div class="modal-dialog">         <div class="modal-content">           <div class="modal-header">             <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>             <h4 class="modal-title">New User</h4>           </div>           <div class="modal-body">             <div class="form-inputs">               <%= f.input :first_name %>               <%= f.input :last_name %>               <%= f.input :email_address %>             </div>           </div>           <div class="modal-footer">             <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>             <%= f.button :submit, class: 'btn btn-primary' %>           </div>         </div>       </div>       <% end %>     </div>


    <tr id="<%= %>">       <td>         <%= link_to icon('pencil'), edit_user_path(user) %>         <%= link_to icon('trash'), user, method: :delete, remote: true, data: { confirm: 'Are you sure?' } %>       </td>       <td><%= user.first_name %></td>       <td><%= user.last_name %></td>       <td><%= user.email_address %></td>       <td><%= user.updated_at %></td>     </tr>

users_controller.rb    def create
      @user =
      # redirect_to @user, notice: 'User was successfully created.'

    def destroy
      @user_id =
      # redirect_to users_url, notice: 'User was successfully destroyed.'
create.js.erb    $('#users').prepend('<%= j render @user %>');
destroy.js.erb    $('#<%= @user_id %>').slideUp();

abitdodgy said 11 months ago:

Great video. A couple of things: You don't have to store the id of the user before destroying it. The user gets destroyed, but its instance variable is still available to use in the template. Also, in the templates, you have access to the dom_id helper. You can do `id="#<%= dom_id @user %>"`. As for the user partial, I believe ids can't start with a number. It would have been really nice to see how you would handle validation failures with the modal.

kobaltz said 11 months ago:

Really cool about


I wasn't aware of it!

I do plan on doing an episode on client side validations so the forms can be checked prior to submitting. Ideally, something that would look at the model's validations and generate the necessary javascript.

Login to Comment