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

Question

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

此处的表格示例：

availabilities / new.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>

我的可用性控制器中的new / create操作：

  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“ monday-times”（在相同的availabilities / 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-times在提交时重新加载， 而无需刷新页面并且不使用局部视图吗？

Answer 1

对于此特定任务，我们使用AJAX请求将保存到Rails动作的数据保存到Ajax请求中，并在成功返回（成功代码200）后使用jquery处理HTML DOM。 这是简单的例子

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

编辑：

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

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