代码之家 › 专栏 › 技术社区 › BenKoshy Mayinx

咖啡脚本事件未启动-为什么不?

coffeescript ruby-on-rails jquery

BenKoshy Mayinx · 技术社区 · 10 年前

我似乎连一个咖啡剧本都拿不到,甚至连开火都没有。我的代码在下面,我希望它将来会对某人有所帮助。

问题:为什么咖啡脚本没有启动?

我想做什么

我正在尝试创建一个动态选择菜单,就像Ryan Bates的 http://railscasts.com/episodes/88-dynamic-select-menus-revised?view=comments
我正在尝试创建三个选择菜单。用户首先选择客户机,然后选择项目,最后选择建筑。客户有许多项目,其中有许多建筑。显然,我们想限制用户的选择,否则如果不先选择客户,然后再选择项目,他们就必须从100多栋建筑中进行选择。

这是我的咖啡描述:

    ## This bit works fine
    jQuery ->
      projects = $('#project_id').html()                        #Gets the project drop down elements
      $('#client_id').change ->                                 #If we change our client selection then:
        client = $('#client_id :selected').text()               # OBtain the client 
        options = $(projects).filter("optgroup[label='#{client}']").html() #Filter all projects by client
        if options
          $('#project_id').html(options)                      # redraw the drop down menu to show only projects by a specific client.
        else
          $('#project_id').empty()

    #This is not firing for some reason ---------------->
      $('#project_id').change -> 
        alert('hello')
        buildings = $('#building_id').html()    
        project = $('#project_id :selected').text()   
        options1 = $(buildings).filter("optgroup[label='#{project}']").html()
        if options1
          $('#building_id').html(options1)
        else
          $('#building_id').empty()

这是我的表格:

<%= form_for(@rate) do |f| %>
  <%= render "shared/errors", object: @rate %>

  <fieldset>
    <ol>
      <li class="required">             
        <%= 'client_id included' %>
        <%= collection_select(:client, :client_id, Client.all, :id, :name, {include_blank: true}, html_options = {:id => 'client_id'} ) %>                  
      </li>

      <li class="required">
        <%= "Now for the project" %>
        <%= grouped_collection_select :building, :project_id, Client.all, :projects, :name, :id, :name,   {include_blank: true}, html_options = {:id => 'project_id'} %>
      </li>

      <li class="required">
        <%= "Now for the building" %>
        <%= grouped_collection_select :rate, :building_id, Project.order(:name), :buildings, :name, :id, :name,   {include_blank: true}, html_options = {:id => 'building_id'} %>
      </li>

 <!-- The bits in the middle are more or less superfluous '-->

    </ol>
    <p>
      <%= f.submit %>
      <%= link_to "Cancel", rates_path, class: 'button' %>
    </p>
  </fieldset>
<% end %>

HTML输出

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" media="all" href="/assets/buildings.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/buildings_users.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/clients.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/job_types.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/levels.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/projects.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/rates.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/scaffolds.self-d8a942e24537698777a64d6b68054e18e50999d296516c9493a2fd4e5d60af81.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/application.self-d885a0a66bd595c10edb24f8879f94e334d88be0730c4d7c7a7b57c731c09037.css?body=1" data-turbolinks-track="true" />
<link rel="stylesheet" media="all" href="/assets/dataTables/jquery.dataTables.self-7311c6e43c663ee33d9337f66262109ff492bd7f4d6931ab91bf3e5d16996e4d.css?body=1" data-turbolinks-track="true" />
  <script src="/assets/jquery.self-660adc51e0224b731d29f575a6f1ec167ba08ad06ed5deca4f1e8654c135bf4c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery.turbolinks.self-176b9819f30444d441e820bbccd3264fe57753aeafd54dec732b0dbc77129a2a.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery_ujs.self-e87806d0cf4489aeb1bb7288016024e8de67fd18db693fe026fe3907581e53cd.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/dataTables/jquery.dataTables.self-f520d04a662abc3bbb379438d969df199552297a55b74651a9e2b33b775df3ed.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/turbolinks.self-c37727e9bd6b2735da5c311aa83fead54ed0be6cc8bd9a65309e9c5abe2cbfff.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/cocoon.self-6874ad698cefd21cc1119b773550f61b5c1a60396460f015222af59293affe80.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/buildings.self-3459e57b18d5a1aa4a87df1e247d6e79661ece4c5393a0eaefe33c7aa2bbd4f7.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/buildings_users.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/clients.self-63aba6d2aaa54e15667299e2c02a9048af4b8ccc2a466875187772656308d251.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/job_types.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/levels.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/projects.self-9e4e52aed79a76394e24a14f669c14567fe2dd8743d9823305ca453005602d2c.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/rates.self-3dc44bfaec2fed1ef3dcafb28d086bd17a05da66443bb3162dabb4be4f325d3b.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-44dc72337fbefc4f8c73fc8781b922cf9e4f99f8d068e6563c3820851d9390f6.js?body=1" data-turbolinks-track="true"></script>
  <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="1tcpiwfep0X1hhR+sZdr41Kn9djZfkDt/Mi+UAWO8Tatv73vzGSnR1DPR7ccUxtATBLxjOTNBA1LfFLO9mPMPg==" />
</head>
<body>
<header id="page-header">
  <div id="masthead">
    <h1><a href="/">Home Page</a></h1>
        <!--
    <nav>

      <p>
      </p>

    </nav>
        -->
  </div>
</header>

<div id="wrapper">

  <div id="container">
    <section id="sidebar">
      <aside id="sidebar">
  <nav>
    <ul>
      <li class="clients">
      </li>
          <li class="create-client">
        </li>
    </ul>
  </nav>
</aside>

    </section>
    <section id="content">
      <form class="new_rate" id="new_rate" action="/rates" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="ooJoSX4sk0TQ4ZxrqW24pxxQLBWXrcGL+A3J5jFZCo/Z6vwttZaTRnWoz6IEqcgEAuUoQaoehWtPuSV4wrQ3hw==" />


<fieldset>
    <ol>
            <li class="required">               
                    client_id included
                    <select id="client_id" name="client[client_id]"><option value=""></option>
<option value="2">Safeway Precast</option>
<option value="3">Bianco Precast</option></select>                  
            </li>

      <li class="required">
                    Select Project
                    <select id="project_id" name="building[project_id]"><option value=""></option>
<optgroup label="Safeway Precast"><option value="5">world map house</option>
<option value="7">project2</option></optgroup><optgroup label="Bianco Precast"><option value="6">Test1</option></optgroup></select>
            </li>

            <li class="required">
                    Now for the building
                    <select id="building_id" name="rate[building_id]"><option value=""></option>
<optgroup label="Test1"><option value="19">test2</option></optgroup><optgroup label="project2"></optgroup><optgroup label="world map house"><option value="14">Asdf</option>
<option value="15">351</option>
<option value="16">350</option>
<option value="17">350</option>
<option value="18">X</option></optgroup></select>
            </li>


      <li class="required">
        <label for="rate_rate">Rate</label>
        <input autofocus="autofocus" type="number" name="rate[rate]" id="rate_rate" />
      </li>
      <li class="required">
        <label for="rate_job_type">Job type</label>
        <select name="rate[job_type]" id="rate_job_type"><option value="1">Detailing Redraw</option>
<option value="2">Tracing</option>
<option value="3">Mark up Updation</option></select>
      </li>

      <li class="required">
        <label for="rate_note">Note</label>
        <textarea cols="80" rows="15" name="rate[note]" id="rate_note">
</textarea>
      </li>

<!-- and now let's try and dynamically select our building'-->

    </ol>
    <p>
      <input type="submit" name="commit" value="Create Rate" />
      <a class="button" href="/rates">Cancel</a>
    </p>
  </fieldset>
</form>

    </section>
  </div>

</div>

<footer id="page-footer">
  <p>
    Copyright &copy; 2016 Advanced Bboi Productions
    <a href="http://www.tek1.com.au">Tek1</a>
  </p>
  <p>
    For invoicing purposes only.
  </p>
</footer>


</body>
</html>

知道问题在哪里吗?非常感谢您的帮助:

这是第三个选择菜单,如下所示,它拒绝根据前面两个菜单所做的选择菜单进行优化,这让我很难过。当选择客户机时,下一个选择菜单projects将显示一个基于所选客户机的优化菜单。现在我需要根据选择的项目来优化下一个菜单,但它并没有这样做。非常感谢您的帮助。在任何情况下,当我得到完整的解决方案时,我都会发布代码。

<select id="building_id" name="rate[building_id]"><option value=""></option>
<optgroup label="Test1"><option value="19">test2</option></optgroup><optgroup label="project2"></optgroup><optgroup label="world map house"><option value="14">Asdf</option>
<option value="15">351</option>
<option value="16">350</option>
<option value="17">350</option>
<option value="18">X</option></optgroup></select>

1 回复 | 直到 10 年前

BenKoshy Mayinx 10 年前

这是我的新密码

jQuery ->
  projects = $('#project_id').html()
  $('#client_id').change ->
    client = $('#client_id :selected').text()     
    options = $(projects).filter("optgroup[label='#{client}']").html()
    $('#project_id option').remove()
    if options
        $('#project_id').html(options)
        $('#project_id').val('')        
    else
        $('#project_id').empty()

jQuery ->  
  buildings = $('#building_id').html()             # gets the buildings sub-sub-list elements
  $('#project_id').change ->                       # when the parent list changes then trigger:
      project = $('#project_id :selected').text()  # select what the parent project is
      options1 = $(buildings).filter("optgroup[label='#{project}']").html() # filter the buildings by parent
      $('#building_id option').remove()            #clears the building element 
      if options1        
        $('#building_id').html(options1)            # applies changes to selection based on parent
        $('#building_id').val('')        
      else
        $('#buidling_id').empty()                    #show nothing if empty