We Keep Coding

Assigning value to input field on nested:fieldAdded

I have an upload file field. On change of this field, I am triggering add nested field and on 'nested:fieldAdded' I am trying to assign the value to the input file field given in the new generated nested form by using the following jquery:
$(document).off('change').on('change', '#add_gallery_image, #add_place_image',function () {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
var file = $(this)[0].files[0];
file_selector_id = $(this)[0].id;
var reader = new FileReader();
var association = ''
if (file_selector_id.includes("add_gallery_image")) {
association = 'tribute_galleries'
limit_count = GALLERY_LIMIT_JS
} else {
association = 'tribute_places'
limit_count = PLACES_LIMIT_JS
}
reader.onload = function (e) {
file_src = e.target.result;
$(".add_nested_fields[data-association='" + association + "']").click();
}
reader.readAsDataURL($(this)[0].files[0]);
// reader.readAsDataURL($(this)[0].files[0]);
}
})
$(document).on('nested:fieldAdded', function(event){
if(file_selector_id!="") {
var field = event.field;
var dateField = field.find('.add_image');
dateField[0].files = $('#' + file_selector_id)[0].files;
}
})
<div class="upload-btn position-relative">
<%= file_field_tag :image, :name => "tribute_gallery[image]", :class => "add_gallery_image image_uploader1", :id => "add_gallery_image","data-target": "#tribute_tribute_galleries_attributes_0_image-error", accept: 'image/png,image/jpeg,image/jpg', "data-id": gallery_count.present? ? gallery_count + 1 : 1, disabled: gallery_count.present? && gallery_count >= GALLERY_LIMIT %>
<a href="javascript:void(0);" class="text-transform-none f-semi theme-btn w-100 text-center theme-large-btn">
<span class="fa fa-upload mr-2 "></span> <%= I18n.t(:'tribute_setup.placeholders.upload_more') %>
</a>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="box-sec">
<% positionCount = 0 %>
<div class="row tribute_galleries_list" >
<%= f.fields_for :tribute_galleries, wrapper: false, html: { autocomplete: "off"} do |gallery_form| %>
<% if (gallery_form.present? && gallery_form.object.id.present? && gallery_form.object.image.present?) || (gallery_form.present? && !gallery_form.object.id.present? && !gallery_form.object.image.present?) %>
<% positionCount = positionCount + 1 %>
<%#= gallery_form.object.id.present? ? 'first_gallery_div' : '' %>
<div class="col-md-3 col-sm-6 fields first_gallery_div" data-count="<%= gallery_form.object.position.present? ? gallery_form.object.position : (positionCount.present? ? positionCount : '') %>" data-id="<%= gallery_form.object.id.present? ? gallery_form.object.id : '' %>" >
<%= gallery_form.hidden_field :position, :value => gallery_form.object.position.present? ? gallery_form.object.position : (positionCount.present? ? positionCount : ''), :class => 'gallery_position' %>
<div class="photo-img-sec position-relative ">
<div class="photo-img mb-2">
<%= gallery_form.file_field :image, :class => "add_image" ,:style=>"display:none" %>
<img src="<%= gallery_form.object.image.present? ? gallery_form.object.image : "/assets/gallery-dummy.png" %>" width="247" height="162" alt="personlized memorial page online" class="view_image_tag">
<% if gallery_form.object.user_id.present? && gallery_form.object.user_id != current_user.id %>
<% if gallery_form.object.user.present? && gallery_form.object.user.user_detail.present? %>
<div class="photo-added">
<p class="small"><%= I18n.t(:'tribute_setup.placeholders.added_by') %>
<%= gallery_form.object.user.user_detail.first_name.present? ? gallery_form.object.user.user_detail.first_name : '' %> <%= gallery_form.object.user.user_detail.last_name.present? ? gallery_form.object.user.user_detail.last_name : '' %>
</p>
</div>
<% end %>
<% end %>
</div>
<div class="form-group">
<%= gallery_form.text_field :map_link, :placeholder => I18n.t(:'tribute_setup.placeholders.google_link'), :class => "theme-input form-control map_link_class" %>
</div>
<div class="form-group">
<%= gallery_form.text_field :title, :placeholder => I18n.t(:'tribute_setup.placeholders.title')+I18n.t(:'tribute_setup.placeholders.optional'), :class => "theme-input form-control name_class title_class" %>
</div>
<div class="form-group">
<%= gallery_form.text_field :description, :placeholder => I18n.t(:'tribute_setup.placeholders.description')+I18n.t(:'tribute_setup.placeholders.optional'), :class => "theme-input form-control description_class" %>
</div>
<%= gallery_form.link_to_remove "<i class='fa fa-times' aria-hidden='true'></i>".html_safe, class:"remove-btn remove_gallery_image" %>
</div>
</div>
<%= gallery_form.hidden_field :user_id, :value => gallery_form.object.user_id.present? ? gallery_form.object.user_id : current_user.id %>
<% end %>
<% end %>
</div>
<p class='add_gallery_count' data-id="<%= gallery_count %>"><%= f.link_to_add "Add", :tribute_galleries, :data => {:target => ".tribute_galleries_list"}, :style => "display:none", :class=>"add_gallery_link" %></p>
</div>
</div>
</div>
Also, the above code is working fine for chrome but in firefox, it is assigning the last uploaded file value to all the newly generated nested forms along with the current generated nested form.

How to load rails form partials with jquery and submit as one form

In an attempt to make my rails html more readable I extracted several parts of it into partials. I then use jquery to render the partials. The issue is that now the form has come all "unhooked" so to speak, meaning when I attempt to submit the form it acts as though the partials don't exist. I suspect I am not understanding quite how forms work, because it seems like in other answers related to this the form builder isn't even addressed.
This SO question seems related to what I want to do but I think I'm too inexperienced to grasp it properly
The code I have thus far goes as follows:
/assets/javascripts/work_order.js
$(document).ready(function(){
$('.best_in_place').best_in_place();
$('#work_order_dueDate').datepicker();
$.datepicker.setDefaults({ dateFormat: 'dd-mm-yy'});
var selection_made = false
$('#work_order_project_type_id').change(function(){
if (!selection_made){
selection_made = true
var selection = $(this).find('option:selected').text();
if (selection == "Variable Data Mailing"){
$.get('/presort_informations/new');
$.get('/printing_instructions/new');
}
else if (selection == "Mailing"){
$.get('/presort_informations/new');
}
else if (selection == "Print Job"){
$.get('/printing_instructions/new');
}
}
});
});
and then
/views/work_orders/_form.html.erb
<%= form_for(#workorder) do |f| %>
<% if #workorder.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#workorder.errors.count, "error") %> prohibited this workorder from being saved:</h2>
<ul>
<% #workorder.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<fieldset class="general-info">
<legend>General</legend>
<div class="col-md-12">
<div class="col-md-3">
<div class="form-group">
<%= f.label :Job_Title, class: "control-label" %>
<%= f.text_field :title, class:"form-control" %>
</div>
<div class="form-group">
<%= f.label :Project_Type, class: "control-label" %>
<%= f.collection_select(:project_type_id, ProjectType.all, :id, :name, {:prompt => true}, {:class => "form-control"}) %>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<%= f.label :Rep, class: "control-label" %>
<%= f.text_field :rep, class:"form-control" %>
</div>
<div class="form-group">
<%= f.label :Labels, class: "control-label" %>
<%= f.collection_select(:labels_id, Labels.all, :id, :name, {:prompt => true}, {:class => "form-control"}) %>
</div>
</div>
<div class="col-md-3">
<div class= "form-group">
<%= f.label :Due_Date, class: "control-label" %>
<%= f.text_field :dueDate, class: "form-control" %>
</div>
<div class="form-group">
<%= f.label :Project_Description, class: "control-label" %>
<%= f.text_area :projectDescription, class: "form-control" %>
</div>
</div>
</div>
</fieldset>
<fieldset class="presort-information">
</fieldset>
<div class="col-md-6 printing">
</div>
<fieldset class="production-details">
<legend>Production</legend>
<%= f.fields_for :production_details, ProductionDetails.new do |ff| %>
<%end%>
</fieldset>
<%= f.hidden_field(:number, :value => #workorder.number) %>
<%= f.hidden_field(:client_id, :value => #workorder.client_id) %>
<%= f.submit(class: "btn btn-default") %>
<% end %>
and as an example of one of the partials:
/app/views/presort_informations/new.js.erb
$('.presort-information').append( '<%= j render("presort_informations/form") %>' );
/app/views/presort_informations/_form.html.erb
<legend>Mailing</legend>
<%= fields_for :presort_information, PresortInformation.new do |ff| %>
.
.
.
<% end %>
I'm not really sure how to tie this all together so that I can load the partials based on the select box, but then submit them all as one form.
Edit:
I found this SO question which deals with the same issue, but I suspect that because I am rendering the partial after the page has been loaded I no longer have access to the form builder variable.
$('.presort-information').append( '<%= j render("presort_informations/form", f: f) %>' );
gives an undefined variable error when it's called. I'm still not sure how to bridge this gap between jquery and rails.

Turns out it was a relatively (if new conceptually to me) easy fix
First, load each DOM partial in along with hidden sections.
<%= form_for(#workorder) do |f| %>
<% if #workorder.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#workorder.errors.count, "error") %> prohibited this workorder from being saved:</h2>
<ul>
<% #workorder.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<fieldset id="general-info-partial">
<%=render("genInfo", f: f)%>
</fieldset>
<fieldset id="presort-information-partial">
<%=render("presort_informations/form", f: f)%>
</fieldset>
<div class="col-md-6">
<fieldset id="printing-information-partial">
<%=render("printing_instructions/form", f: f)%>
</fieldset>
</div>
<fieldset id="production-details-partial">
<%=render("production_details/form", f: f) %>
</fieldset>
<%= f.hidden_field(:number, :value => #workorder.number) %>
<%= f.hidden_field(:client_id, :value => #workorder.client_id) %>
<input type="submit" value="Submit" class="btn btn-default">
<% end %>
<div id="hidden-general-info" class="hidden"></div>
<div id="hidden-presort-information" class="hidden"></div>
<div id="hidden-printing-information" class="hidden"></div>
Then the Javascript to move things in and out of the form:
$(document).ready(function(){
$('.best_in_place').best_in_place();
$('#work_order_dueDate').datepicker();
$.datepicker.setDefaults({ dateFormat: 'dd-mm-yy'});
var presortFields = $('#presort-information-partial');
var printingFields = $('#printing-information-partial');
var presortHidden = $('#hidden-presort-information');
var printingHidden = $('#hidden-printing-information');
presortHidden.html(presortFields.html());
presortFields.html('');
printingHidden.html(printingFields.html());
printingFields.html('');
$('#work_order_project_type_id').change(function(){
var selection = $(this).find('option:selected').text();
if (selection == "Variable Data Mailing"){
if (printingFields.html() == '' && presortFields.html() == ''){
printingFields.html(printingHidden.html()).hide().slideDown();
presortFields.html(presortHidden.html()).hide().slideDown();
}
else if(printingFields.html() == '' && !(presortFields.html() == '')){
printingFields.html(printingHidden.html()).hide().slideDown();
}
else if(!(printingFields.html() == '') && presortFields.html() == ''){
presortFields.html(presortHidden.html()).hide().slideDown();
}
}
else if (selection == "Mailing"){
if(!(printingFields.html() == '')){
printingFields.slideUp();
printingFields.html('');
presortFields.html(presortHidden.html()).hide().slideDown();
}else{
presortFields.html(presortHidden.html()).hide().slideDown();
}
}
else if (selection == "Print Job"){
printingFields.html(printingHidden.html()).hide().slideDown();
presortFields.slideUp();
presortFields.html('');
}
});
Basically, the idea was to load everything in as if I was going to use it all, and then just move the partials into a hidden section of the DOM, and then use JS to put them back in when the user makes a selection

modification of hidden field using jquery working in development not in server rails

I have the following code in the view of a page in my rails application to calculate the price and submit an order using jquery. Here is the form first
<%= form_for(#order) do |f| %>
<% if #order.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#order.errors.count, "error") %> prohibited this category from being saved:</h2>
<ul>
<% #order.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="col-md-12">
<div id="customs-form">
<span class="badge">1</span>
<%= f.label "Select your model location*" %>
<%= f.collection_select :location_id, Location.all, :id, :formatted_display, { prompt: true }, :required => true, :class => 'chosen-select order_form' %>
<span class="badge">2</span>
<%= f.label "Select Your model" %>
<%= f.select :performer_id, grouped_options_for_select(Location.order(:name).map{ |group| [group.name, group.performers.map{ |performer| [performer.first_name, performer.id, {'data-whitelabel_amount'=>performer.white_label.w_markup, 'data-thumb' => performer.profile_thumb_url,'data-id'=>performer.white_label.id, 'data-admin' => performer.white_label.markup.price }] } ] }), { prompt: true}, required: true, class: 'chosen-select order_form' %>
<span class="badge">3</span>
<%= f.label "SELECT YOUR CATEGORY" %>
<%= f.select :clip_category_id, grouped_options_for_select(Performer.order(:first_name).map{ |group| [group.first_name, group.clip_category_performers.map{ |c| [c.clip_category.name, c.clip_category.id, {'data-amount'=>c.amount}] } ] }), { prompt: true}, required: true, class: 'chosen-select order_form' %>
<span class="badge">4</span>
<%= f.label "SELECT THE DURATION" %>
<%= f.select :duration_id, grouped_options_for_select(Performer.order(:first_name).map{ |group| [group.first_name, group.duration_performers.map{ |c| [c.duration.time, c.duration.id, {'data-amount'=>c.amount}] } ] }),{ prompt: true}, required: true, class: 'chosen-select order_form' %>
<span class="badge">5</span>
<%= f.label "SELECT THE QUALITY" %>
<%= f.select :quality_id, grouped_options_for_select(Performer.order(:first_name).map{ |group| [group.first_name, group.quality_performers.map{ |c| [c.quality.name , c.quality.id, {'data-amount'=>c.amount}] } ] }), { prompt: true}, required: true, class: 'chosen-select order_form' %>
<span class="badge">6</span>
<%= f.label "SELECT DELIVERY TIME" %>
<%= f.select :delivery_time_id, grouped_options_for_select(Performer.order(:first_name).map{ |group| [group.first_name, group.delivery_time_performers.map{ |c| [c.delivery_time.duration, c.delivery_time.id, {'data-amount'=>c.amount}] } ] }), { prompt: true}, required: true, class: 'chosen-select order_form' %>
<span class="badge">7</span>
<%= f.label "Write your description"%>
<% if session[:from_site] %>
<%= f.hidden_field :affiliate_id, :value=>#prev_website_id%>
<%end %>
<%= f.text_area :description, :rows => 4, :cols => 60, maxlength: 999, :class => "order_desc order_form form-control" %>
<span id="remainingC"><p class="help-block">Content limited to 999 characters, remaining: 999</p></span>
<%= f.hidden_field :total, value: "", id: "order_total"%>
<% if user_signed_in? %>
<%= f.hidden_field :email, :value => current_user.email%>
<% end %>
<div class="actions" >
<h4 class="alert1"><p class ="help-block">*Please buy credits before you order as customer</p></h4>
<%= f.button :"ORDER NOW", :class => "btn btn-lg btn-marketing" %>
</div>
</div>
<!-- <div class="actions" onclick="check()">-->
<% end %>
</div>
Here is the jquery that I used
read = function(){
function calculate_perf_total()
{
category_amount = parseFloat($('#order_clip_category_id :selected').data('amount')) || 0
duration_amount = parseFloat($('#order_duration_id :selected').data('amount')) || 0
quality_amount = parseFloat($('#order_quality_id :selected').data('amount')) || 0
delivery_amount = parseFloat($('#order_delivery_time_id :selected').data('amount')) || 0
perf_addition=(category_amount + duration_amount + quality_amount+delivery_amount)
if(category_amount && duration_amount && delivery_amount && quality_amount)
{
console.log("hello you are here")
white_label_amount = parseFloat($('#order_performer_id :selected').data('whitelabel_amount')) || 1
if(white_label_amount==1)
{
white_label_amount=parseFloat($('#white_label_id_price').data('amount')) || 1
}
affiliate_amount=parseFloat($('#affiliate_id_price').data('amount')) || 1
admin_amount = parseFloat($('#super_admin_price').data('amount')) || 1
if(admin_amount==1)
{
admin_amount=parseFloat($('#order_performer_id :selected').data('admin'))
}
admin_cut=perf_addition*admin_amount
console.log("admin_amount")
console.log(admin_amount)
console.log("admin_cut")
console.log(admin_cut)
if(parseFloat($('#order_performer_id :selected').data('id')) ==1 || parseFloat($('#white_label_id').data('amount'))==1)
{
other_cut=0
}
else
{
other_cut=perf_addition*white_label_amount
}
console.log("other_cut")
console.log(other_cut)
if(affiliate_amount!=1)
{
other_cut_1=perf_addition*affiliate_amount
// alert(other_cut_1)
}
else
{
other_cut_1=0
}
console.log("other_cut_1")
console.log(other_cut_1)
// alert(window.my_config.perf_addition+other_cut+admin_cut)
total_amount=perf_addition+other_cut+admin_cut+other_cut_1
// alert(total_amount)
//alert(total_amount)
$('#total_amount').html(Math.ceil(total_amount));
// alert($('#order_total'))
$('#order_total').val(Math.ceil(total_amount));
}
else
{
// alert(window.my_config.perf_addition);
//alert(total_amount)
$('#total_amount').html(Math.ceil(perf_addition))
}
}
$('#order_clip_category_id').change(function()
{
//alert("alert1");
calculate_perf_total()
});
$('#order_duration_id').change(function()
{
//alert("alert2");
calculate_perf_total()
});
$('#order_quality_id').change(function()
{
// alert("alert3");
calculate_perf_total()
});
$('#order_delivery_time_id').change(function()
{
// alert("alert4");
calculate_perf_total()
// calculate_total()
});
}
$(document).ready(read);
$(document).on('page:load', read);
The calculation and the value of the hidden field order_total is getting set in the local but it is not happening in the production. It is killing my project. Any ideas?

how to include the javascript into dropdown list in ruby on rails?

I have a javascript file for the cascading dropdown boxes loading from different models. But I dont know how to include into the dropdown list.
Form:
<% content_for :javascript do %>
var master_surveys = <%=
Condition::MasterSurvey.all.map {|ms| {id: ms.Master_Survey_Code, to_s: ms[:Master_Survey_Name]}}.to_json.html_safe
%>
var elements = <%= elements = Hash.new { |hash, code| hash[code] = [] }
Condition::Element.all.each {|e| elements[e.Master_Survey_Code] << {id: e.Element_Code, to_s: e.Element} }.to_json.html_safe
%>
var sub_elements = <%= sub_elements = Hash.new { |hash, code| hash[code] = [] }
Condition::SubElement.all.each {|s| sub_elements[s.Element_Code] << {id: s.Sub_Element_Code, to_s: s.Sub_Element} }.to_json.html_safe
%>
var materials = <%=
materials = Hash.new { |hash, code| hash[code] = [] }
Condition::RenewSchedule.all.each {|rs| materials[rs.Sub_Element_Code] << {id: rs.Material_Code, to_s: rs.Material} }.to_json.html_safe
%>
$(document).ready(function(){
$('select#enr_rds_surv_rdsap_xref_master_survey').chainedTo('select#enr_rds_surv_rdsap_xref_Element_Code');
});
<% end %>
<%= form_for(#enr_rds_surv_rdsap_xref) do |f| %>
<% if #enr_rds_surv_rdsap_xref.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#enr_rds_surv_rdsap_xref.errors.count, "error") %>:</h2>
<ul>
<% #enr_rds_surv_rdsap_xref.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= f.label :Master_Survey %><br/>
<%= f.select :master_survey, Condition::MasterSurvey.all.map{|e| [e.Master_Survey_Code]}, { :prompt => 'Please Select' } %>
</div>
<div class="field">
<%= f.label :Element_Code %><br/>
<%= f.select :Element_Code, Condition::Element.all.map{|e| [e.Element, e.Element_Code]}, { :prompt => 'Please Select' } %>
</div>
<div class="field">
<%= f.label :Sub_Element_Code %><br/>
<%= f.select :Sub_Element_Code, Condition::SubElement.all.map{|e| [e.Sub_Element, e.Sub_Element_Code]}, { :prompt => 'Please Select' } %>
</div>
<div class="field">
<%= f.label :Material_Code %><br/>
<%= f.select :Material_Code, Condition::RenewSchedule.all.map{|e| [e.Material]}, { :prompt => 'Please Select' } %>
</div>
<div class="actions">
<%= f.submit 'Save'%>
</div>
<% end %>
So, The above javascript file collect the data from the parent. In the form, I created a dropdown list statically loaded the data from the database. I want to include the javascript to loaded automatically into the dropdown list dynamically.
Thanks in advance!!!!

I usually do it by Ajax and partials(or page, up to you.), not nice but might be help?
Bind change even on your parent selects. like
$("#parent_select").change(function(){
$.ajax({
url: '/parents/'+$(this).val()+'/childs/',
complete: function(data){
$('#children_select').html(data);
}
})
});
And in your child controller render a partial(or page) with only contents of options of selected children. like:
<%children.each do |child|%>
<option value='<%=child.id%>'><%=child.name%></option>
<%end%>

Rails 3: How to add/remove a group of fields using Jquery?

I'm trying to figure out how to add and remove a group of fields in my Rails 3 app using Jquery. I got the jquery script to work with plain html, which you can see here: http://jsfiddle.net/beehive/ABvFH/1/
However, I can't figure out how to translate this to Rails 3. More specifically, what do I replace "formfield" with in the application.js file for this to work?
application.js
$(document).ready(function() {
$(function() {
var x = $('#uploadform');
var i = $('#uploadform ul').size() + 1;
$('#addmore').live('click', function() {
if ($(".item", x).length < 9) {
$('<ul class="item" class="field">formfield ' + i + ' Remove</p>').appendTo(x);
i++;
}
return false;
});
$('#remfields').live('click', function() {
if (i > 2) {
$(this).parents('ul').remove();
i--;
}
return false;
});
});​
});
form.html.erb
<%= form_for(#upload) do |f| %>
<% if #upload.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#upload.errors.count, "error") %> prohibited this upload from being saved:</h2>
<ul>
<% #upload.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<h2>Add More Fields</h2>
<div id="uploadform">
<ul class="field">
<li>
<%= f.label :title %><br />
<%= f.text_field :title %>
</li>
<li>
<%= f.label :genre %><br />
<%= f.collection_select :genre, Upload::GENRES, :to_s, :to_s, :include_blank => true %>
</li>
<li>
<%= f.label :category %><br />
<%= f.collection_select :category, Upload::CATEGORIES, :to_s, :to_s, :include_blank => true %>
</li>
<li>
<%= f.label :age %><br />
<%= f.collection_select :age, Upload::AGES, :to_s, :to_s, :include_blank => true %>
</li>
</ul>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>

All I had to do to get it to work is comment $(function() {
$(document).ready(function() {
//$(function() {
var x = $('#uploadform');
var i = $('#uploadform ul').size() + 1;
$('#addmore').live('click', function() {
if ($(".item", x).length < 9) {
$('<ul class="item" class="field">formfield ' + i + ' Remove</p>').appendTo(x);
i++;
}
return false;
});
$('#remfields').live('click', function() {
if (i > 2) {
$(this).parents('ul').remove();
i--;
}
return false;
});
//});​
});
Edit:
What do you mean insert them?
To access the elements you can loop through them with
$('#uploadform > ul').each(function(index) {
alert(index + ': ' + $(this).text());
});
Notice your generated HTML. You are creating ul (unordered list) for each li (list item). you may want to fix that to only append list items.

I guess you want to allow user to add many uploads before submit form.
In that case I'm using rails nested attributes.
Here is example. Order has many Photos
Order model:
class Order < ActiveRecord::Base
has_many :photos, :dependent=>:destroy, :inverse_of=>:order
accepts_nested_attributes_for :photos, :allow_destroy=>true,:reject_if=> :all_blank
end
Photo model:
class Photo < ActiveRecord::Base
has_attached_file :photo
belongs_to :order
end
Order form view:
<%= form_for #order, :html => {:autocomplete => :off, :multipart => true} do |f| %>
<%= f.label :title %><br />
<%= f.text_field :title %>
<h3>Order photos</h3>
<%= f.fields_for :photos do |photo| %>
<%= render :partial=>'photo_form', :object=> photo, :as => :f %>
<% end %>
<%= link_to 'Add photo', new_photo_path, :remote=>true, :id=>'add_photo' %>
<%= f.submit%>
<% end %>
photo_form partial:
<fieldset class="photo" data-status="<%= f.object.persisted? ? 'db':'new' %>">
<% if f.object.persisted? %>
<div class="field">
<label>Photo:</label><br />
<%= link_to f.object.photo.url, :target=>'_blank' do %><%= image_tag f.object.photo.url(:mini) %><% end %>
</div>
<% else %>
<%= f.label :photo
<%= f.file_field :photo %>
<%= f.text_field :description %>
<%= f.check_box :_destroy, :class=>'delete' %>
</fieldset>
Now in your controller you need 3 actions to edit order with photos: edit, update, add_photo(ajax action when user click add photo link):
class OrdersController < ApplicationController
def edit
#order = Order.find(params[:id])
end
# Action responsible for updating existing order record
def update
#order = Order.find(params[:id])
if #order.update_attributes(params[:order])
redirect_to #order, :notice=>'Order updated'
else
render :action => "edit" #save error, display order form with errors
end
end
# Action responsible for creating nested form for order photo
def new_photo
#nothing just renders 'new_photo.js.erb'
end
end
new_photo.js.erb:
$object=$("<%= escape_javascript( render(:partial => "photo_form", :locals=>{
:f=>FormBuilder.new("order[photos_attributes][#{rand(400000)}]",Photo.new(),self,{},proc {})
}) ) %>").hide(); //generates new photo view
$object.insertBefore("a#add_photo").slideDown(500);
This is just example, but you shouldn't have problem to adopt this in your application.