使用 AJAX 比较 Ruby 中的变量，然后相应地渲染视图

Question

我是 javascript 和 ruby​​ 的新手，想知道我是否以正确的方式进行此操作，以及如何获得我想要的结果。 我有一个名为 events\new.html.erb 的视图，它允许用户在集合中选择另一个用户 select:

<%= f.collection_select :id,
                                    Customer.where(business_id: current_customer.business_id),
                                    :id,
                                    :full_name,
                                    { prompt: 'Select' },
                                    { id: "colleageselect", onChange: "renderColCal(this)" } %>

<div id = colleaguecal> </div>

这会触发 application.js 中的 javascript 函数“renderColCal”，我将向 ruby​​ 发送变量 colleagueID：

function renderColCal(select){

    var colleagueID = select.value ;


    document.getElementById("colleaguecal").innerHTML = "Your colleague's calendar";

    $.ajax({
            url: 'calendars_controller/calendarChange',
            data: (
                'colleagueID=' + $('select').val()
            )
        }
    )
}

这是我的路线：

post 'calendars_controller/calendarChange', to: 'calendars_controller#calendarChange'

然后在控制器“calendars_controller”（不是事件\新视图的事件控制器）中，我尝试使用 colleagueID：

def calendarChange
    colleagueID = params[:colleagueID]
    colleague = Customer.where(id: :colleagueID )
    @colcalendar = colleague.calendar
    @events = @colcalendar.events

    respond_to do |format|
      format.js {render '/calendars/_showColleague'} 
    end
  end

我想要做的是能够使用 Ruby 的 @events 变量在 events\new html 中呈现部分 _showColleague。因此，每次用户在集合选择上选择一个名称时，它都会呈现所选同事的日历视图。目前，我使用此代码没有得到任何响应。请问我该怎么做？我很新，所以会很感激解释！谢谢

Answer 1

这是我要做的：

#app/assets/javascripts/application.js
$(document).on("change", "select#id", function(e) {
   $.get("colleagues/"+  + $(this).val() +"/calendars/1");
});

#config/routes.rb
resources :colleagues do 
   resources :calendars #-> url.com/colleagues/:colleague_id/calendars/:id
end

#app/controllers/calendars_controller.rb
class CalendarsController < ApplicationController
   respond_to :js, :html

   def show
      @colleague = Customer.find params[:colleague_id]
      @calendar  = Calendar.find params[:id] #-> your pattern; not mine
      @events    = @colleague.calendar.events
   end
end

#app/views/calendars/new.js.erb
$(".element").html("<%=j render 'calendars/_showColleague' %>");

--

这将允许您使用返回的partial 填充您的 DOM，我认为这是您目前最大的问题。还有一些其他的考虑（因为你是新人）：

1. 你的路由应该是RESTful（IE 的范围应该是calendar 对象）。您创建了一个针对convention 的超出范围的路由。

2. 你的 JS 应该是unobtrusive。像你这样使用 JS（尤其是内联 JS）有一个习惯，因为 Turbolinks 会搞得一团糟。尽可能将 JS 放入asset pipeline。

3. find = single; where = collection。使用where 与SQL 中的WHERE 子句相同——它返回多条记录。 Find 总是返回一条记录；因此：

4. 了解nested routing。您正在寻找为colleague 加载calendar；您需要传递这两个参数（您目前不这样做）。