I'm experiencing a weird UI bug where when I click on an element, can be a drop-down list or button, it is unresponsive. If I then resize the screen and click the element again, it is responsive. I haven't found a good explanation for why or how this is occurring. And it doesn't affect all elements on the relevant screen.
I have a front end using Bourbon SASS on a rails application. On some pages, I have jquery javascript, but on others, it is just HTML and CSS. The browser can be chrome or explorer.
I'd appreciate any insight into this issue. Let me know if I need to provide more information.
Here is the partial of the form that is affected. The second drop down element is unresponsive unless I maximize the screen.
<div class="send-invite-container">
<%= form_for :send_invite, url: admin_send_invite_url do |f| %>
<div class="field">
<%= f.label "First Name" %>
<%= f.text_field :first_name %>
</div>
<div class="field">
<%= f.label "Last Name" %>
<%= f.text_field :last_name %>
</div>
<div class="field">
<%= f.label "Email" %>
<%= f.text_field :email %>
</div>
<div class="field">
<%= f.label "Client" %>
<%=f.collection_select(:requested_organization, #client_collection, :name, :name)%>
</div>
<div class="field">
<%= f.label "Associated Company" %>
<%=f.select(:parent_role, options_for_select([["Company 1", "company_1"], ["Company 2", "company_2"], ["Other", "other"]]))%>
</div>
<div class="field">
<%= f.label "Roles" %>
<%= f.select(:requested_roles, Role::ROLES, {},
{ :multiple => true, :size => 6 }
) %>
</div>
<%= button_tag(type: "submit", class: "btn btn-success") do %>
<i class="icon-leaf"></i> Send Invite
<% end %>
<%end%>
</div>
Figured it out. There was a div element that was floating over the select box. The element was defined in the layout html file.
Related
I'm trying to use cocoon-gem and summernote-gem in my ruby-on-rails app.
This is my model:
class Dog < ApplicationRecord
has_many :pictures, as: :imageable, dependent: :destroy
accepts_nested_attributes_for :pictures, reject_if: :all_blank, allow_destroy: true
end
At first look new or edit page seems alright. First summary field render with summernote correctly. And if I already have several pictures saved to my dog model, they all look perfectly fine on editing page.
But when I click on "add picture" it creates new picture field with summary field not rendered properly with summernote. In html page it looks like this:
<div class="field">
<label class="string optional" for="dog_pictures_attributes_1544609860934_summary">Summary</label>
<textarea data-provider="summernote" name="dog[pictures_attributes][1544609860934][summary]" id="dog_pictures_attributes_1544609860934_summary"></textarea>
</div>
Instead of this:
<div class="field">
<label class="string optional" for="dog_pictures_attributes_1_summary">Summary</label>
<textarea data-provider="summernote" name="dog[pictures_attributes][1][summary]" id="dog_pictures_attributes_1_summary" style="display: none;"></textarea>
<div class="note-editor note-frame">...</div>
</div>
This is my _form.erb: (if relevant)
<%= simple_form_for #dog, defaults: { required: false } do |f| %>
<div class="field">
<%= f.label 'Note' %>
<%= f.text_area :note, 'data-provider': :summernote %>
</div>
<h2> Add pictures </h2>
<%= f.fields_for :pictures do |picture| %>
<%= render 'picture_fields', :f => picture %>
<% end %>
<div class='links'>
<%= link_to_add_association 'add picture', f, :pictures %>
</div>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
And this is my _picture_fields.erb:
<div class='nested-fields'>
<div class="field">
<%= f.file_field :image %>
</div>
<div class="field">
<%= f.label :author %>
<%= f.text_field :author %>
</div>
<div class="field">
<%= f.label :summary %>
<%= f.text_area :summary, 'data-provider': :summernote %>
</div>
<%= link_to_remove_association "remove picture", f %>
</div>
I also tried to build nested form from scratch with drifting ruby. But it cause the same problem
When dynamically inserting items into the page, you will have to initialize the summernote editor on those items as well. Cocoon has callbacks to allow you to do this.
When loading the page, to initialize summernote, you would do something like
$('[data-provider="summernote"]').each ->
$(this).summernote
(copied from the summernote-rails gem documentation)
But this only works for the "summernote"'s already on the page, it cannot initialize notes that are not yet there.
So, after inserting a nested-items we have to use the same code to initialise the inserted notes. Something like this should work:
$('form').on('cocoon:after-insert', function(e, insertedItem) {
insertedItem.find('[data-provider="summernote"]').each(function() {
$(this).summernote();
})
});
This will look for summernote items in the freshly nested-item and initialise those.
[EDIT: improve javascript to extract it from view]
Javascript files are generally grouped in app/assets/javascripts, if you are editing Dogs let's add a new file dogs.js and enter the following code:
$(document).on('cocoon:after-insert', 'form', function(e, insertedItem) {
insertedItem.find('[data-provider="summernote"]').each(function() {
$(this).summernote();
})
});
Then add this file to your application.js using require dogs.
This code registers an event handler on the document, it will listen to any cocoon:after-insert event triggered on a form. If you have multiple forms using cocoon, you might need a better/more precise css selector (e.g. add a class to the form and add that as well).
I have a problem with rendering an element in jquery/rails.
I would like to do something like this:
When a user clicks on the button "+", another field with select ingredient should be rendered below the default field (because a drink can have a lot of ingredients, and I don't want to specify the amount).
I can't figure it out, so I have to ask for help.
views/drinks/new.html.erb
<%= form_for #drink do |f| %>
<div class="form-group">
<%= f.label :name %><br />
<%= f.text_field :name, class:'form-control' %><br />
</div>
<div class="form-group">
<%= f.label :category %><br />
<%= f.select :category_id, Category.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select One'}, class:'form-control' %><br /><br />
</div>
<div class="form-group", id: "add-ingredients">
<%= f.label :ingredient %><br />
<%= f.select :ingredient_id, Ingredient.all.collect {|x| [x.name, x.id]}, {:include_blank => 'Select Few'}, class:'form-control' %><%= f.button "+", class:'btn btn-primary', id: 'btn-ingredients' %><br />
</div>
<div class="form-group">
<%= f.label :preparation %><br />
<%= f.text_area :preparation, class:'form-control'%><br />
</div>
<%= f.submit "Submit", class:'btn btn-primary' %>
<%= link_to "Cancel", drinks_path, class:'btn btn-default' %>
<% end %>
application.js
$(document).ready(function(){
$('#btn-ingredients').click(function(){
$('#add-ingredients').append('<%= render("form-group") %>');
});
});
I was trying a lot of times and it could be something really easy, but I'm a newbie and haven't got other ideas.
Well, you can do that in some ways, I just wanna say that manipulating directly the DOM many times is an anti-pattern. Nowadays you have frameworks as React/Redux or ClojureScript that handle the global state and re-render the DOM automatically when the global state "ingredients" is changed.
Maybe not now, but keep it in mind. Handle the state in a "Single Page Application" is tricky.
application.js is a static file which is not pre-processed by a ERB-processor, for example. It goes to user's browser as it is, and when executed on client side this code:
$('#add-ingredients').append('<%= render("form-group") %>');
produces a JS error.
To make it work you need to "unwrap" call of render("form-group") into HTML code. For example:
$('#add-ingredients').append('<div class="form-group">...</div>');
Also please note that append actually appends newly created element to the end of element, not AFTER it. So after that call new 'form-group' element will be added to the end of '#add-ingredients' content, which may be undesirable since it has class 'form-group' too.
I'm trying to make an "Add Car" button that when clicked shows the form that the user uses to add a car to their profile. I think I have the jQuery right, but I'm unsure of how to connect the button id and form to the script to make it work right. I currently have:
home.html.erb
<div class="row">
<aside class="col-md-4">
<section class="user_info" %>
<%= render 'shared/user_info' %>
</section>
<%= link_to "Add Car", shared/car_form, id: "add", class: "btn btn-lg btn-primary" %> //button that I want to hide/show the form
<section class="car_form">
<%= render 'shared/car_form' %> // current version that shows the form without having to click a button
</section>
</aside>
<div class="col-md-8">
<h3>My Cars</h3>
<%= render 'shared/feed' %>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('shared/car_form').hide(); // inserted form id, hides form
$('add').click(function() { // inserted button id
$('shared/car_form').show(); // inserted form id, shows form
});
});
</script>
And here is the car form, located in the "shared" folder
_car_form.html.erb
<%= form_for(#car, html: {multipart: true}) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<h3> Add Your Car</h3>
<div class="field">
<%= f.text_area :year, placeholder: "Year i.e. '1993" %>
<%= f.text_area :brand, placeholder: "Brand i.e. 'Ford'"%>
<%= f.text_area :model, placeholder: "Model i.e. 'Mustang'" %>
<%= f.text_area :vin, placeholder: "17 digit VIN number" %>
<%= f.text_area :mileage, placeholder: "Current Car Mileage" %>
</div>
<%= f.submit "Add Car", class: "btn btn-primary" %>
<span class="picture">
<%= f.file_field :picture, accept: 'image/jpeg,image/gif,image/png' %>
</span>
<% end %>
<script type="text/javascript">
$('#car_picture').bind('change', function() {
size_in_megabytes = this.files[0].size/1024/1024;
if (size_in_megabytes > 5) {
alert('Maximum file size is 5MB. Please choose a smaller file.');
}
});
</script>
jQuery has been added to the gem file and installed. Need help implementing it.
$('.btn-primary').on('click',function(evt) {
$('.car_form').show();
});
So im working on a RoR app and would appreciate a bit of help with something. In this app, I've got a series of discussions, posted by users, with comments below, also posted by users. In terms of design, i thought it would be cool if each discussion would take up the entire screen with a button to the right of it. pressing this button would cause the view to move and reveal another discussion. Any suggestions about how I would go about doing this? heres the discussion partial I have currently. thanks!
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300' rel='stylesheet' type='text/css'>
<% content_for :script do %>
<%= javascript_include_tag 'hover_content' %>
<% end %>
<% #micropost = Micropost.new %>
<% #micropost.discussion_id = discussion.id %>
<li>
<div class = "intro-bar"><span class = "intro"><%=discussion.intro %></span></div>
<div class = "content-bar">
<span class = "content"><%= discussion.content %></span>
</div>
<input type='button' id='hideshow' value='hide/show'>
</li>
<span class = "timestamp">
Posted <%= time_ago_in_words(discussion.created_at) %> ago.
</span>
<% if signed_in? %>
<div class = "row">
<aside class = "span4">
<section>
<%= form_for(#micropost) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
<div class="field">
<%= f.text_area :content, placeholder: "Post a comment" %>
</div>
<%= f.hidden_field :discussion_id%>
<%= f.submit "Break Up", class: "btn btn-large btn-breakup",:name => "break_up" %>
<%= f.submit "Stay Together", class: "btn btn-large btn-staytogether", :name => "stay_together" %>
<% end %>
</section>
</aside>
</div>
<% end %>
<div class = "comments">
<% discussion.microposts.each do |micropost| %>
<div class = 'comment-box'>
<li>
<div class = "comment-pic"></div>
<div class = "post-comment"><%= micropost.content%></div>
</li>
</div>
<% end %>
</div>
Your best bet would be a carousel.
For jQuery: http://sorgalla.com/projects/jcarousel/
(The "Special Examples" section has a text scroller which looks like what you want, but vertical)
For Prototype: http://code.google.com/p/prototype-carousel/
I'm trying to use tabifier in my rails app so I have:
<%= stylesheet_link_tag "example", "example-print" %>
<%= javascript_include_tag 'tabber.js' %>
<script>
/* Optional: Temporarily hide the "tabber" class so it does not "flash"
on the page as plain HTML. After tabber runs, the class is changed
to "tabberlive" and it will appear. */
document.write('tabber{display:none;}');
</script>
<div class="tabber">
<div class="tabbertab">
<h2>Tab 1</h2>
<%= form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :method => :put }) do |f| %>
<%= devise_error_messages! %>
<div><%= f.label :peeruser %><br />
<%= f.select :peeruser, [['Not yet','not yet'],['Beginner','beginner'],['Intermediate','intermediate'],['Expert','expert']] %></div>
<div><%= f.label :discipline %><br />
<%= f.text_field :discipline %></div>
<div><%= f.label :course %><br />
<%= f.text_field :course %></div>
<div><%= f.label :concept %><br />
<%= f.select :concept, [['Yes','yes'],['No','no']] %></div>
<div><%= f.submit "Continue" %></div>
<% end %>
</div>
<div class="tabbertab">
<h2>Tab 2</h2>
<p>Tab 2 content.</p>
</div>
<div class="tabbertab">
<h2>Tab 3</h2>
<p>Tab 3 content.</p>
</div>
</div>
<%= link_to "Back", :back %>
And I can't figure out why it's not loading correctly like the examples:
http://www.barelyfitz.com/projects/tabber/
I put the javascript if under public->javascripts and the css under public->stylesheets - like it just shows the text, none of it is linkable and it displays all the form information.
not exactly a solution, but why not use a more popular and feature-rich library ?
JqueryUI features a nice and simple way to implement tabs.
Once the lib is loaded, all you will have to do is
<script>
$(function() {
$( ".tabber" ).tabs();
});
</script>
then add some links, reclass all your divs and bam ! instant tabs.
Plus, you have all the Jquery Lib, which is pure awesomeness.
Turns out I had not put the css and js in the assets folder which was causing the problem.