使用AJAX在Ruby中比較變量，然后相應地渲染視圖

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變量在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對象）。 您已經創建了違反常規的范圍外路線。

2. 您的JS應該不引人注目 。 像您一樣使用JS（尤其是內聯JS）有一個習慣，就是由於Turbolinks而變得一團糟。 盡可能將JS放入資產管道 。

3. find =單身 ; where =集合 。 使用where與SQL中的WHERE子句相同-它返回多個記錄。 Find總是返回單個記錄； 從而：

4. 閱讀有關嵌套路由的信息 。 您要為colleague加載calendar ； 您需要傳遞兩個參數（您當前不這樣做）。