title: Rails 5: edit user role on index with AJAX
body: <p>I'm trying to create view where User can be selected from dropdown and then below Role partial for particular User Role edit is loaded.</p>
  
  <p>This is what I have in <em>/roles/index.html.erb</em></p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label class="col-sm-2 control-label"&gt;User name&lt;/label&gt;
      &lt;div class="col-sm-10"&gt;&lt;select class="form-control m-b" name="users" id="user_list"&gt;
       &lt;option value=""&gt;Please, select user&lt;/option&gt;
        &lt;% @users.each do |user| %&gt;
         &lt;% for role in user.roles %&gt;
          &lt;option value="&lt;%= role.id %&gt;" data-edit-url="&lt;%= edit_common_role_path(role.id) %&gt;"&gt;&lt;%= user.name %&gt;&lt;/option&gt;
         &lt;% end %&gt;
        &lt;% end %&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In <em>/roles_controller.rb</em> I have this:</p>
  
  <pre><code>def index #Here users belonging to current_user is found
   @users = User.joins(:accounts).where("accounts.company_id IN (?)",
            current_user.companies.pluck(:id)).distinct
  end
  
  def edit #Each user has its role with user_id column
   @role = Role.find(params[:id])
  end
  </code></pre>
  
  <p>I'm new in coding and have read a lot of related blogs, however <strong>I cannot figure out how to do this in single view with dropdown and AJAX?</strong> I would appreciate any help, thank you.</p>
  
  <p><strong>Update</strong></p>
  
  <p>This JS can open particular selected User role for Edit:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
        edit = $('#user_list').change(function() {
        window.location = $(this).find(":selected").data('edit-url');
       });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>In <em>/roles/index.html.erb</em> I added partial where role details will be loaded:</p>
  
  <pre><code>&lt;div id = selected_role &gt;
    &lt;%= render 'common/roles/editrole' %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Particular Edit view partial starts with this</p>
  
  <pre><code>&lt;%= form_for([:common, @role]) do |f| %&gt;
  </code></pre>
  
  <p>and at the moment I get error: <code>First argument in form cannot contain nil or be empty</code></p>
  
  <p>It seems that the problem is that in index view it tries to render Edit partial looking for some role, however at that moment no User is not selected (role ID is empty). How to fix this, please?</p>
  
  <hr>
  
  <p><strong>The solution for edit form</strong></p>
  
  <p>Thanks to @Ahmad hamza &amp; @Jeff I have come to this solution, where I can do Edit action, but still need some final touch for Update action.</p>
  
  <p>In <em>/common/roles/index.erb</em> I have this:</p>
  
  <pre><code>&lt;form class="form-horizontal" role="form" method="get" action="/common/roles" data-remote="true"&gt;
  &lt;div class="col-sm-10"&gt;&lt;select class="form-control m-b" name="users" id="user_list"&gt;
    &lt;option value=""&gt;Please, select user&lt;/option&gt;
       &lt;% @users.each do |user| %&gt;
          &lt;% for role in user.roles %&gt;
             &lt;option value="&lt;%= role.id %&gt;"&gt;&lt;%= user.name %&gt;&lt;/option&gt;
          &lt;% end %&gt;
       &lt;% end %&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;!-- Here we render role edit form --&gt;
    &lt;div id = 'selected_role' &gt;&lt;/div&gt;
  &lt;!-- Role edit form ends --&gt;
  </code></pre>
  
  <p>This is select where User names are displayed, role ID are option value.</p>
  
  <p>In <em>roles.js</em> I have listener where on select role ID is passed for Edit:</p>
  
  <pre><code>(function($) {
  $('#user_list').change(function() {
    var roleId = $( "#user_list" ).val();
    $.ajax({
      url: '/common/roles/' + roleId + '/edit',
      method: 'GET',
    });
  });
  })(jQuery); /*global jQuery*/
  </code></pre>
  
  <p><em>/common/roles/edit.js.erb</em> looks like this:</p>
  
  <pre><code>$("#selected_role").html("&lt;%=j render 'common/roles/editrole', locals: { role: @role } %&gt;");
  </code></pre>
  
  <p>and it renders role edit partial <em>/common/roles/_editrole.html.erb</em></p>
  
  <pre><code>&lt;%= form_for :role, method: :patch, remote: true do |f| %&gt;
  &lt;form class="m-t" role="form" action="" id="editrole"&gt;
          &lt;div class="form-group"&gt;
              &lt;label class="col-sm-2 control-label"&gt;General&lt;/label&gt;
              &lt;div class="col-sm-10" &gt;
             &lt;%= f.select :general, Role.generals.to_a.map { |w| [w[0].humanize, w[0]] }, {}, {class:"form-control m-b"} %&gt;
              &lt;/div&gt;
          &lt;/div&gt;
     &lt;%= f.submit "Save changes", class: "btn btn-primary block full-width m-b" %&gt;
    &lt;% end %&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>To complete this form I still need to finish with Update action where I have problem. On submitting role edit form it stays in Edit action with this error in console:</p>
  
  <pre><code>ActionController::RoutingError (No route matches [PATCH] "/common/roles/1/edit"):
  </code></pre>
  
  <p>although particular route is in place:</p>
  
  <pre><code>common_role PATCH  /common/roles/:id(.:format)     common/roles#update
  </code></pre>
  
  <p>In <em>/common/roles_controller.rb</em> I have this:</p>
  
  <pre><code>def update
  @role = Role.find(params[:id])
  if @role.update_attributes(role_params)
    format.html {
                flash[:success] = "Role updated!"
                redirect_to common_roles_path
    }
    format.js
  </code></pre>
  
  <p>In <em>/common/roles/update.js.erb</em> I have this line: <code>$('.editrole').hide()</code></p>
  
  <p><strong>How do I fix this Update action issue, please?</strong></p>