I'm using a gem called rails_emoji_picker to easily implement an emoji solution for my project. The gem is not loading the emoji picker inside of the textarea, even though I followed the instructions that were given. I see no errors in my javascript debugging console. How can I make the emoji picker display inside of the textarea? I'm currently using rails 5. https://github.com/ID25/rails_emoji_picker
post _form.html.erb
<div class=container">
<%= simple_form(#post, multipart: true, remote: true) do |f| %>
<div class="row">
<div class="col-6">
<p class="emoji-picker-container">
<%= f.input :body_text, class: 'form-control', label: false, id: 'text-area-reset', placeholder: 'write something', data: {emojiable: true} %>
</p>
</div>
</div>
<div class="row">
<div class="col-6>
<%= f.button :submit, 'Post it', class: 'btn btn-outline-success' %>
</div>
</div>
<% end %>
</div>
Related
I'm using the cocoon gem in order to add images with nested fields:
<div id="attachments">
<%= f.simple_fields_for :attachments do |attachment| %>
<%= render 'products/attachment_fields', form: attachment %>
<% end %>
<div class="links" id="add_attachment" style="display: inline; float: right;">
<%= link_to_add_association 'add more images', f, :attachments, form_name: 'form' %>
</div>
</div>
And this is the partial.... _attachment_fileds.tml.erb:
<div class="nested-fields">
<%= form.label :image, required: true %>
<div class="input-group">
<div class="custom-file" style="padding-top: 38px;">
<%= form.input :images, label: false, as: :file, :input_html => { :class => 'custom-file-input', :style=>"cursor: pointer", :id=>"inputGroupFile01"} %>
<label class="custom-file-label" for="inputGroupFile01" id="file-name" style="cursor: pointer;">Choose file</label>
</div>
</div>
<div style="text-align: right;"><%= link_to_remove_association "remove", form %></div>
</div>
Everything is working fine.
Now, regarding each field that is generated with cocoon I would like to replace the choose a file text from the label field with the name of the file that has been selected.
At first I tried the following but I then figured that the cocoon gem generates a different id for each field.
<script>
$("#inputGroupFile01").change(function(){
$("#file-name").text(this.files[0].name);
});
</script>
So now I'm kind of stuck on how to implement the above. Any help would be very much appreciated.
An html-id is supposed to be unique on the page, so you cannot use a unique id for a repeating field. While the page may render correctly, when posting the form it will ignore duplicate id's (and thus will post incorrect/incomplete information).
Secondly, using jquery it is pretty easy to just find the closest element.
So in your partial for the nested fields remove all id's, so write something like
<%= form.input :images, label: false, as: :file,
:input_html => { :class => 'custom-file-input', :style=>"cursor: pointer"} %>
<label class="custom-file-label" style="cursor: pointer;">Choose file</label>
And then you can write something like (untested obviously)
$(".nested-fields .custom-file-input").change(function(){
$(this).siblings("label.custom-file-label").text(this.files[0].name);
});
There are a few options, and I am not sure which selector works the best. You could go up, and then select the correct label:
$(this).closest('.nested-fields').find('label.custom-file-label')
I am not sure if just looking for the closest label would work?
$(this).closest('label.custom-file-label')
Or as I did above, look for the sibling with the correct selector.
I have a form_with that calls a controller that responds in JSON. I would like to run javascript (handle errors, ...) during an event ajax:success or ajax:error.
I followed the Rails documentation. Unfortunately, the variables in my events are undefined. Only e are set.
Form:
<%= form_with url: contact_path, scope: 'message', id: 'new_message' do |f| %>
<div class="row">
<div class="input-field col s6">
<%= f.text_field :name, class: 'validate' %>
<%= f.label :name, 'Nom' %>
</div>
<div class="input-field col s6">
<%= f.email_field :email, class: 'validate' %>
<%= f.label :email, 'Email' %>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<%= f.telephone_field :phone, class: 'validate' %>
<%= f.label :phone, 'Téléphone' %>
</div>
<div class="input-field col s6">
<%= f.text_field :website, class: 'validate' %>
<%= f.label :website, 'Site Web' %>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<%= f.text_area :content, class: 'materialize-textarea validate' %>
<%= f.label :content, 'Message' %>
</div>
</div>
<div class="row">
<div class="col s6">
<%= recaptcha_tags %>
</div>
<div class="col s6">
<%= button_tag class: 'btn primary waves-effect waves-light right' do %>
Envoyer
<i class="material-icons right">send</i>
<% end %>
</div>
</div>
<% end %>
Controller:
def create
#message = Message.new(message_params)
respond_to do |format|
if verify_recaptcha(model: #message) && #message.valid?
MessageMailer.new_message(#message).deliver
format.json { render json: #message, status: :created }
else
format.json { render json: #message.errors, status: :unprocessable_entity }
end
end
end
CoffeeScript:
$(document).ready ->
$("#new_message").on("ajax:success", (e, data, status, xhr) ->
console.log(xhr);
).on "ajax:error", (e, xhr, status, error) ->
console.log(xhr);
Result:
undefined message.self-5eda06948d26dade035273a7f168828c2cb1852e26937c49f50da7ca2532ad72.js:4:14
Started POST "/contact" for 127.0.0.1 at 2017-06-13 17:19:17 +0200
Processing by MessagesController#create as JS
Parameters: {"utf8"=>"✓", "authenticity_token"=>"aBxh+eJedXw0WifdUXFAlgH0gWxNpiDQa2J3hdJayC/wBaccIxNSVK4pycYwu9XMb1s2/r9S8+FteRFoocdrZQ==", "messages"=>{"name"=>"", "email"=>"", "phone"=>"", "website"=>"", "content"=>""}, "g-recaptcha-response"=>"03AOPBWq9SEfWUxzdyMRMdd0p65vonbGjNjA_mhCA07vfoXyA6_nEVn220Ot5HU90_KpQv6ziii0VCoa1hZosUcsARL7DuJbFHA2kt_NBHvnURmPpKR0SMq0OfulzJokvobdu9t1z33Uby3oTAtTgEAEmxX6yDc_yuwmqHXAjh5SL0bhAyD6AF2wAN8me7fMKMULu_DS5KtLgwJjK8B2TmvGydn0neHDWcfSbDKP7WRP-RQQePc9hDcOCbUFoVrW2kfpg3p4OV-hWiV4q6-HBRZK3A1mcj5rJZd_zBe3v-yx6LHAXB2Bsb9Uc", "button"=>""}
Completed 422 Unprocessable Entity in 2701ms (Views: 0.5ms | ActiveRecord: 856.3ms)
If you are using the rails-ujs adapter, according to this Rails Edge Guide:
Signature of calls to UJS's event handlers has changed. Unlike the
version with jQuery, all custom events return only one parameter:
event. In this parameter, there is an additional attribute detail
which contains an array of extra parameters.
I'd suggest taking a look at your app/assets/javascripts/application.js and find out which ujs adapter you are currently using. //= require rails-ujs is the new default.
Take a look at the example provided in the guide. You can extract data, status, and xhr in the following manner.
document.body.addEventListener('ajax:success', function(event) {
var detail = event.detail;
var data = detail[0], status = detail[1], xhr = detail[2];
})
Another alternative is to to use jquery_ujs which was the default prior to Rails 5.1 and has a signature more like you were expecting.
Preface: I've looked for solutions on SO, but I think this may just be a me issue so I am not sure.
I am attempting to use HTML5 validations for client side validations on a form. I have custom validation error messages on the fields as well.
The issue I am having is when the user clicks submit on the form and the validation fails, then the user corrects the issue; the validation still fails.
I am unable to pass the validations even if the user corrects the issue in the form.
Form
<%= form_for(#booking) do |f| %>
<%= f.hidden_field :client_id, value: current_user.id %>
<%= f.hidden_field :talent_id, value: #profile.user.id %>
<div style='margin-left:auto; margin-right:auto; padding:1em'>
<div>
<p class='large-title upcase'>Assign Proposal to Production</p>
</div>
<div class='col-md-12'>
<%= select_tag :production_title,options_for_select(current_user.productions.map {|p| [p.title]}.uniq),{class: 'standard-text-field', prompt: "Choose Existing Production"} %>
</div>
<p>or</p>
<div class='col-md-12'>
<%= text_field_tag :new_production_title,nil, {class: 'standard-text-field', placeholder:"Create a New Production", maxlength: 45} %>
</div>
<div>
<hr style='margin-top:6.5em;'>
</div>
<div class='col-md-12'>
<%= select_tag :booking_templates, options_for_select(current_user.sent_bookings.where(template: true).map {|p| [p.job_title]}.uniq),{class: 'standard-text-field', prompt: "Choose Booking Template"} %>
</div>
<p>or create a new booking</p>
<div>
<p class='large-title upcase'>Job Details</p>
</div>
<div class='col-md-12'>
<%= f.text_field :job_title, { class: 'standard-text-field', placeholder:"Job Title", required: true, oninvalid: "this.setCustomValidity('Please enter a job title')" } %>
</div>
<div class='col-md-4'>
<%= f.text_field :d_start, { class: 'standard-text-field', required: true, oninvalid: "this.setCustomValidity('Please select a date')" } %>
</div>
<div class='col-md-4'>
<%= f.text_field :d_end, { class: 'standard-text-field', required: true, oninvalid: "this.setCustomValidity('Please select a date')"} %>
</div>
<div class='col-md-4'>
<%= text_field :shown_amount,nil, {class: 'standard-text-field', id: 'shown-amount', placeholder:"Total Amount (USD)", required: true, oninvalid: "this.setCustomValidity('Please enter a valid amount')", style: 'text-align:right'} %>
<%= f.hidden_field :amount, id: 'booking_amount' %>
</div>
<div>
<p class='large-title upcase'>Choose all that apply</p>
</div>
<div class='col-md-12'>
<%= f.text_area :job_description, class: 'standard-text-field standard-large-text-field', placeholder:"Job Description", required: true, oninvalid: "this.setCustomValidity('Please enter a brief description')" %>
</div>
<div>
<%= f.submit "Request to Book", class: 'modal-submit-button upcase', id: 'send-request' %>
</div>
</div>
<% end %>
My thought process is that there should be some js way that I could reset the validation if the validation does not pass, but not sure. Any help would be appreciated.
In my project I have two forms for two locales, so I have two EpicEditors on one page. However, it does not work well.
_form.html.erb
<div id="tabs-1">
<%= f.globalize_fields_for :ru do |g| %>
<div class="form-inputs">
<%= g.input_field :title, placeholder: t('.course_title') %>
<div id="epiceditor">
</div>
<%= g.input_field :description, id: "epiceditor-textarea" %>
</div>
<% end %>
</div>
<div id="tabs-2">
<%= f.globalize_fields_for :en do |g| %>
<div class="form-inputs">
<%= g.input_field :title, placeholder: t('.course_title') %>
<div id="epiceditor">
</div>
<%= g.input_field :description, id: "epiceditor-textarea" %>
</div>
<% end %>
</div>
<div class="form-actions">
<%= f.button :submit, t('.save'), class: "pull-right" %>
</div>
application.js
function LoadEditor(element) {
new EpicEditor({
container: element,
textarea: '#epiceditor-textarea',
theme: {
preview: '/assets/application.css'
}
}).load();
}
$("#epiceditor").each(function(index, element) {
LoadEditor(element)
});
What can you suggest I do?
Of course I can call method LoadEditor two times, but I think it is not a good solution, because then I will add more locales, maybe.
Using this code I have error:
Uncaught TypeError: Cannot read property 'value' of null
I have given a detailed answer at https://stackoverflow.com/a/35285968/936494. It shows passing custom options and how to use that to instantiate EpicEditor. Please have a look at it and try using the code given. I am sure it will be helpful.
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?