Question

基本上我想根据下拉菜单中的选择动态生成表单字段。我的视图中有以下代码。

<%= javascript_include_tag "hive" %>

<%= simple_form_for(@obj :html => {:class => 'form-vertical'}) do |f| %>
  <%= f.input :reason, :collection => ['Human', 'Event'], :input_html => { :class => 'dropdown'} %>

  <div class="toggle human" style="display:none;">
    <%= f.input :name %>
  </div>

  <div class="toggle event" style="display:none;">
    <%= f.input :date %>
  </div>

  <%= f.button :submit %>

<% end %>

现在我在assets / javascript / hive.js中有以下代码

$('.dropdown').change(function() {
  // hide divs first
  $('form .toggle').hide();

  // get value from dropdown
  var divClass = $('.dropdown').val().toLowerCase();

  alert(divClass);

  // show necessary div
  $('.' + divClass).show();
});

对我来说一切看起来都很好..但不知何故它不起作用。任何帮助都是不可能的

Answer 1

替换

<%= simple_form_for(@obj :html => {:class => 'form-vertical'}) do |f| %>

与

<%= simple_form_for(@obj, :html => {:class => 'form-vertical'}) do |f| %>

请注意@obj之后的,。这应该会给你第一个错误。

其次，在表单<% end %>之后加载javascript。这样做的原因是.dropdown元素应该在调用任何操作之前存在。

修改

检查JSFiddle。此外，请确保生成的HTML中包含jQuery库。在浏览器中呈现视图时，右键单击并执行View Source，检查您是否看到带有script的{{1}}标记。

Answer 2

我发现你在这里至少有两个潜在的问题。

加载jQuery

首先，您在javascript文件中使用jQuery。由于您直接加载hive.js，因此您需要确保还加载了jQuery库。

此处预防问题的最佳方法是添加：

<%= javascript_include_tag "hive" %>

位于</body>的结束app/views/layouts/application.html.erb标记上方。

然后，在app/assets/javascripts/application.js中，您将包括：

//= require jquery
//= require hive

这意味着您可能希望在javascript文件中捕获一个catch以确保代码在元素可用时运行（详见下文）。

等待绑定事件

其次，即使加载了jQuery，您也不希望在页面上存在内容之前绑定事件处理程序。在该元素实际存在于页面上之前，这个javascript可能会将更改事件绑定到$('.dropdown')。

要解决这个问题，我会强制javascript等到页面加载运行。将这个想法与确保内容相结合，可以为app/assets/javascripts/hive.js提供类似的内容：

$(document).ready(function() {
  if( $('.dropdown').length > 0 ) {
    $('.dropdown').change(function() {
      // hide divs first
      $('form .toggle').hide();

      // get value from dropdown
      var divClass = $('.dropdown').val().toLowerCase();

      alert(divClass);

      // show necessary div
      $('.' + divClass).show();
    });
  }
});

警告

最后，因为小心谨慎地使用<%= javascript_include_tag %>。无论何时直接使用此文件，都需要将文件添加到config/production.rb以确保将其编译为生产。否则，在部署并导致错误时将丢失它。

这很快就会变成麻烦。在rails中，application.js会自动进行预编译。这就是为什么使用application.js作为javascript清单文件，然后使用$('.dropdown').length > 0之类的检查来了解是否运行javascript代码要容易得多。这也可能很快变得混乱，但部署应用程序要容易得多。

Jquery中的下拉列表生成动态字段

2 个答案: