jquery - 从 _form.html.erb 到 index.html.erb 的 Ajax 发布
问题描述
我在不刷新页面的情况下从我的表单部分获取数据到索引页面时遇到问题。仅发布名称、描述和复选框。
对于表格:
<%= 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
索引.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>
解决方案
推荐阅读
- python - pip 无法安装 install_requires 中列出的软件包
- javascript - 使用带有 AJAX 和 PHP 的 input type="file" 将文件发送到电子邮件
- docker - 更改 amazon/dynamodb-local 端口
- php - MySQL 在当天每天增加一次行值,然后在第二天重置
- c# - 在整个程序中存储记录的适当方式?
- python - 在类中设置默认值
- node.js - serverless.yml 中的运行时变量未设置节点版本
- dns - 是什么导致了 ID 未知的 DNS 响应?
- .net-core - 如何处理重定向到不同 api 版本的请求?
- python - 使用 python 查看 A 和 prev B