Not RJS and Turbolinks - Part 2

Episode #21 by David Kimura

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>