重新加载页面上的特定 div，而不刷新 rails 中的页面

Question

我的rails应用程序中有一个表单。我使用$("#monday-form").trigger('submit.rails');将表单提交作为 ajax 请求。但是，提交表单后，我希望页面上的特定div(div IDmonday-times(刷新，因为此div 显示用户刚刚输入的信息。我不想刷新整页，但由于格式问题，我也不想使用部分页面。

表单示例在这里：

可用性/新.html.erb

<span class = "text-muted" id = "monday-times" data-update-url = "<%= vendor_availabilities_path(@vendor, @availability) %>">
<%= show_available(0, @vendor.id) %>
</span>
<div id= "form-monday">
<%= simple_form_for @availability, url: vendor_availabilities_path(@vendor), id: "#monday-form" do |f| %>
<%= f.input :day, as: :hidden, label: false, input_html: { value: 0 } %>
<%=f.time_select :day_start, label: "Start Time",
:combined => true,
:default => Time.now.change(:hour => 8, :min => 00),
:minute_interval => 30,
:time_separator => "",
:start_hour => 6,
:start_minute => 00,
:end_hour => 22,
:end_minute => 30,
:ampm => true
%>
&nbsp; to &nbsp;
<%=f.time_select :day_end,
:combined => true,
:default => Time.now.change(:hour => 22, :min => 00),
:minute_interval => 30,
:time_separator => "",
:start_hour => 6,
:start_minute => 00,
:end_hour => 22,
:end_minute => 30,
:ampm => true
%>
<%= button_tag type: 'submit', class: 'btn btn-sm btn-primary float-right', id: "monday-submit", remote: true do %>
Save
<% end %>
<% end %>
</div>

我的可用性控制器中的新建/创建操作：

def new
@vendor = Vendor.friendly.find(params[:vendor_id])
if @vendor.user != current_user 
return render plain: 'Not Allowed', status: :forbidden
end  
@availability = Availability.new 
end 
def create
@vendor = Vendor.friendly.find(params[:vendor_id])
params[:availability].parse_time_select! :day_start
params[:availability].parse_time_select! :day_end
if @vendor.user == current_user
@availability = @vendor.availabilities.create(availability_params)
if @vendor.valid? == false
render :new, notice: "Errors were made in your form. Please try again"
end 
else 
return render plain: 'Not Allowed', status: :forbidden
end  

当用户提交表单时，我希望跨度 id"星期一时间"(在相同的可用性/new.html.erb 页面上重新加载，但没有整页刷新。需要这样做的原因是，此跨度包含用户提交的时间 - 一旦他们创建新的表单提交，它应该重新加载以显示提交的数据。

我知道jQuery加载函数，我尝试以这种方式实现它：

$("#monday-submit").click(function(){
var vendorId = document.querySelector(".availability-header").getAttribute('id');
$("#monday-form").trigger('submit.rails');
$("#form-monday").hide();
$("#monday-times").load("/vendors/" + vendorId + "/availabilities/new");
});

不幸的是，这不起作用 - 它会刷新整个页面，并且页面永远不会完全加载。

知道如何使用查询在提交时重新加载div #Monday 次而无需刷新页面和不使用部分吗？

Answer 1

对于这个特定的任务，我们使用 AJAX 请求将我们命中的数据保存到 Rails 操作中，并在成功返回(成功代码 200(时使用 jquery 操作 HTML DOM。这是简短的示例

$("button").click(function(){
$.ajax({url: "http://localhost:3000/demo_test", success: function(result){
$("#div1").html(result);
}});
}); 

编辑：

如果您在表单提交或单击提交按钮时执行 ajax 请求，则需要阻止表单提交。请记住，您不应该从JS代码提交表单，因为它将刷新页面，而是使用AJAX请求将表单数据发送到Rails操作，该操作还可以返回您需要在该特定空间中呈现的文本/html。您可以使用以下代码执行相同的操作

$("button").click(function(e){
e.preventDefault();
$.ajax({url: "http://localhost:3000/demo_test", success: function(result){
$("#div1").html(result);
}});
});