Hey everyone! This problem is driving me absolutely insane! It seems like a bug in the rendering of JS by Rails but I'm not sure.
Brief synopsis:
I'm attempting to create a RELEASE which has_many TRACKs. These TRACKS have many TRACK_LINKS. These TRACK_LINKs then have associated TRACK_LINK_TYPEs (mp3, m3u, podcast, whatever). Think of it like an Album. So when adding a release, you can add the album tracks, and each album track can have different links (mp3, m3u, podcast, whatever). I'm at a very early stage and leveraging scaffolding - the user can create a release on the form, add tracks via JS and add track links via JS. This all works fine - but adding tracks does not work when I have the "Add Track Link" function in the code! It silently fails - no error, just goes to the # anchor.
In the main Release form i am rendering the TRACK partial and adding the link to add TRACKs:
<div id="tracks">
<%= render :partial => 'track', :collection => @release.tracks -%>
</div>
<%= add_track -%>
Now in the TRACK partial, I am rendering the TRACK_LINK partial and adding the link to add TRACK_LINKs:
<div class="track">
<fieldset>
<legend>Track</legend>
<p>
<% @track = track %>
<%= error_messages_for :track -%>
<% fields_for_track(track) do |track_form| -%>
Track Name
<br />
<%= track_form.text_field :name -%>
<%= link_to_function "remove", "$(this).up('.track').remove()" -%>
<% track_links_id = "track_links_#{Time.now.to_i.to_s}" %>
<div id="<%= track_links_id %>">
<%= render :partial => 'track_link', :collection => @track.track_links -%>
</div>
<%= add_track_link track_links_id -%>
<% end -%>
</p>
</fieldset>
</div>
And in the TRACK_LINK partial, I am creating the TRACK_LINK fields (with their associated TRACK_LINK_TYPE field):
<div class="track_link">
<% @track_link = track_link -%>
<% fields_for_track_link(track_link) do |track_link_form| -%>
Track Link
<br />
<%= track_link_form.text_field :url -%>
<%= select ("track_link_type", "id", @track_link_type.map {|type| [type.name, type.id]}) -%>
<%= link_to_function "remove", "$(this).up('.track_link').remove()" -%>
<% end -%>
</div>
Finally, here are the link_to_function helper methods:
module ReleasesHelper
def fields_for_track(track, &block)
prefix = track.new_record? ? 'new' : 'existing'
fields_for("release[#{prefix}_track_attributes][]", track, &block)
end
def fields_for_track_link(track_link, &block)
prefix = track_link.new_record? ? 'new' : 'existing'
fields_for("track[#{prefix}_track_link_attributes][]", track_link, &block)
end
def add_track
track = Track.new
track.track_links.build
link_to_function 'Add Track' do |page|
page.insert_html :bottom, :tracks, :partial => 'track', :object => track
end
end
def add_track_link(name)
link_to_function "Add Track Link" do |page|
page.insert_html :bottom, name, :partial => 'track_link', :object => TrackLink.new
end
end
end
The outcome is that each link_to_function works fine, but when I have the "Add Track" and "Add Track Link" functions at the same time, the "Add Track" link_to_function doesn't work. Something about it rendering the "Add Track Link" function is messing it up! Apologies for the long ass post! Hopefully its not annoying and someone can lend a hand?
best, Praveen