[英]Using AJAX to compare variable in Ruby and then render a view accordingly
I'm new to javascript and ruby, and was wondering whether I'm going about this the right way, and how to get the results I want. 我是javascript和ruby的新手,并且想知道我是否正在以正确的方式进行操作,以及如何获得所需的结果。 I have a view called events\\new.html.erb which allows a user to select another user in a collection select:
我有一个名为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>
This triggers a javascript function 'renderColCal' in application.js , I'm sending to ruby the variable colleagueID: 这会触发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()
)
}
)
}
here is my route: 这是我的路线:
post 'calendars_controller/calendarChange', to: 'calendars_controller#calendarChange'
and then in the controller 'calendars_controller' (not the events controller of the events\\new view) I am trying to use colleagueID: 然后在控制器“ 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
what I want to do is to be able to render within the events\\new
html the partial _showColleague
, using the @events
variable of Ruby. 我想要做的是能够使用Ruby的
@events
变量在events\\new
html中呈现部分_showColleague
。 So, every time a user selects a name on the collection select, it renders the selected colleague's calendar view. 因此,每当用户在集合选择中选择一个名称时,它就会呈现所选同事的日历视图。 At the moment I am getting no response using this code.
目前,使用此代码我没有任何反应。 How would I go about doing this please?
请问我该怎么做? I am very new and so would appreciate explanations!
我很新,不胜感激! Thank you
谢谢
Here's what I'd do: 这是我要做的:
#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' %>");
-- -
This will allow you to populate your DOM with the returned partial
, which I believe is your biggest issue right now. 这将使您可以使用返回的
partial
来填充DOM,我认为这是您目前最大的问题。 There are also some other considerations (since you're new): 还有其他一些注意事项(因为您是新手):
Your routes should be RESTful (IE should be scoped around the calendar
object). 您的路由应为RESTful (IE的范围应围绕
calendar
对象)。 You've created an out-of-scope route which is against convention . 您已经创建了违反常规的范围外路线。
Your JS should be unobtrusive . 您的JS应该不引人注目 。 Using JS like you are (especially inline JS) has a habit of getting messed up due to Turbolinks.
像您一样使用JS(尤其是内联JS)有一个习惯,就是由于Turbolinks而变得一团糟。 Wherever possible, put the JS into the asset pipeline .
尽可能将JS放入资产管道 。
find
= single ; find
=单身 ; where
= collection . where
=集合 。 Using where
is the same as the WHERE
clause in SQL - it returns multiple records. 使用
where
与SQL中的WHERE
子句相同-它返回多个记录。 Find
always returns a single record; Find
总是返回单个记录; thus: 从而:
Read up about nested routing . 阅读有关嵌套路由的信息 。 You're looking to load a
calendar
for a colleague
; 您要为
colleague
加载calendar
; you need to pass both parameters (which you don't do currently). 您需要传递两个参数(您当前不这样做)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.