从_form.html.erb到index.html.erb的Ajax发布

Question

我在从表单部分获取数据到索引页面时遇到了问题，而没有刷新页面。仅张贴名称，描述和复选框。

对于表单：

<%= form_for(@objective) do |form| %>
  <div class="name field">
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>
  <div class="description field">
    <%= form.label :description %>
    <%= form.text_area :description %>
  </div><br>
  <div class="user field">
    <%= form.label :user_id %>
    <%= form.collection_select :user_id, User.all, :id, :name %>
  </div>
  <div class="date field">
    <%= form.label :due_date %>
    <%= form.date_select :due_date %>
  </div>
  <div class="group field">
    <%= form.label :group %>
    <%= form.collection_select :group_id, Group.all, :id, :name %>
  </div>
  <div class="completed field">
    <%= form.label :completed %>
    <%= form.check_box :completed %>
  </div>
  <div id="post" class="actions">
    <%= form.submit %>

  </div>
  <% end %>

请求

  <div id="postResult">
    <td id="postName"></td>
    <td id="postDescription"></td>
    <td id="postUser"></td>
    <td id="postDate"></td>
    <td id="postGroup"></td>
    <td id="postComplete"></td>
  </div>

  <script type="text/javascript" charset="utf-8">
    $(function () {
      $('form').submit(function (event) {
        event.preventDefault();
        const checked = this.completed == true ? 'completed' : ''
        let values = $(this).serialize();
        let posting = $.post('/objectives.json', values);
        posting.done(function (data) {
          let objective = data;

          $("#postName").text(objective["name"])
          $("#postDescription").text(objective["description"])
          $("#postUser").text(objective["user"]["name"])
          $("#postDate").html(objective["due_date"])
          $("#postGroup").text(objective["group_id"])
          $("#postComplete").text(objective["completed"])
          $("form").reset()
        });
      });
    });
  </script>
  </form>

控制器

  def create
      @objective = Objective.new(objective_params)
      respond_to do |format|
        if @objective.save
          format.js
          # comment out format.html to resolve 422 error
          #format.html {redirect_to @objective, notice: 'Objective was successfully created.'}
          format.json {render json: @objective}
        else
          format.html {render :new}
          format.json {render json: @objective.errors, status: :unprocessable_entity}
        end
      end
  end

Index.html.erb

    <div id="objectiveList">
        <h1>Objectives</h1>
        <table id="obj table">
          <thead>
            <tr>
              <th>Assigned to</th>
              <th>Name</th>
              <th>Description</th>
              <th>Due Date</th>
              <th>Completed</th>
              <th>Reveal</th>
              <th>Make Changes</th>
              <th>Clear</th>
            </tr>
          </thead>
          <tbody>
            <% @objectives.each do |objective| %>
            <tr>
              <!-- move into its own partial? render @objective? -->
              <td id="postUser"><%= objective.user.name %></td>
              <td id="postName"><%= objective.name %></td>
              <td id="postDescription"><%= objective.description %></td>
              <td id="postDate"><%= objective.due_date.strftime("%B %d, %Y") %></td>
              <td id="postComplete"><%= objective.completed %></td>
              <td><button><%= link_to 'Show', objective %></button></td>
              <% if current_user %>
              <td><button><%= link_to 'Edit', edit_objective_path(objective) %></button></td>
              <td>
                <button><%= link_to 'Destroy', objective, method: :delete, data: {confirm: 'Are you sure?'} %></button>
              </td>
              <% end %>
            </tr>
            <% end %>
          </tbody>
        </table>