Kaffee-Skript-Ereignis nicht feuern - warum nicht?

Ich kann nicht scheinen, um ein Kaffee-Skript sogar schießen zu bekommen. Mein Code ist unten - und ich hoffe, dass es jemandem in Zukunft helfen wird.Kaffee-Skript-Ereignis nicht feuern - warum nicht?

Frage: Warum feuert das Kaffee-Skript nicht?

was bin ich

zu tun versuchen, Ich versuche, eine dynamische Auswahlmenü zu erstellen, wie in Ryan Bates' railcasts: http://railscasts.com/episodes/88-dynamic-select-menus-revised?view=comments
Ich versuche, drei zu schaffen Auswahlmenüs. Zuerst wählt der Benutzer den Client, dann das Projekt und dann das Gebäude. Ein Kunde hat viele Projekte mit vielen Gebäuden. Offensichtlich möchten wir die Benutzerauswahl einschränken, sonst müssten sie aus über 100 Gebäuden auswählen, wenn diese Ergebnisse nicht gefiltert werden, indem zuerst der Client und dann das Projekt ausgewählt wird.

Hier ist mein Coffee:

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

Und hier ist meine Form:

<%= 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-Ausgabe

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

Irgendeine Idee, wo das Problem ist? Jede Hilfe viel appricated:

Es ist das dritte Auswahlmenü, siehe unten, die basierend auf den Auswahlmenü Entscheidungen von den zwei Menüs, die es vor, die mir Kummer bereitet macht, verfeinert werden. Wenn ein Client ausgewählt wird, zeigt das nächste Auswahlmenü, Projekte, ein verfeinertes Menü, basierend auf dem ausgewählten Client. Jetzt brauche ich das nächste Menü, das basierend auf dem gewählten Projekt verfeinert werden muss, tut es aber nicht. Jede Hilfe wird sehr geschätzt. Ich werde auf jeden Fall Code zur Komplettlösung posten, wenn ich es bekomme.

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

Quelle

2016-07-17 BKSpurgeon

wie zu viel symbolische params für mich scheint beim Aufbau wählen: 'Client.all,: Projekte: Name,: id,: name'. Wird es von jQuery korrekt gefüllt? Könnten Sie auch den HTML-Code, der von form generiert wurde, anhängen? – twonegatives

@twonegatives danke die ersten beiden Menüs funktionieren einwandfrei - auch der dritte funktioniert gut. Wenn ich einen Client im ersten Auswahlmenü auswähle, wird das zweite Menü, Projekte, verfeinert. Aber wenn ich ein Projekt auswähle, möchte ich auch das dritte Menü verfeinern. Es wird in diesem Stadium nicht verfeinert. – BKSpurgeon

Ich habe drei Dropdown-Menüs. Ich möchte, dass die zweite durch die Auswahl gefiltert wird, die im ersten Menü getroffen wurde, und ich möchte, dass die dritte wiederum durch die Auswahl gefiltert wird, die in der zweiten (und indirekt durch die erste) gemacht wird. Das Problem, das hier aufgetreten ist, ist, dass, wenn ein Client ausgewählt wird (das erste Menü), dann das Projektmenü gefiltert wird (dh das zweite Menü), aber dieser Filterprozess löst KEINE Änderungsereignisse im Menü aus, die anschließend den Filter filtern drittes Menü. Also habe ich den Code geändert, um Leute zu zwingen, eine Auswahl zu treffen - weil die anfängliche Auswahl jetzt leer ist.

hier ist mein neuer Code

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

Quelle

2016-07-18 02:03:25 BKSpurgeon

Kaffee-Skript-Ereignis nicht feuern - warum nicht?

Antwort

Verwandte Themen