Question

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

此处的表单示例：

可用性/ 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>

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

  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

当用户提交表单时，我想要span id＆＃34; monday-times＆＃34; （在相同的可用性/ 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操作中获取的数据，并在成功返回（成功代码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); }}); });

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

1 个答案: