时间戳

首页 > 解决方案 > 在页面上重新加载特定的 div 而不在 rails 中刷新页面

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

问题描述

我的 Rails 应用程序中有一个表格。我将表单提交作为 ajax 请求使用$("#monday-form").trigger('submit.rails');. 但是，一旦提交表单，我希望页面上的特定 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 "monday-times" （在相同的可用性/new.html.erb 页面上重新加载，但没有完整的页面刷新。需要这样做的原因是因为这个 span 包含时间用户已经提交——一旦他们创建了一个新的表单提交，这应该重新加载以显示提交的数据。

我知道 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 在提交时重新加载而不刷新页面且不使用部分？

标签： javascriptjqueryruby-on-railsruby

解决方案

对于这个特定的任务，我们使用 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);
    }});
});

推荐阅读