Rails Ajax远程Javascript

Question

我有三个选择框，可动态更改其选项。 目的是寻找执行一项以上Job Employees 。 我的问题是我的CoffeeScript文件仅触发一次。 当选择第一个选项后更新并渲染局部文件时，我无法在第三个选项上触发它。

在触发javascript文件assets/javascripts/employees.js.coffee并更新了第二个选择之后，我只能获取呈现部分代码的javascript文件来执行第三个代码。

首先选择具有所有Jobs的列表：

选择第一个Job后，然后过滤第二个选择，不包括仅由一个Employee执行的Jobs

第三个选择滤波器Jobs不包括那些仅由两个执行Employees ，剩下的工作由三个或更多的执行Employees

我的部分：

<div class="available_jobs">
  <%= form_tag('employee', action: :index, method: :get) do%>
    <div class="ui stackable three column grid">
        <div class="five wide column"> <%= select_tag "job1", options_for_select(@jobs_available), id: 'job_option_1',prompt:"Select Job", class:"fluid ui dropdown"%></div>
        <div class="five wide column"> <%= select_tag "job2", options_for_select(@jobs_available), id:"job_option_2",prompt:"Select Job", class:"fluid ui dropdown"%></div>
        <div class="five wide column"> <%= select_tag "job3", options_for_select(@jobs_available), id:"job_option_1",prompt:"Select Job", class:"fluid ui dropdown"%></div>
    </div>
    <br/>
    <div class="four wide column"> <%=submit_tag "Get Employees", class: "ui primary button"%></div>
<%end%>
</div>

这是我的asset / javascripts / employees文件夹中的javascript：

$(document).on 'turbolinks:load', ->
  $('#employee_job').change ->
    $.ajax '/update_available',
      type:"GET",
      dataType: 'script'
      data: {
        available_jobs:
          job1: $("#job_option_1 option:selected").val()
          job2: $("#job_option_2 option:selected").val()
          job3: $("#job_option_3 option:selected").val()
      }
      error: (jqXHR, textStatus, errorThrown) ->
      success: (data, textStatus, jqXHR) -> 

我的控制器方法

def update_available
  employee_params=[]
  employee_params = params[:available_jobs].values_at :job1, :job2, :job3
  employee_params.reject!(&:blank?)
  @employee_jobs=[]

  @employees = Employee.joins(:employee_jobs).where(employee_jobs: { job: employee_params }).where("employee_jobs.job_name").group("employee.id").having("count(*) = #{employee_params.count}")
  @employees.each do|e|
    e.employee_jobs.each do |j|
      @employee_jobs.push(j.job_name)
    end
  end

@employee_jobs = @employee_jobs.uniq

respond_to do |format|
  format.js
end

结束

最后是update_available.js.coffee

$( "#job_option_2" ).replaceWith('<div class="five wide column"> <%= select_tag "job2", options_for_select(@employee_jobs), id:"job_option_2",prompt:"Select Job", class:"fluid ui dropdown"%></div>')
$( "#job_option_3" ).replaceWith('<div class="five wide column"> <%= select_tag "job3", options_for_select(@employee_jobs), id:"job_option_3",prompt:"Select Job", class:"fluid ui dropdown"%></div>')

Answer 1

根据您的描述，听起来可能是您正在更新#employee_job元素并删除附加的事件处理程序，或者当.on（'turbolinks：load时，第二个和第三个#employee_job元素不在页面上'）起火。

对于任何一个问题，您都可以通过从以下位置更新coffeescript文件来解决：

$(document).on 'turbolinks:load', ->
  $('#employee_job').change ->
    $.ajax '/update_available',
      ...

对此：

$(document).on 'turbolinks:load', ->
  $('body').on 'change', '#employee_job1', ->
    $.ajax '/update_available',
      ...
  $('body').on 'change', '#employee_job2', ->
    $.ajax '/update_available',
      ...
  $('body').on 'change', '#employee_job3', ->
    $.ajax '/update_available',
      ...

您可以在此处了解有关jQuery的.on()方法的更多信息。