rails中的ajax表单提交消息错误

Question

project 有一个project_director，project_director 有属性status
早些时候我没有使用 ajax 提交 project_director 表单页面每次都重新加载，提交status 被相应地访问。

现在我使用 ajax 数据在不重新加载页面的情况下提交，但在设置状态值一次后我无法隐藏，我也无法在提交时显示任何消息。如何使用 ajax 功能在行中显示提交的值并在提交后隐藏表单。

这是我当前的代码：-

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

Answer 1

当你的保存请求调用成功方法时，你需要更新 DOM。你可以通过创建一个create.js.erb 文件来执行一些JS。

1. 您可以将控制器更改为使用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. 将您的 HTML 拆分为多个部分。

<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. 在您的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 %>