#21 Not RJS and Turbolinks - Part 2


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



# 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])

# edit.js.erb
    $('#remote-container').html('<%= j render "users/form" %>');

# users_controller.rb
    def update
      # redirect_to @user, notice: 'User was successfully updated.'

# update.js.erb
    $('.modal').each(function(index,element) {
    $('#<%= @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>