I have a Rails 5 app form. Next to the form there is a button. Whenever a button is clicked the form auto fills. Works very well. However, now I want to use Trix editor to add some editing options to a text_area field. The notes field in the form is a trix_editor.
However, when I click the button to auto fill the form, it does not inject the content into the Trix editor. How can I make sure that happens?
Here is the workout_form
.panel-body
.form-group.has-feedback
.text-muted
= f.label 'Name the workout'
= f.text_field :title, class: 'form-control'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Swim, Bike or Run?'
= f.select :kind, Workout.kinds.keys.to_a.map { |s| [s.humanize, s] }, {}, class: 'form-control bootstrap-select'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Distance (km)'
= f.number_field :distance, class: 'form-control', step: :any
.form-group.has-feedback
.text-muted
= f.label :kind, 'Duration (Minutes)'
= f.number_field :duration, class: 'form-control'
.form-group.has-feedback
.text-muted
= f.label :kind, 'Notes'
= f.trix_editor :notes
.form-group.has-feedback
.text-muted
= f.label 'Insert Youtube or Vimeo link'
= f.text_field :video, class: 'form-control'
Here is the button that triggers the auto fill
a data-type="useTemplate" data-title=template.title data-kind=template.kind data-distance=template.distance data-duration=template.duration data-notes=template.notes data-video=template.video class="text-default"
and here is the CoffeeScript:
$ ->
$('a[data-type="useTemplate"]').click (e) ->
$('#workout_title').val(e.target.dataset.title)
$('#workout_kind').val(e.target.dataset.kind)
$('#workout_distance').val(e.target.dataset.distance)
$('#workout_duration').val(e.target.dataset.duration)
$('#workout_notes').val(e.target.dataset.notes)
$('#workout_video').val(e.target.dataset.video)
Any help would be much appreciated!
To insert content to trix editor you need to use Trix API:
// Assuming #workout_notes is a <trix-editor> element.
$("#workout_notes").get(0).editor.insertString(e.target.dataset.notes)
See documentation for more info.
Related
I am having a form that I use for the edit screen, that I also populate on another screen as Modal (when a user just signed up). However, there is a little error with the Nested Form Display on that Modal only. I have been trying to find it for hours. Here is my code:
= form_for #user do |user|
.form-group
%label{:for => :first_name}
First Name
= user.text_field :first_name, class: "form-control"
%label{:for => :middle_name}
Middle Name
= user.text_field :middle_name, class: "form-control"
%label{:for => :last_name}
Last Name
= user.text_field :last_name, class: "form-control"
%label{:for => :image}
Profile Picture
= image_tag #user.image.url(:thumb), class: "img-circle" if #user.image.exists?
= user.file_field :image, class: "form-control"
%label{:for => :headline}
Headline
= user.text_field :headline, class: "form-control"
%label{:for => :bio}
What are you currently Involved with? (Hint Just copy your LinkedIn Highlight)
= user.text_area :bio, class: "form-control user_text_area"
%label{:for => :twitter}
Your Twitter Handle
= user.text_field :twitter, class: "form-control"
%label{:for => :school}
School
= collection_select(:user, :school_id, School.all, :id, :name, {prompt: true, :required => ""}, { class: "filter-option pull-left form-control" } )
%br/
%label{:for => :course}
Course
= user.fields_for :course_user do |cu|
= cu.select :course_id, Course.all.map { |c| [c.name_with_intake, c.id] }, {}, class: 'filter-option pull-left form-control', id: 'courses_select'
-# = collection_select(:course, :course_id, Course.all, :id, :name, {:prompt => "Select a Course"}, {:id => 'courses_select', class: "filter-option pull-left form-control"})
Then my User Modal does Show this:
has_one :course_user
accepts_nested_attributes_for :course_user
The field that I am stuck with is the "Course field" to add a course to a User. Now, here is the thing, Others have suggested to remove the user part, so the code would be:
%label{:for => :course}
Course
= fields_for :course_user do |cu|
= cu.select :course_id, Course.all.map { |c| [c.name_with_intake, c.id] },
Or change the :course_user into CourseUser.new
%label{:for => :course}
Course
= fields_for CourseUser.new do |cu|
= cu.select :course_id, Course.all.map { |c| [c.name_with_intake, c.id] },
Both result in the field showing in the modal. However, both also prevent the data from being saved. So I am wondering...what is going wrong? I appreciate any help with this!
After a long night figuring this out and eventually calling a help-line, I figured out what the problem was. The User Controller#edit had a line that I completely overlooked that made it work. So you will need to have user.fields_for. If need be, I can help you with a similar issue.
= user.fields_for :course_user do |cu|
This is the code that worked in the end. I have some steps to be taken:
1 - Look in the server logs, see what Params are parsed. Check the params
2 - Again in the server logs, see what items get pushed
3 - Then check what actions are in the Controller and if you have added
accepts_nested_attributes_for :course_user
to the respective Model (change :course_user)
Im using cocoon to attach files. I need to be able to remove file when editing a question. Im stuck on getting the exact file name to remove when rendering edit
div.edit_question
=form_for #question, remote: true do |f|
= f.label :title, class: 'label_hidden'
= f.text_field :title
br
= f.label :body, class: 'label_hidden'
= f.text_area :body
br
= f.fields_for :attachments do |f|
.nested-fields
= link_to_remove_association "remove #{ NAME HERE }", f
br
= f.submit 'Update'
Case is closed ))
=form_for #question, remote: true do |f|
= f.label :title, class: 'label_hidden'
= f.text_field :title
br
= f.label :body, class: 'label_hidden'
= f.text_area :body
br
- #question.attachments.each do |att|
= f.fields_for att do |f|
.nested-fields
= link_to_remove_association "remove #{ att.file.filename }", f
br
= f.submit 'Update'
I'm working on a contact form and have two queries:
the text area displays correctly, but when the user starts typing in it, the cursor begins 2 lines down (and also the text runs over one line (i.e. keeps going in one long straight line) rather than staying within the box borders
I'd like to add inline styling for the label but I can't seem to get the styling code in the right place.
View code:
= simple_form_for #contact, :html => {:class => 'form-horizontal' } do |f|
.field
= f.input :name, input_html: { class: 'gtb_text_field' }
.field
= f.input :email, input_html: { class: 'gtb_text_field' }
-#.field
-#= f.input :type, as: :select, collection: WHY_CONTACT, label: 'Type of enquiry', allow_blank: false
.form_field_wrapper
= f.input :message, label: 'My message' , input_html: {class: 'gtb_text_area', style: 'margin-left: 50px; width: 310px;'}
.actions
= f.submit 'Send message', class: 'signup_button'
Can anyone help?
I use simple_form gem in my Rails app. When I use code like this
= f.input_field :name, label: false, placeholder: 'Name'
= f.input_field :price, label: false, placeholder: 'Price'
= f.input_field :description, label: false, placeholder: 'Description'
= f.input_field :image, label: false, placeholder: 'Image'
I get HTML for input:
<input class="string required textform" id="item_name" label="false" maxlength="255" name="item[name]" placeholder="Имя" size="255" type="text">
As you can see size of input is 255 now. Actually it's much more than enough. How can specify the size of inputs?
Following is from simple_form documentation here
It is also possible to pass any html attribute straight to the input,
by using the :input_html option, for instance:
<%= simple_form_for #user do |f| %>
<%= f.input :username, input_html: { class: 'special' } %>
<%= f.input :password, input_html: { maxlength: 20 } %>
<%= f.input :remember_me, input_html: { value: '1' } %>
<%= f.button :submit %>
<% end %>
To set size of 100 for name input:
= f.input :name, label: false, placeholder: 'Name', input_html: { size: 100 }
I have this in my Form
<%= f.label :price, "price"%>
<%= f.text_field :price, :size=>20, :id =>"price" %>
<%= f.label :quantity, "Quantity"%>
<%= f.text_field :quantity, :size=>20, :id =>"qty" %>
<%= f.label :amount, "Amount"%>
<%= f.text_field :amount, :size=>20, :id =>"amount"%>
I want {price*quantity} to happen inside the 'amount' field as soon as i enter values inside 'price' and 'quantity' i.e calculations should happen before submit. I am new to jQuery/Ajax, so any help will do. Thanks in advance.
You can do something like this
$(function() {
$("#price, #qty").keyup(function() {
var p = $("#price").val();
var q = $("#qty").val();
$("#amount").val(q * p);
});
});
But you have to give the amount field the id "amount" and not reuse "price" as the id.