使用Ajax/jQuery进行更新操作而无需重新加载页面 [英] using Ajax/jQuery for update action without page reload

问题描述

我有一个配置文件页面，current_user可以查看该页面，在该页面上将列出他们已针对之进行RSVP的事件，并且在每个事件下方，如果他们希望的话，将有一种将RSVP状态更新为其他内容的表格.这是单选按钮，用于显示三个可能的RSVP状态(可以从中选择)(正在参加"，感兴趣"，不感兴趣").我要这样做，以使页面不会在单选按钮单击时重新加载，从而更新了RSVP状态.这是当前表单的外观.

I have a profile page that a current_user can view, on which it will list Events they have RSVP'd for and below each event there will be a form to update RSVP status to something different if they wish. It's radio buttons for three possible RSVP status they can select from ("attending", "interested", "not_interested"). I want to make it so that the page does not reload upon the radio button click which updates the RSVP status. Here is what the form looks like right now.

  <% 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

1) the error I'm getting is 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类型等中引用什么?这里有经验法则吗?

2) HTML for the the form looks like this <form class="update" id="edit_rsvp_11" action="/users/1/rsvps/11" accept-charset="UTF-8" data-remote="true" method="post"> and for each button like this <input onclick="this.form.submit();" type="radio" value="attending" name="rsvp[status]" id="rsvp_status_attending">. What do I reference in the ).on('click part - update class of the form, radio type of the button, etc? Is there a rule of thumb here?

3)URL包含两个任意参数，user_id和rsvp_id.如何在AJAX请求和Rails控制器的数据部分中正确处理它们?

3) The URL contains two arbitrary params, the user_id and the rsvp_id. How do I properly work them in the data part for the AJAX request and the Rails controller?

RsvpsController

RsvpsController

  def update

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

views/rsvps/update.js.erb，资产/javascripts中是否应该存在另一个文件?

views/rsvps/update.js.erb, is there supposed to be another file in assets/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)
        })
    })
})

推荐答案

您使用的是jQuery吗?将click事件绑定到您想要触发更新的任何元素.例如:

Are you using jQuery? Bind a click event to whatever element you'd like to trigger an update. For example:

在您的路线上:

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>

这篇关于使用Ajax/jQuery进行更新操作而无需重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！