2

Rails 4 の選択ボックスに基づいて div を切り替えるのに問題があります。特定の製品が選択されているときに、REQUEST フォームに特定のフォーム フィールドを表示しようとしています。私はjqueryの経験がありません-これは私がこれまでに持っているものですが、ブエノはありません:

// assets/javascripts/requests.js.coffee

jQuery ->

    #//this handles product population based on category select and is working:

    $('#request_product_id').parent().hide()
    products = $('#request_product_id').html()
    emptyOption = $('<option />').attr('value', '');
    console.log(products)
    $('#request_category_id').change ->
        category = $('#request_category_id :selected').text()
        options = $(products).filter("optgroup[label='#{category}']").prepend(emptyOption).html()
        console.log(options)
        if options
            $('#request_product_id').html(options)
            $('#request_product_id').parent().show()
        else
            $('#request_product_id').empty()
            $('#request_product_id').parent().hide()


    #// this should handle <div> toggle based on product select, but nothing happens:

    $(document).ready ->
    $(".product").on "change", ->
    if $(this).val() is "6"
      $("#exit_employee").show()
      $("#new_employee").hide()
      $("#change_employee").hide()
    if $(this).val() is "7"
      $("#new_employee").show
      $("#exit_employee").hide()
      $("#change_employee").hide()
    if $(this).val() is "8"
      $("#change_employee").show
      $("#exit_employee").hide()
      $("#new_employee").hide()


    --------------
//.css

#exit_employee,
#new_employee,
#change_employee {
    display: none;
}

--------------

// _form.html.erb

<%= form_for(@request) do |f| %>

  <div class="field" id="category">
    <%= f.label :category_id, "Select a Category:" %>
    <%= f.collection_select(:category_id, Category.active.sorted, :id, :name, :include_blank => true ) %>
  </div>

  <div class="field" id="product">
    <%= f.label :product_id, "Select a Product/Service:" %>
    <%= f.grouped_collection_select :product_id, Category.active.sorted, :products, :name, :id, :name, include_blank: true %>
  </div>

  //THE ABOVE ALL WORKS -----  NOW....BASED ON PRODUCT SELECTED ABOVE, SHOW DIV BASED ON PRODUCT SELECTION


  <div>

    <div class="field" id="exit_employee"> 
        Product 6 Fields
    </div>

    <div class="field" id="new_employee">
        Product 7 Fields
    </div>

     <div class="field" id="change_employee">
        Product 8 Fields
     </div>

  </div>

 //ALWAYS SHOW REQUESTOR NOTE

    <div class="field" id="requestor_note">
        <%= f.label :requestor_note, "Please provide full details for your request:" %>
        <%= f.text_area :requestor_note %>
    </div>

    <div class="actions">
        <%= f.submit "Submit" %>
    </div>
<% end %>
4

2 に答える 2

0

タグでjavascript ではなく coffeescript を使用して<script>いますが、指定しています<script type="text/javascript">。

これを coffeescript に変更できる場合があります<script type="text/coffeescript">。coffeescript.org の説明を参照してください。

Rails プロジェクトでアセット パイプラインを有効に<script>し、ビューからタグを削除して、coffeescript を .xml の下のファイルに配置することをお勧めしますapp/assets/javascripts。詳細については、Rails アセット パイプライン ガイドを参照してください。

もう 1 つのヒントは、ブラウザーで devtools を有効にして、javascript コンソールを確認することです。ここには、JS 構文エラーを含む JavaScript エラー メッセージが書き込まれます。

幸運を！

于 2013-07-26T15:49:26.717 に答える
0

インデントに注意してください。コーヒースクリプトでは、場合によってはインデントが重要です

$(document).ready ->
$(".product").on "change", ->
if $(this).val() is "6"
  $("#exit_employee").show()
  $("#new_employee").hide()
  $("#change_employee").hide()
if $(this).val() is "7"
  $("#new_employee").show
  $("#exit_employee").hide()
  $("#change_employee").hide()
if $(this).val() is "8"
  $("#change_employee").show
  $("#exit_employee").hide()
  $("#new_employee").hide()

する必要があります

$(document).ready ->
  $(".product").on "change", ->
  if $(this).val() is "6"
    $("#exit_employee").show()
    $("#new_employee").hide()
    $("#change_employee").hide()
  if $(this).val() is "7"
    $("#new_employee").show
    $("#exit_employee").hide()
    $("#change_employee").hide()
  if $(this).val() is "8"
    $("#change_employee").show
    $("#exit_employee").hide()
    $("#new_employee").hide()
于 2016-07-21T10:14:17.933 に答える