Not RJS and Turbolinks - Part 2

#21 Not RJS and Turbolinks - Part 2
11/25/2015

Summary

A continuation from Episode 20 where we explore rendering the user's edit pages in a modal on a per request basis. Instead of rendering all modals for the users in the index, we will request them using remote javascript.
2
rails view performance javascript 6:09 min

Summary

application.html<div id='remote-container'></div>
_user.html.erb<%= link_to icon('pencil'), edit_user_path(user), remote: true %>
users_controller.rb    def edit
      # @user = User.find(params[:id])
    end
edit.js.erb    $('#remote-container').html('<%= j render "users/form" %>');
    $('#edit_user').modal('show');
users_controller.rb    def update
      @user.update(user_params)
      # redirect_to @user, notice: 'User was successfully updated.'
    end
update.js.erb    $('.modal').each(function(index,element) {
      $(element).modal('hide');
    });
    $('#<%= @user.id %>').replaceWith('<%= j render @user %>');
_form.html.erb

    <div class="modal fade" id="edit_user">       <%= simple_form_for @user, 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">Edit 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>