Home/ Questions/Q 9200299
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T22:44:06+00:00

Alright, I’m a JS / JQuery / Coffeescript noob. This is probably easy points

  • 0

Alright, I’m a JS / JQuery / Coffeescript noob. This is probably easy points for someone.

Having successfully implemented RBate’s Nested Form Model railscast, I am attempting to reproduce this in a simpler model: Chapters have many counties.

I have a chapters.js.coffee file with the following code:

jQuery ->
  $('form').on 'click', '.remove_fields', (event) ->
    $(this).prev('#destroy').val('1')
    $(this).closest('fieldset').hide()
    event.preventDefault()

This code works just fine in the other model. But not here.

_chapters_form.html.erb:

<div class="row span12">    
<%= form_for(@chapter) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="span2"><strong>Chapter name:</strong></div>
    <div class="span6"><%= f.text_field :name %></div>
    <div class="span2"><strong>Chapter Number:</strong></div>
    <%= f.number_field :chapter_num, class: "span2" %>
</div>
<div class="row span12">
<div class="span12">
    <%= f.fields_for :counties do |builder| %>
        <%= render 'county_fields', f: builder %>
    <% end %>
</div>
    <% if f.object.new_record? then link = 'Add the Chapter' else link = 'Update Chapter' end %>
      <%= f.submit "#{link}", class: "btn btn-large btn-primary" %>
      <%= link_to "Cancel", chapters_path, class: "btn btn-large btn-primary" %>
    <% end %>
</div>

and:

_county_fields.html.erb:

<fieldset>
<div class="well span12">
    <div class="row span12">
        <div class="span3">County Number: <br /><i>(6-digit FIPS code)</i></div>
        <div class="span2"><%= f.number_field :county_num %></div>
        <div class="span2">County Name:</div>
        <div class="span5"><%= f.text_field :name %></div>
    </div>
    <div class="row span12"><hr></div>
    <div class="row span12">
        <div class="span6">Move to new Chapter:</div>
        <div class="span6"><%= select(:county, :chapter_id, Chapter.all.collect {|c| [c.name, c.id]}) %></div>
    </div>
    <div class="row span12">
        <div class="pull-right">
            <%= f.hidden_field :_destroy, id: "destroy" %>
            <%= link_to "remove county", "#", class: "remove_fields" %>
        </div>
    </div>
</div>
</fieldset>

There are no errors in the JS. Again, noob speaking, but it doesn’t seem that the JS is getting called. Clicking <%= link_to "remove county", "#", class: "remove_fields" %> just adds the # to the URI.

What am I doing wrong?

As requested, the HTML in a fiddle which doesn’t work either.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your HTML is broken. You open a div before the form element, then close it before you close the form. If you move the form element up to just inside the container div, it works. 

    <body>
  <div class="container-fluid">
    <form accept-charset="UTF-8" action="/chapters/7" class="edit_chapter" id="edit_chapter_7" method="post">
      <div class="row-fluid">
...
     </div>
    </form>
  </div>
</body>

    You should take more care in the indenting of your HTML to help avoid this sort of simple mistake. Code format matters.

    • 0