Dropdown In Jquery Producing Dynamic Fields

Basically i want to generate form fields dynamically based on the selection made in dropdown. I have this below code in my view. <%= javascript_include_tag 'hive' %><%=

Solution 1:

I see you having at least two potential issues here.

Load jQuery

First, you are using jQuery in the javascript file. Since you are loading hive.js directly, you need to ensure the jQuery library is also loaded.

The best way to prevent issues here is to add:

<%= javascript_include_tag "hive" %>

to just above the closing </body> tag in app/views/layouts/application.html.erb.

Then, within app/assets/javascripts/application.js, you would include:

//= require jquery//= require hive

This means you'll probably want a catch within the javascript file to ensure the code runs if the elements are available (more on this below).

Wait To Bind The Event

Second, even if jQuery is loaded, you don't want to bind the event handler until the content exists on the page. There is a possibility this javascript looks to bind a change event to $('.dropdown') before that element actually exists on the page.

To solve this, I would force the javascript to wait until the page is loaded to run. Combining this idea with ensuring the content is there gives us something like this for app/assets/javascripts/hive.js:

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

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

      alert(divClass);

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

Warning

And last, because careful about using <%= javascript_include_tag %> freely. Whenever you use this directly, you need to add the file to config/production.rb to ensure it's compiled for production. Otherwise it will be missing when you deploy and cause errors.

This can quickly become a hassle. In rails, application.js is automatically precompiled. This is why it's much, much easier to use application.js as a javascript manifest file, and then use checks like $('.dropdown').length > 0 to know whether or not to run the javascript code. That can quickly get messy, too, but it's much easier to deploy the app.

Solution 2:

Replace

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

with

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

Note the , after @obj. This should give you first error.

Second, load the javascript after the form <% end %>. The reason for doing this is that .dropdown element should be existing before calling any action on it.

EDIT

Check the JSFiddle. Also, make sure that jQuery library is included in your generated HTML. When the view is rendered in browser, right click and do View Source, check if you see a script tag with src jQuery.js.