#21 Not RJS and Turbolinks - Part 2

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.
rails view performance javascript 6:09

Resources

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>