ajax form submission message error in rails

project has one project_director, project_director has attribute status
earlier i was not using ajax to submit project_director form page was getting reloaded each time and submission status was accessed accordingly.

now i using ajax data gets submitted without page reload but i not able to hide from after status value is set once, neither i am able to show any message on submission. how can i show submitted value in row and hide form after submission using ajax feature.

here is my current code:-

index.html.erb

<% if project_site.project_directors.empty?%>
  <%= form_for ProjectDirector.new, :remote => true do |f| %>
    <td>
     <table class="approval-table">
      <tr>
       <td>
        <ul>
         <div>
          <div class="wrapper-class">
           <%= f.radio_button :status, true  %>
           <%= f.label :approve %>
           <br>
           <%= f.radio_button :status, false  %>
           <%= f.label :reject %>
          </div>
          <%=f.hidden_field :project_site_id, value: project_site.id%>
         </div>
        </ul>
       </td>
       <td>
        <%= f.hidden_field :user_id, value: current_user.id %>
        <%= f.submit 'Submit', :class => 'button primary small' %>
       </td>
      </tr>
     </table>
    </td>
  <% end %>
<% else %>
  <% project_site.project_directors.each do |project_director| %>
    <% if project_director.status == false %>
      <td class="rejected fi-x"><%= ' Rejected' %></td>
    <% elsif project_director.status == true %>
      <td class="approved fi-check"><%= " Approved" %></td>
    <% end %>
  <% end %>
<% end %>

project_directors_controller.rb

def create
  @project_director =  ProjectDirector.new(remark_params)
  #redirect_to  directors_index_path, anchor: '#panel2'
  if @project_director.save
    if request.xhr?
      render json: { success: true }
    else
      redirect_to notice: "Thing was successfully created."
    end
  else
    render :new
  end
end

1 answer

  • answered 2020-09-14 05:58 Hass

    You need to update the DOM when the success method is called on your save request. You can do so by creating a create.js.erb file that will execute some JS.

    1. You can change your controller to use respond_to
    def create
      @project_director = ProjectDirector.new(remark_params)
    
      respond_to do |format|
        if @project_director.save
          format.js   { render layout: false }
          format.html { redirect_to notice: "Thing was successfully created." }
        else
          format.js   { render layout: false }
          format.html { render :new }
        end
      end
    end
    
    1. Split your HTML into partials.
    <div id="project_site_view">
      <% if project_site.project_directors.empty?%>
         <%= render 'from' %>
      <% else %>
        <%= render 'project_directors', locals: { project_site: project_site } %>
      <% end %>
    </div>
    
    # _form.html.erb
    <%= form_for ProjectDirector.new, :remote => true do |f| %>
      <td>
       <table class="approval-table">
        <tr>
         <td>
          <ul>
           <div>
            <div class="wrapper-class">
             <%= f.radio_button :status, true  %>
             <%= f.label :approve %>
             <br>
             <%= f.radio_button :status, false  %>
             <%= f.label :reject %>
            </div>
            <%=f.hidden_field :project_site_id, value: project_site.id%>
           </div>
          </ul>
         </td>
         <td>
          <%= f.hidden_field :user_id, value: current_user.id %>
          <%= f.submit 'Submit', :class => 'button primary small' %>
         </td>
        </tr>
       </table>
      </td>
    <% end %>
    
    # _project_directors.html.erb
    <% project_site.project_directors.each do |project_director| %>
      <% if project_director.status == false %>
        <td class="rejected fi-x"><%= ' Rejected' %></td>
      <% elsif project_director.status == true %>
        <td class="approved fi-check"><%= " Approved" %></td>
      <% end %>
    <% end %>
    
    1. Render the partials in your create.js.erb
    <% if @project_director.errors.any? %>
      <!-- handle error here -->
    <% else %>
      $("#project_site_view").html("<%= escape_javascript(render partial: 'project_directors', locals: { project_site: @project_director.project_site } ) %>"); 
    <% end %>