How to edit data onclick button using rails gem 'best_in_place'?

Question

I am using rails gem 'best_in_place' and data edit one by one, as clicked perticular field. how can i active all fields for editable onclick update/edit button?

def update
    if m_user[:name].present?
        MUser.where(:id => id).update(:name => m_user[:name])                        
    elsif m_user[:gender].present?
        MUser.where(:id => id).update(:gender => m_user[:gender])                      
    else
        flash[:danger] = 'not updated'
    end        
end

View code:

<% @user.each do |record| %>    
 <tr>
   <td>
    <%= best_in_place record, :name, :as => :input %> 
   </td>
   <td>
     <%= best_in_place record, :gender, :as => :select, collection: (MUser.pluck(:id,:gender)) %>
   </td>
     <%= best_in_place record, :dob, :as => :date, class: 'datepicker1 %>
   </td>
 </tr>
<% end %>
<%= submit_tag('update',:name => 'update_data', class: 'btn btn-primary btn-sm', :id => 'update_btn') %>

Now data edit like if i edit name it will automatically editable ,but how can I edit when i clicked update/edit button then make all fields active for edit.

Answer 1

As we discussed, you need to do a couple of changes

1. Add a _user.html.erb partial to render the records with below code.

   <td>
     <%= user.name %> 
   </td>
   <td>
     <%= user.gender %>
   </td>
   <td>
     <%= user.dob %>
   </td>
   <td>
     <%= link_to "Edit", edit_user_path(user), remote: true %>
   <td>
   

2. Now change your index.html.erb code like below.

   <% @users.each do |user| %>
     <tr id="record-row-<%= user.id %>">
       <%= render prtial: 'user', locals: { user: user } %>
     </tr>
   <% end %>
   

   Now refresh your page and you will see the User records in table rows.

3. Add a new partial _user_form.html.erb to render the form and add below code in it.

   <td colspan="4">
     <%= form_for(@user, remote: true) do |f|
       <table>
         <tbody>
           <tr>
             <td><%= f.text_field :name, class: 'form-control' %></td>
             <td><%= f.select :gender, MUser.pluck(:gender, :id).uniq, { selected: @user.gender }, class: 'form-control' %></td>
             <td><%= f.text_field :name, class: 'form-control datepicker1' %></td>
             <td><%= f.submit "Update" %></td>
           </tr>
         </tbody>
       </table>
     <% end %>
   </td>
   

4. Now need to update edit and update actions.

   edit action

   def edit
     @user = User.find(params[:id])
     respond_to do |format|
       format.js { }
       format.html { render 'edit' }
     end
   end
   

   update action

   def update
     @user = User.find(params[:id])
     respond_to do |format|
       if @user.update_attributes(user_params)
         format.js { }
         format.html { redirect_to @user, notice: 'User was updated successfully.' }
       else
         format.js { }
         format.html { render 'edit' }
       end
     end
   end
   
   private
   
   def user_params
     params.require(:user).permit(:name, :gender, :dob)
   end
   

5. Now you need to create an edit.js.erb file to render the form on selected row.

   $("#record-row-<%= @user.id %>").html("<%= escape_javascript(render 'user_form') %>")
   

6. And you also need an update.js.erb file to update the table row after updating the user record.

    $("#record-row-<%= @user.id %>").html("<%= escape_javascript(render partial: 'user', locals: { user: @user } ) %>")
   

Now all set. Refresh your page and click on Edit button of a row. A form will appear. Change the value and click on Update button. You will see the updated record.

Let me know if you have nay issues. Happy to help.