Not RJS and Turbolinks

#20 Not RJS and Turbolinks
11/9/2015

Summary

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

Summary

index.html.erb

    <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 User.new, 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>

_user.html.erb

    <tr id="<%= user.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 = User.new(user_params)
      @user.save
      # redirect_to @user, notice: 'User was successfully created.'
    end

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


545430?v=3&s=64
abitdodgy said over 1 year 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.

635114?v=3&s=64
kobaltz said over 1 year ago:

Really cool about

dom_id

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