Develop Reference

Rails: How to keep at least one form section displayed in edit forms

Following railscasts #196 Nested Model Form, I was able to implement a working add/remove function to my forms.
The problem is when I remove the last form section, submit, and edit form. The form section is empty and displays the "+ Add More" link only (since I removed the others when I submitted the form?).
By default, I used #userprofile.programs.build so the form builds one program section when it is first created.
userprofiles_controller.rb
def new
#userprofile = Userprofile.new(params[:userprofile])
#userprofile.programs.build
end
_form.html.erb
<h3>Programs</h3>
<%= f.fields_for :programs do |builder| %>
<%= render 'program_fields', f: builder %>
<% end %>
<div class="field">
<%= link_to_add_fields "+ Add More", f, :programs %>
</div>
_program_fields.html.erb
<fieldset>
<%= f.select :program_name, [['A'], ['B']], { label: "Program Name: ", :include_blank => "Please select a program...", { class: "form-control" } %>
<%= f.select :program_role, [['Student'], ['Teacher']], { label: "Program Role: ", :include_blank => "Please select your role..." }, { class: "form-control" } %>
<%= f.hidden_field :_destroy %>
<%= link_to "Delete", '#', class: "remove_fields" %>
</fieldset>
Not sure how or if I need to add a condition and build in the userprofiles_controller.rb when the edit form is empty? So that if the whole section is removed, it still shows one form section by default and not just a empty section with the link to "+ Add More".
Or if there is some way so the first program section cannot be deleted. But the rest that are added has the "Delete" function?
Any insight would help, thank you!
UPDATE:
userprofiles.js.coffee
$(document).on 'click', 'form .remove_fields', (event) ->
$(this).prev('input[type=hidden]').val('1')
$(this).closest('fieldset').hide()
event.preventDefault()

Let's say you have the following HTML -- I added a couple of classes:
_form.html.erb
<div class="programs-form">
<h3>Programs</h3>
<div class="programs-fields">
<%= f.fields_for :programs do |builder| %>
<%= render 'program_fields', f: builder %>
<% end %>
</div>
<div class="field">
<%= link_to_add_fields "+ Add More", f, :programs %>
</div>
</div>
_program_fields.html.erb
<fieldset class="program">
<%= f.select :program_name, [['A'], ['B']], { label: "Program Name: ", :include_blank => "Please select a program...", { class: "form-control" } %>
<%= f.select :program_role, [['Student'], ['Teacher']], { label: "Program Role: ", :include_blank => "Please select your role..." }, { class: "form-control" } %>
<%= f.hidden_field :_destroy %>
<%= link_to "Delete", '#', class: "remove_fields" %>
</fieldset>
Then, assuming you have jQuery loaded somewhere in your app, you can run the following script:
$(function () {
$('a.remove_fields').hide();
$('.programs-fields').on('change', function (ev) {
if ($('fieldset.program').length > 1) {
$('a.remove_fields').show();
}
});
});
I haven't had the chance to set up a test environment and run this code, so please let me know if you have any problems -- I'll be more than happy to fix any bugs!

resetting form via jQuery not clearing ckeditor cktext_area field

I have following form
<div id="post-close-updates-form">
<%= form_for [#investment,#post_close_update], remote: true do |f| %>
<div class="form-group">
<%= f.label :content %>
<%= f.cktext_area :content %>
</div>
<%= f.submit "Update", class: "btn btn-primary" %>
<% end %>
</div>
and my jquery code is
$("#post-close-updates-form form")[0].reset();
but it is not clearing cktext_area content...while if i put normal html textarea then it works fine.
so how do i clear ckeditor cktext_area via js/jquery

ok here is the answer given by developer of ckeditor #galetahub
$("#post-close-updates-form form")[0].reset();
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].updateElement();
}
but above one not worked for me so made some chages that works
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].setData(" ");
}
setData() is to set the data is cktext_area
now if u want to get the data from cktext_area in js then use this
for (instance in CKEDITOR.instances){
CKEDITOR.instances[instance].getData();
}

Nicedit works localhost but not Heroku

I have troubles with nicEdit.
Framework is ruby 2.0.0 / rails 4.0.1
When in localhost, works but only if you upload the page twice.
But when deploy in Heroku, it does not work at all.
I followed this example up to the line.
I have a niEdit.js under ../vendor/assets/javascripts
Here is my full form:
<%= javascript_include_tag 'nicEdit' -%>
<%= simple_form_for(#recipe) do |f| %>
<%= f.error_notification %>
<div class="field">
<%= f.label "Elige un cromo" %><br />
<%= f.file_field :chrome %>
</div>
<div class="form-inputs">
<%= f.association :user, label_method: :name, collection: User.where(name: current_user.name), :label => "Cociner#" %>
<%= f.association :category, :label => "Categoría", label_method: :plato_category, collection: Category.all %>
<%= f.input :plato %>
<%= f.input :minutos %>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<div class="well well-small">
<p>Tejemaneje</p>
<%= f.text_area :tejemaneje, :rows => 10, :style => 'width: 700px' %>
</div>
</div>
<p>
</p>
<%= f.button :submit, "Receta", :class => "btn btn-success" %>
<% end %>
What should I do different for it to work fully both on localhost and heroku? Thanks.

PARTIAL SOLUTION:
I moved nicEdit.js under /assets/javascript and the script is now running, but it does not matter if inside NicEdit.js this line is
iconsPath : '/assets/nicEditorIcons.gif' and the icons under /assets/images/nicEditorIcons.gif, they do not display. The same for /assets/nicEditorIcons.gif
I moved the icons under /assets/javascripts and change the line to
iconsPath : '.../nicEditorIcons.gif'
And I also tryed to put the icons under /assets/nicEditorIcons.gif with the icons ther. Nothing works.
Does Heroku have a special place for icons? Do I have to change the script call? Any help?

Clear a text_field after create w/o refresh

Right now I'm using AJAX for creating comments. However when I hit enter the textfield remains populated. I want the field to refresh (and still be able to write in another comment). no errors but it still doesn't refresh the textfield it seems. The create part works fine.
create.js/erb: (need to fix the second line here so that it fully replaces)
$('#<%= dom_id(#micropost) %>').html("<%= escape_javascript(render(:partial => #micropost.comments))%>")
$("#comment_field_<%=#micropost.id%>").replaceWith("<%= escape_javascript(render 'shared/comment_form', micropost: #micropost) %>")
Microposts/_micropost:
<span id="<%= dom_id(micropost) %>"><%= render micropost.comments %></span>
<span id="comment_field_<%=micropost.id%>"><%= render 'shared/comment_form', micropost: micropost if signed_in? %></span>
Shared/Comment_form:
<%= form_for #comment, id:"comment_form", remote: true do |f| %>
<%= hidden_field_tag :micropost_id, micropost.id %>
<div id="comment_field">
<%= link_to gravatar_for((current_user), size: 29) %>
<%= f.text_field :content, placeholder: "Say Something...", id: "comment_text_field", :style => "width: 508px; text-indent: 5px" %>
</div>
<% end %>

Needed to only use jquery to clear the text_field by setting empty value
create.js.erb
$("#comment_text_field_<%=#micropost.id%>").val("")
best practice to use a unique dynamic ID but probably would have worked either way.
Shared/Comment_form:
<%= f.text_field :content, id: "comment_text_field_#{micropost.id}" %>

JQuery doesn`t fire/work with my Rails 3.2 project

As in the title, I`ve made sure all needed JS files are included in the meta tags, included the jquery-rails/coffee-rails gem, linked to a external one just in case.
This is a modified script from Ryan Bates tutorial on Stripe, from what I understand it`s suppose to fire up by detecting the submit action from the form.
Since I'm not that familiar with JS or CoffeeScript, I can't really pin point what's the problem here.
Would appreciate any help I can get.
The donations.js file:
jQuery ->
Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
donation.setupForm()
donation =
setupForm: ->
$('#new_donation').submit ->
$('input[type=submit]').attr('disabled', true)
if $('#card_number').length
donation.processCard()
false
else
true
processCard: ->
card =
number: $('#card_number').val()
cvc: $('#card_code').val()
expMonth: $('#card_month').val()
expYear: $('#card_year').val()
Stripe.createToken(card, donation.handleStripeResponse)
handleStripeResponse: (status, response) ->
if status == 200
alert(response.id)
else
alert(response.error.message)
The donations/new.html.erb form
<%= form_for(#donation) do |f| %>
<div class="field">
<%= f.label :from %>
<%= f.text_field :from %>
</div>
<div class="field">
<%= label_tag :card_number, "Credit Card Number" %>
<%= text_field_tag :card_number, nil, :name => nil %>
</div>
<div class="field">
<%= label_tag :card_code, "Security Code (CVV)" %>
<%= text_field_tag :card_code, nil, :name => nil %>
</div>
<div class="field">
<%= label_tag :card_month, "Card Expiration" %>
<%= select_month nil, {:add_month_numbers => true}, {:name => nil, :id => "card_month"} %>
<%= select_year nil, {:start_year => Date.today.year, :end_year => Date.today.year+15}, {:name => nil, :id => "card_year"} %>
</div>
<div class="field">
<%= f.label :Notes %>
<%= f.text_field :note %>
</div>
<br>
<center>
<span class="BigBold">Amount: $2.50</span>
<%= f.hidden_field :amount, {:value => "2,5" } %><br>
</center>
<br>
<center>
<%= f.submit "Donate Now", :class => 'donate-button' %>
</center>
<% end %>

Your javascript seems to be, well, Coffeescript - make sure it's put in its own donations.js.coffee file, and that you're including the coffee-rails gem while you're at it.
Standard debugging techniques would be useful here - try adding an alert("It lives!") or something after the initial jQuery -> line to see if the document.ready handler is ever being called.
If not, check to make sure that the donations.js.coffee file is being loaded in the first place, and if not, make sure you're either loading it in your page's header, or you have something like this in application.js:
//= require jquery
//= require donations
Or, if you just want to include everything in app/assets/javascripts:
//= require jquery
//= require_tree .

Peter is correct, your coffeescript code should be properly named so that it can be translated to JavaScript.
An additional debugging strategy is to look at the html/js source being sent to your browser. Use the view source command to see the html source. Then click on the reference to the js link containing the translated donations.js.