2

I'm having trouble toggling divs based on a selection box in Rails 4. I am trying to show certain form fields on a REQUEST form when a certain PRODUCT is selected. I have no jquery experience - this is what I have so far, but no bueno:

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

您在<script>标签中使用的是 coffeescript 而不是 javascript，但您指定的是<script type="text/javascript">.

您可以将其更改为咖啡脚本，即<script type="text/coffeescript">. 请参阅coffeescript.org 上的说明。

更好的做法是在您的 rails 项目中启用资产管道，<script>从视图中删除标签并将咖啡脚本放在app/assets/javascripts. 有关更多详细信息，请参阅rails 资产管道指南。

另一个提示是在浏览器中启用 devtools 并查看 javascript 控制台。这是编写 javascript 错误消息的地方，包括 JS 语法错误。

祝你好运！

于 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 回答