Multiple Summernote text area fields - javascript

I have two Rails forms (edit and new) that have multiple text areas. I'm trying to get all of them to use Summernote, but only one of them appears to use the javascript (the last text area if that makes a difference). How can I change it so all text areas use Summernote?
Here's the relevant code:
coffee javascript file:
$ ->
# to set summernote object
# You should change '#med_description' to your textarea input id
summer_note = $('#med_description')
summer_note2 = $('#med_reactions')
summer_note3 = $('#med_interactions')
summer_note4 = $('#med_implementation')
summer_note5 = $('#med_availability')
summer_note6 = $('#med_caution')
summer_note7 = $('#med_warnings')
# to call summernote editor
summer_note.summernote
summer_note2.summernote
summer_note3.summernote
summer_note4.summernote
summer_note5.summernote
summer_note6.summernote
summer_note7.summernote
# to set options
height:300
codemirror:
lineNumbers: true
tabSize: 2
theme: "solarized light"
# to set code for summernote
summer_note.code summer_note.val()
summer_note2.code summer_note.val()
summer_note3.code summer_note.val()
summer_note4.code summer_note.val()
summer_note5.code summer_note.val()
summer_note6.code summer_note.val()
summer_note7.code summer_note.val()
# to get code for summernote
summer_note.closest('form').submit ->
# alert $('#med_description').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note2.closest('form').submit ->
# alert $('#med_reactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note3.closest('form').submit ->
# alert $('#med_interactions').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note4.closest('form').submit ->
# alert $('#med_implementation').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note5.closest('form').submit ->
# alert $('#med_availability').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note6.closest('form').submit ->
# alert $('#med_caution').code()
summer_note.val summer_note.code()
true
# to get code for summernote
summer_note7.closest('form').submit ->
# alert $('#med_warnings').code()
summer_note.val summer_note.code()
true
edit.html.erb:
<%= form_for(#med) do |f| %>
<%= f.label :brand_name, "Name of the medicine:" %>
<div><%= f.text_field :brand_name, required: true %></div>
<%= f.label :generic_name %>
<div><%= f.text_field :generic_name, required: true %></div>
<%= f.label :description %>
<div><%= f.text_area :description, as: :summernote, :id => 'description' %></div>
<%= f.label :reactions %>
<div><%= f.text_area :reactions, as: :summernote, :id => 'reactions' %></div>
<%= f.label :interactions %>
<div><%= f.text_area :interactions, as: :summernote, :id => 'interactions' %></div>
<%= f.label :implementation %>
<div><%= f.text_area :implementation, as: :summernote, :id => 'implementation' %></div>
<%= f.label :availability %>
<div><%= f.text_area :availability, as: :summernote, :id => 'availability' %></div>
<%= f.label :caution %>
<div><%= f.text_area :caution, as: :summernote, :id => 'caution' %></div>
<%= f.label :warnings %>
<div><%= f.text_area :warnings, as: :summernote, :id => 'warnings' %></div>
<div><%= f.submit "Save changes", class: "btn btn-primary" %> </div>
<% end %>
new.html.erb:
<%= simple_form_for #med, class: "form-horizontal", method: :post do |f| %>
<div class="form-group">
<%= f.label :brand_name, "Name of the medicine:" %>
<%= f.input :brand_name, required: true %>
</div>
<div class="form-group">
<%= f.label :generic_name %>
<%= f.input :generic_name, required: true %>
</div>
<div class="form-group">
<%= f.label :description %>
<%= f.input :description, as: :summernote, :id => 'description' %>
</div>
<div class="form-group">
<%= f.label :reactions %>
<%= f.input :reactions, as: :summernote, id: 'reactions' %>
</div>
<div class="form-group">
<%= f.label :interactions %>
<%= f.input :interactions, as: :summernote, id: 'interactions' %>
</div>
<div class="form-group">
<%= f.label :implementation %>
<%= f.input :implementation, as: :summernote, id: 'implementation' %>
</div>
<div class="form-group">
<%= f.label :availability %>
<%= f.input :availability, as: :summernote, id: 'availability' %>
</div>
<div class="form-group">
<%= f.label :caution %>
<%= f.input :caution, as: :summernote, id: 'caution' %>
</div>
<div class="form-group">
<%= f.label :warnings %>
<%= f.input :warnings, as: :summernote, id: 'warnings' %>
</div>
<%= f.button :submit, class: "btn btn-primary" %>
<% end %>
Thanks!
EDIT: The Summernote github page (https://github.com/summernote/summernote-rails) shows the following code. I think it might be the best way to fix my issue. It looks like it loops through any field that has as: :summernote:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
Is this the right answer? If so, how do I implement it?

The following code worked:
$ ->
$('[data-provider="summernote"]').each ->
$(this).summernote()
I placed that code above everything else I had in the coffee file and it worked fine.

Related

Put html param into Rails array parameter

Ruby on Rails 4.1
The form is placing the parameters into an array when POST is done. I am making a script to auto fill the billing address the same as the shipping address. When the script runs it is assigning the values as html values.
How do you put these values into the payment array being sent?
The log where cc_name and ship_name are outside the payment array, I want them inside:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"x", "cc_name"=>"Bobby", "payment"=>{"telephone"=>"555", "email"=>"drfernandez1#yahoo.com", "address1"=>"641 W Rt 66", "address2"=>"", "city"=>"Glendora", "state"=>"CA", "postal_code"=>"91740", "country"=>"USA", "cc_type"=>"Visa", "cc_number"=>"5555555588884444", "ccv"=>"321", "expires_on(1i)"=>"2014", "expires_on(2i)"=>"9", "expires_on(3i)"=>"1", "ship_address1"=>"641 W Route 66", "ship_address2"=>"", "ship_city"=>"Glendora", "ship_state"=>"c", "ship_postal_code"=>"91740", "ship_country"=>"u", "card_holder_auth"=>"1", "charge_auth"=>"1", "name_auth"=>"David Duke", "date_auth"=>"7"}, "billingtoo"=>"on", "ship_name"=>"Bobby", "commit"=>"Send Payment"}
The form (minus clutter):
<%= form_for #payment do |f| %>
<%= render 'shared/payment_error_messages' %>
<h1>Fill in all blank areas with payment information:</h1>
<div class="col-md-5 col-md-offset-1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Applicant Information</h3>
</div>
<div class="panel-body">
<%= f.label :cc_name, "Name as it appears on credit card:" %><br>
<%= f.text_field :cc_name, class: "input-lg", :name => "cc_name" %> <%#= #payment.errors.get(:cc_name) %>
<%= f.label :telephone, "Telephone Number:" %><br>
<%= f.text_field :telephone, class: "input-lg" %>
...
<div class="panel-body">
<input type="checkbox" name="billingtoo" onclick="FillBilling(this.form)"><em>Shipping Address is the same as the Billing Address</em>
<p>Please Note: This cannot be a P.O box address</p>
<%= f.label :ship_name, "Name:" %><br>
<%= f.text_field :ship_name, class: "input-lg", :name => "ship_name" %>
<%= f.label :ship_address1, "Address 1:" %><br>
<%= f.text_field :ship_address1, class: "input-lg" %>
...
<%= f.submit "Send Payment", class: "btn btn-lg btn-primary", id: "commit" %>
</div>
</div>
</div>
<% end %>
<br/>
<%= link_to 'Back', session[:last_page] %>
</div>
<script>
function FillBilling(f) {
if(f.billingtoo.checked == true) {
f.ship_name.value = f.cc_name.value;
}
}
</script>
You are overwriting the field's name:
:name => "cc_name"
That's the reason why it is sent outside of the array. Try removing the :name assigning:
<%= f.text_field :cc_name, class: "input-lg" %>
and
<%= f.text_field :ship_name, class: "input-lg" %>

Change fields shown based on select

I have a form.html.erb that includes this:
<%= nested_form_for(#store) do |f| %>
<%= select_tag :type, options_for_select(['Book' , 'Magazine' , 'Video'])%>
<%= f.fields_for :product_fields do |builder| %>
<%= builder.text_field :type %>
<%= builder.text_area :content %>
<%= builder.text_field :type %>
<%= builder.text_area :content%>
<%= builder.text_field :type %>
<%= builder.text_area :content %>
<% end %>
<% end %>
What I want to do is, based on what you selected in the select dropdown, change the text fields you get, while still keeping the rails associations. So, for example, if you selected "Book", you might get:
<%= builder.text_field :type %>
<%= builder.text_area :content %>
but if you select "Magazine", you might get:
<%= builder.text_field :type %>
<%= builder.text_area :content %>
<%= builder.text_field :type %>
<%= builder.text_area :content %>
<%= builder.text_field :type %>
<%= builder.text_area :content %>
<%= builder.text_field :type %>
<%= builder.text_area :content %>
I know I can do this by just doing calling jQuery hide() and then showing them on select change, but is there a cleaner/better way?
Thanks for all help!

Rails 4 render js: redirecting to another page and displaying raw js

In my TestimoniesController I have written a render js: line in the event that #testimony.save is not successful.
if #testimony.save
redirect_to #testimony
else
render js: "alert('Please make sure you feel out every field of the Testimonial!');"
end
Instead of rendering the alert that I write, it redirects me to the /testimonies route and just displays the string that was supposed to be rendered as javascript and nothing else. Is my JS disabled somehow?
Here is my new.html.erb file:
<h1> New Testimonial</h1>
<%= form_for :testimony, url:testimonies_path do |f| %>
<p>
<%= f.label :first_name %><br>
<%= f.text_field :first_name %>
</p>
<p>
<%= f.label :last_name %><br>
<%= f.text_field :last_name %>
</p>
<p>
<%= f.label :email %><br>
<%= f.text_field :email %>
</p>
<p>
<%= f.label :contact_number %><br>
<%= f.text_field :contact_number %>
</p>
<p>
<%= f.label :country %><br>
<%= f.text_field :country %>
</p>
<p>
<!--bunch of the same stuff -->
<p>
<%= f.submit %>
</p>
<% end %>
In order tor respond with js, you have to add remote: :true in your form_for, and submit your request as ajax
<%= form_for :testimony, url:testimonies_path, remote: :true do |f| %>
but then your
redirect_to #testimony
will not work as it only works on html format, so in that scenario replace this line with
render js "location.href = '#{testimony_path}'";

Rails 3 different autocomplete fields

I have 2 different autocomplete fields on a page each to be populated from different sources in the database. My problem is when I test the page, the two autocomplete behaviors sometimes get switched in each others text fields.
My view partials looks like the following (I followed a railscasts):
<fieldset>
<%= f.text_field :ability_title, {:class => 'autocomplete_field', data: { autocomplete_source: abilities_path } } %>
<%= f.label :points %>: <%= f.text_field :points %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
<fieldset>
<%= f.text_field :mission_title, {:class => 'autocomplete_field', data: {autocomplete_source: missions_path } } %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
My javascript:
jQuery ->
$('fieldset').live 'click', ->
$('.autocomplete_field').autocomplete
source: $('.autocomplete_field').data('autocomplete-source')
And My controllers:
def index
if params[:term].present?
#abilities = Ability.search_titles(params[:term])
else
#abilities = Ability.all
end
respond_to do |format|
format.html # index.html.erb
format.json { render json: #abilities }
end
end
def index
if params[:term].present?
#missions = Mission.search_titles(params[:term])
else
#missions = Mission.all
end
respond_to do |format|
format.html # index.html.erb
format.json { render json: #missions.map(&:title) }
end
end
Thanks
I think you just need to differentiate both text fields by ids, eg:
<fieldset>
<%= f.text_field :ability_title, {:id => 'autocomplete_field1', data: { autocomplete_source: abilities_path } } %>
<%= f.label :points %>: <%= f.text_field :points %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
<fieldset>
<%= f.text_field :mission_title, {:id => 'autocomplete_field2', data: {autocomplete_source: missions_path } } %>
<%= f.hidden_field :_destroy %>
<%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>
My javascript:
jQuery ->
$('fieldset').live 'click', ->
$('#autocomplete_field1').autocomplete
source: $('#autocomplete_field1').data('autocomplete-source')
$('#autocomplete_field2').autocomplete
source: $('#autocomplete_field2').data('autocomplete-source')
EDIT:
more elegant solution:
jQuery ->
$('fieldset').live 'click', ->
$('#autocomplete_field1, #autocomplete_field2').each (index, element) =>
$(element).autocomplete
source: $(element).data('autocomplete-source')
Try if this works replace source in your js file
source: $(this).data('autocomplete-source')

Dynamically add & remove new but the same fields of a form any amount times

I have a form that has no nested models.
class UserProductsController
def new
#user_product = current_user.user_products.build
end
end
With jquery/javascript i want to add and remove new #user_product fields on the same form. This how it would look normally:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= f.submit %>
<% end %>
And I'm trying to achieve:
<%= form_for(#user_product) do |f| %>
<%= f.error_messages %>
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
---New ID(New generated ID, could be any new number in the database)
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %> # ajax style, this link removes this product entirely
----ID 3----
<%= f.text_field :product_name %>
<%= f.text_field :address %>
<%= f.text_field :price %>
<%= Remove this Product %>
-----Add link------
<%= Add Another Field %> # ajax style adding
<%= f.submit %>
<% end %>
Notice the new IDs that aren't preset and the one submit button so this way more then one Product can be created at a time by a User. How do i achieve the above?
Thank you.
Answer:
Using the User.rb model you can do what James said. Here is my form that works.
<%= form_for(current_user, :url => user_products_path) do |f| %>
<%= f.error_messages %>
<%= f.fields_for :user_products do |builder| %>
<%= render "user_product_fields", :f => builder %>
<% end %>
<%= link_to_add_fields "Add a UserProduct", f, :user_products %>
<%= f.submit "Create" %>
<% end %>
_user_product_fields.html.erb
<div class="fields">
<%= f.label :product, "Product" %>
<%= f.text_field :product %>
<%= f.label :address, "Address" %>
<%= f.text_field :address %>
<%= f.label :price %>
<%= f.text_field :price %>
<%= link_to_remove_fields "remove", f %>
</div>
As others have suggested (somewhat unhelpfully), use nested forms.
You need the form to be based on the current_user object with fields_for declaration for :user_products. You will need to set the url for the form to post back to the user_product controller not the user controller using url_for and you will need to adjust the user_product controllers update and create actions to make use of params[:user] instead of params[:user_product]
If you have your accepts_nested_attributes configured properly all should be good.
BTW if you follow those railscasts you will find that the javascript to add new will not work for Rails 3.x
You should use something like this for your view helpers
module ApplicationHelper
def link_to_remove_fields(name, f)
f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end
def link_to_add_fields(name, f, association)
new_object = f.object.class.reflect_on_association(association).klass.new
fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
render(association.to_s.singularize + "_fields", :f => builder)
end
link_to_function(name, "add_fields(this, '#{association}', '#{escape_javascript(fields)}')")
end
end
and something like this for your javascript in your application.js file
// Place your application-specific JavaScript functions and classes here
// This file is automatically included by javascript_include_tag :defaults
function remove_fields(link) {
$(link).previous("input[type=hidden]").value = "1";
$(link).up(".fields").hide();
}
function add_fields(link, association, content) {
var new_id = new Date().getTime();
var regexp = new RegExp("new_" + association, "g")
$(link).up().insert({
after: content.replace(regexp, new_id)
});
}
and obviously your form_for need to be refactored to something like this
<%= form_for(current_user, :url => user_product_path) do |f| %>
<!-- add your f.fields_for :user_products here, probably in a rendered partial -->
<%end%>
That should be enough with the rails casts to get you going
Checkout this:
http://railscasts.com/episodes/196-nested-model-form-part-1
http://railscasts.com/episodes/197-nested-model-form-part-2
You can use cocoon for this.

Categories

Resources