ruby-on-railsruby-on-rails-5best-in-place

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


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.


Solution

  • 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.