javascript - Rails Ajax 远程 Javascript

Question

我有三个选择框，可以动态更改其选项。目的是查找执行多项工作的员工。我的问题是我的 CoffeeScript 文件仅触发一次。当选择第一个选项后更新并渲染部分时，我无法让它触发第三个选项。

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

第一个选择包含所有作业的列表:

选择第一个作业后，将过滤第二个选择，排除仅由一个员工执行的作业

第三个选择过滤作业，排除仅由两名员工执行的作业，留下由三名或更多员工执行的作业

我的部分:

<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) -> 

我的 Controller 方法

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(' 时，第二个和第三个 #employee_job 元素不在页面上Turbolinks:load') 触发。

对于任一问题，您都可以通过更新您的 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() 方法的更多信息 here 。