Question

我有一个current_user可以查看的个人资料页面，在该页面上它将列出他们已经RSVP的事件，并且在每个事件下面都会有一个表单，如果他们愿意，可以将RSVP状态更新为不同的东西。这是他们可以选择的三种可能的RSVP状态的单选按钮（“参加”，“感兴趣”，“不感兴趣”）。我想这样做，以便在单击单选按钮时不会重新加载页面，这会更新RSVP状态。这是表格现在的样子。

  <% current_user.past_events.each do |event| %>
  <% rsvp_status = current_user.rsvp_for_event(event).status %>
    <% unless rsvp_status == "not_interested" %>
  <li><%= link_to event.title, event_path(event) %>
    <%= form_for ([current_user, current_user.rsvp_for_event(event)]), remote: true, html: { class: "update" } do |f| %>
                <%= f.hidden_field :event_id %>
      <%= f.radio_button :status, "attending", :onclick => "this.form.submit();" %>
                <%= f.radio_button :status, "interested", :onclick => "this.form.submit();"%>
      <%= f.radio_button :status, "not_interested", :onclick => "this.form.submit();" %>
    <% end %>

用户模型：

def rsvp_for_event(event)
  Rsvp.where(:event_id => event.id).first
end

更新

1）我得到的错误是ActionController::UnknownFormat in RsvpsController#update

2）表单的HTML看起来像<form class="update" id="edit_rsvp_11" action="/users/1/rsvps/11" accept-charset="UTF-8" data-remote="true" method="post">，对于每个按钮，如<input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending">。我在).on('click部分 - update类的形式，radio按钮类型等中引用了什么？这里有经验法则吗？

3）网址包含两个任意参数user_id和rsvp_id。如何在AJAX请求和Rails控制器的数据部分中正确地处理它们？

RsvpsController

  def update

    #is this part sufficient?
    respond_to do |format|
      format.html 
      format.js 
    end
  end

views / rsvps / update.js.erb，资产/ javascripts中应该有另一个文件吗？

$(document).on('ready', function() {
    //does the radio button reference go here?
    $('.radio').on('click', function(e) {
        e.preventDefault()

        $.ajax({
            type: 'POST',
            url: "users/" + user_id + "/rsvps/" + rsvp_id,
            data: {
                user_id: "<%= current_user.id %>"
                //in my view template, I added "<% rsvp_id = current_user.rspv_for_event(event)" 
                rsvp_id: "<%= rsvp_id %>"
            }
        }).done(function(response){ console.log('hello?', response)
        })
    })
})

Answer 1

是的，如果您希望它在javascript中回复而不重新加载页面，则需要update.js.erb。
为了指定您的表单在单击单选按钮时提交，您已经回答了自己的问题。您需要在单选按钮上添加一个单击侦听器。

点击监听器

<script type="text/javascript">
  $('.radio-button-yes').on('click', function(e) {
    e.preventDefault() // Not necessary but here for precaution

    $.ajax... 
    // This is where you make your post to update action in controller
    // Make sure to specify type to be 'js'
  })

  // Repeat for the '.radio-button-no' class
</script>

<强> update.js.erb

任何事情都可以在javascript中发生，所以我只是举个例子。

$(body).css({"backgroundColor":"pink"});

Answer 2

您使用的是jQuery吗？将点击事件绑定到您要触发更新的任何元素。例如：

在您的路线中：

resources :users do
  collection do
    post "rsvp_to_event"
  end
end

在您的控制器中：

def rsvp_to_event
  user_id = params[:user_id]
  rsvp_id = params[:rsvp_id]

  # do what you need to do

  # then render json and send back whatever you need

  render json: {data: "Success"}
end

在您看来

：

<button class="some-class" data-user-id="<%= current_user.id %>">Example</button>

<script>
   $(document).on('ready', function(){
     $('.some-class').on('click', function(e){
     // this keeps page from reloading
     e.preventDefault()

     $.ajax({
       type: 'POST',
       url: '/controller_action_you_want_to_post_to',
       data: { user_id: $('.some-class').data('user-id') }
     }).done(function(response){ console.log('response', response })
     // you can update the page in the done callback
     // update your data in the controller action you're posting to
    }
   })
</script>

Answer 3

您可以使用ajax:success绑定。你只需要jquery-ujs gem。

我在这篇文章中解释了它的工作原理 Raise an alert/notice in rails controller WITHOUT redirect

因此，使用remote: true，rails将使用ajax提交您的表单，然后您可以使用ajax:something绑定捕获返回并根据需要操作结果：）

使用Ajax / jQuery进行更新操作，无需重新加载页面

3 个答案: