Develop Reference

Rails emoji picker won't load for Simple_Form textarea

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>

Is jQuery .append breaking my Rails form and causing it not to fully render?

Running into a strange issue. I using jQuery's .append() to place a <div> containing a Rails form next to the paragraph tag a user selects in my Rails app.
First off, before adding the jQuery effect, I tested this by placing a the form on the page. It loaded, worked, and posted the user's text to my database correctly.
Second, I added this effect, and the <div> with the form does load, but weirdly, you cannot click into it. The text cursor will appear for a moment, disappear, and the user can not actually enter anything in the text_field.
Here's what I am running:
view.html.erb
<% #posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<div id="paragraph"><%= markdown(post.content) %></div>
<% end %>
<div class="exampleToggle"> <!-- div that should append -->
<%= form_for :comments do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :username %><br>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$("p").click(function(){
$(this).append(whatever);
});
});
</script>
As I mentioned, the form does load and looks how it should after clicking on a paragraph element; however, the form will not accept text input.
Also, for clarity's sake, here is the CSS involved with the placing the <div> to the right of the clicked paragraph:
{
position: relative;
}
.exampleToggle {
position: absolute;
top: 0;
margin-left: 8%;
left: 100%;
width: 35%;
height: 100px;
}
Any idea why this is breaking the form/form helper?
EDIT 1: For clarity, the central issue here seems to be the Focus effect. To try and fix this, I updated the Javascript to allow for value entry when the .field class is activated, but it did not fix it. Here's what I tried.
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$("p").click(function(){
$(this).append(whatever);
});
$('.field').click(function () {
var val = $(this).val();
if (val == "") {
this.select();
}
});
});
</script>

You have given $("p"), but there is no p tag in your question.
Also you are looping the same id to different fields which is not correct, ID should be unique. Instead take the class instead of id.
You should take a class to the paragraphed_id field and should write the jquery functions based on the required classes.
Try this,
<% #posts.each do |post| %>
<h2 id="title"><%= post.title %></h2>
<div class="paragraph"><%= markdown(post.content) %></div>
<% end %>
<div class="exampleToggle"> <!-- div that should append -->
<%= form_for :comments do |f| %>
<div class="form-group">
<div class="field">
<%= f.label :username %><br>
<%= f.text_field :username, class: "form-control" %>
</div>
</div>
<div class="form-group">
<div class="field">
<%= f.label :post %><br>
<%= f.text_area :post, class: "form-control" %>
</div>
</div>
<div class="actions">
<%= f.submit "Save", class: "btn btn-success-outline" %>
</div>
<% end %>
</div>
<script>
$(document).ready(function(){
var whatever = document.getElementsByClassName("exampleToggle");
$(".paragraph").click(function(){
$(this).append(whatever);
});
});
</script>

jQuery - Can't get blind effect in a Rails form

I am working on a Ruby on Rails 4 project, i'm trying to use jQueryUI method show with blind effect in a form_for. The problem here is that my form will appear as expected, but the effect will not work properly. When ever I check the checkbox, the targeted div will eventually appear, but in a weird way: at first some empty space will pop-up in its place, and after 1 sec the whole div with its' content will appear.
Here is my html.erb
<%= form_for(#reserva) do |f| %>
<% if #reserva.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#reserva.errors.count, "error") %> prohibited this reserva from being saved:</h2>
<ul>
<% #reserva.errors.full_messages.each do |msg| %>
<li><%= msg %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="span12 field-box">
<%= f.label :cliente_id %>
<% clientes_array = Cliente.all.map { |cliente| ["#{cliente.nombre} #{cliente.apellido}", cliente.id] } %>
<%= f.select(:cliente_id, options_for_select(clientes_array)) %>
</div>
<div class="span12 field-box">
<label >Cliente Nuevo?</label>
<%= check_box_tag 'con_cliente', 'ClienteNuevo', false %>
</div>
<div id="cliente_form">
<%= f.fields_for :cliente, #cliente do |cliente_builder| %>
<div class="span12 field-box">
<label>Nombre:</label>
<%= cliente_builder.text_field(:nombre, class: "span9") %><br />
</div>
The javascript here:
<script type="text/javascript">
$(document).ready(function(){
$("#cliente_form").hide();
$("#con_cliente").bind('change', function(){
if($(this).is(':checked')){
$("#cliente_form").show("blind");
}
else{
$("#cliente_form").hide("blind");
}
});
});
</script>
Any ideas?

Finally i solved the issue, the problem was that bootstrap and the jquery-ui have conflicts between them, and the effect can't appear as expected.

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?

How do I apply function to just the class a jquery ajax submission was done from?

Here is the code I'm currently using:
$.ajax({
success: function(){
$('.post_container').append('test <br />');
}
});
<% sleep 1 %>
It is similar to the code I used for my single main micropost form but with this there are several comments that use the same class and so test is being applied to all post_containers rather than the one the post was just made to. "test" text will eventually be replaced with the div that holds the actual comments users post.
Normally I would use "this" but that won't work here.
HTML:
<div class="post_content">
<div class="post_container">
<div class="userNameFontStyle">
<%= link_to current_users_username.capitalize, current_users_username %> -
<div class="post_time">
<%= time_ago_in_words(m.created_at) %> ago.
</div>
</div>
<%= simple_format h(m.content) %>
</div>
<% if m.comments.any? %>
<% comments(m.id).each do |comment| %>
<div class="comment_container">
<%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>
<div class="commenter_content">
<div class="userNameFontStyle">
<%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%= simple_format h(comment.content) %>
</div>
</div>
<div class="comment_post_time">
<%= time_ago_in_words(comment.created_at) %> ago.
</div>
</div>
<% end %>
<% end %>
<% if logged_in? %>
<%= form_for #comment, :remote => true do |f| %>
<%= f.hidden_field :user_id, :value => current_user.id %>
<%= f.hidden_field :micropost_id, :value => m.id %>
<%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>
<div class="commentButtons">
<%= f.submit 'Post it', :class => "commentButton" %>
<div class="cancelButton">
Cancel
</div>
</div>
<% end %>
<% end %>
</div>
</div>
How would I deal with this?
Kind regards

NEW:
$(function() {
$('.post-form').submit(function(){
var $post_content = $(this).find('.post_content');
$.ajax({
url: this.attributes['action'],
data: $(this).serialize(),
success: function() {
$post_content.append('test <br />');
}
})
return false; //this will stop the form from really submitting.
});
});
This should do what you're looking for. Simply include this javascript anywhere.
OLD:
$('form').submit(function(){
$.ajax({
url: this.attributes['action'],
data: $(this).serialize(),
//the below line might need to be adapted.
var post_content = $(this).find('.post_content');
success: function() {
$(post_content).append('test <br />');
}
})
this assumes that there is only one form on the page. However, for the code to completely work, I need to know how to differentiate which .post_content is the "submitted" post_content. How do you programatically determine that? Is there a different button for each post_content? Or are there different forms around each post_content div? Whichever way it is, you'll have to include that somehow into the js code.

This is how I had to do it in the end.
.new_comment is my form id
$('.new_comment').on('ajax:success', function(){
$(this).parent('.post_content').find('.comment_container:last').after("<BR />TEST <BR />");
});
<% sleep 1 %>
The only issue now is identifying the actual comment_container for the post just made.