Question

我是javascript和ruby的新手，想知道我是否正确地采用这种方式，以及如何获得我想要的结果。我有一个名为events \ new.html.erb的视图，它允许用户选择集合中的另一个用户选择：

<%= 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'中（不是events \ new视图的事件控制器）我试图使用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\new变量在_showColleague html中呈现部分@events。因此，每次用户在集合选择上选择名称时，它都会呈现所选同事的日历视图。目前我没有使用此代码得到任何回复。我该怎么做呢？我很新，所以会很感激解释！谢谢

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，我相信这是您目前最大的问题。还有一些其他考虑因素（因为你是新的）：

您的路由应为RESTful （IE应围绕calendar对象）。您创建了一个超出convention范围的超出范围的路线。
您的JS应该是unobtrusive 。像你一样使用JS（特别是内联JS）有一个习惯，因为Turbolinks搞砸了。尽可能将JS放入asset pipeline。
<强> find = single; where = collection 即可。使用where与SQL中的WHERE子句相同 - 它返回多个记录。 Find始终返回单个记录;因此：
阅读nested routing 。您希望为calendar加载colleague;你需要传递两个参数（你当前没有这些参数）。

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

1 个答案: