如何在提交之前更新表单的一部分

时间:2015-11-21 03:36:07

标签: jquery ruby-on-rails ajax

我创建了一个表单来设置约会。表单包含不同的组:第一组是被邀请者和主持人,然后是可用日期。对于可用日期,用户应该能够添加一个日期,然后日期将累加到上面的可用日期列表中,并且他可以继续添加日期。完成添加日期后,发布表单会将数据发送到数据库。 对于表单的部分更新,我使用jquery将表单的输入日期发送回控制器,该控制器将其附加到available_dates会话数组中:

/ new.html.erb中

<section id="invitee, host... />
<section id="available_dates-section">
    <ol id="available-dates" >
        <%= @available_dates.each do |date| %>
            <%= render 'available_date', :date => date%>
        <% end %>
    </ol>
    <%= render 'form' %>
</section>
在约会/

<form  id="new_appointment">
    <div class="col-sm-6 form-group">
        <%= date_field(:appointments, :date, class: "form-control") %>
    </div>
    <div id="add_date">
        <%= link_to "add_date", "#", remote: true %>
    </div>
</form>

然后,在appointmentments_controller.rb中:

def new
    binding.pry # goes here after clicking on "add date" the first time instead of in add_dates
    # after session[:available_dates] is set in add_date, the flow then comes here and session[:available_dates] is now nil
    @appointment = Appointment.new
    @available_dates = session[:available_dates] || []
end

def create
    binding.pry
    params[:appointment][dates] = session[:available_dates]
    @appointment = Appointment.create_with_param(params[:appointment])
    respond_to do |format|
        format.html { redirect_to "/appointments/show" }
        format.js # render /appointments/create.js
    end
end

def add_date
    session[:available_dates] ||= []
    session[:available_dates] << params[:appointments][:date]
    binding.pry # session[:available_dates] is correctly set
end

在约会/ new.js.erb:

$("#add_date").on("click", function(event){
  event.preventDefault();
  alert("coucou"); # works
 $.ajax({
    url: "/appointments/add_date",
    type: "POST",
    data: $("#new_appointment").serialize(),
    success: function(data){
        alert(data); 
     }
});
})

在routes.rb中,我有:

resources :appointments
post 'appointments/add_date', to: 'appointments#add_date'

在routes.rb中修正拼写错误之后,现在的问题是AppointmentsController::newavailable_dates设置后AppointmentsController::add_date会话丢失了。

首先由于某种原因,我第一次点击链接时,不调用js而是调用new。第二次单击时,将调用js并按预期在session[:available_dates]中设置AppointmentsController::add_date。然而,AppointmentsController::new再次被调用,session[:available_dates]失去了它的价值。

知道为什么AppointmentsController::new被调用(AppointmentsController::add_dates之前和之后)?我该如何预防?

此外,我在application.html.erb中确实有<%= csrf_meta_tags %>,即使在ApplicationController中注释了protect_from_forgery with: :exception之后我也会遇到这种行为。

我对ruby,rails和jquery很新,所以如果你有任何其他方式的建议来实现我想做的事情以及关于风格的建议,我很乐意阅读它们!

谢谢!

1 个答案:

答案 0 :(得分:0)

使用: -

<%= link_to "add_date", "javascript:void(0);" %>
or
<%= link_to "add_date", add_date_appointments_path, remote: true %>

而不是: -

<%= link_to "add_date", "#", remote: true %>

如果我们没有在链接中提供method_path并使用“#”,那么点击链接就会调用当前页面网址操作。