Rails Tabbed View using Javascript - javascript

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.

Related

Unresponsive UI elements become responsive after resize

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.

Bootsrap modals are not appearing in the rails app

I am implementing jquery on devise views on a sample rails application. Before I implement it on a production code I wanted to first try it on a sample app.
I have a welcome controller and view
routes.rb is as follows
get 'welcome/index'
devise_for :users
root 'welcome#index'
And the partial templates for both register and login lies in the following files as follows:
app/views/welcome/_login_modal.html.erb
<div class="modal hide fade in" id="login">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h2>Sign in</h2>
</div>
<div class="modal-body">
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name)) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<%= f.submit "Sign in", :class => 'btn btn-small btn-success' %>
<% end %>
</div>
<div class="modal-footer">
<%= render "devise/shared/links" %>
</div>
</div>
I have added my javascript code in the application.html.erb file
itself
<!DOCTYPE html>
<html>
<head>
<title>PopupDevise</title>
<%= link_to "Login", "#login", "data-toggle" => "modal", :class => 'btn btn-small' %>
<%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => 'btn btn-small btn-success' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>
</head>
<body>
<%= render "welcome/login_modal" %>
<%= render "welcome/sign_up_modal" %>
<%= yield %>
</body>
</html>
Now when I run rails s everything is visible. And when I click on either Login or Sign Up button the screen goes transparent grey but I don't see any popups modals. I am not that good in js or jquery part still learning. Could somebody please tell me how do I fix this ?
I can help you with this.
Remove
hide and in
from line
<div class="modal hide fade in" id="login">
You should be able to see modal when you click "Login" button.
Also remove bellow script tag inside <head> </head> as you are not using a modal with id myModal.
<script type="text/javascript"> $(function ()
{ $("#myModal").modal({show:false }); </script>

Raty jQuery plugin not working Rails 5

I'm new to RoR and I'm having issues displaying the Raty plugin on my app.
Also, I've noticed that another Js function has stopped working since I've added Raty so I believe there's a conflict between them?
Raty correspondent files have been added: jquery.raty.js // jquery.raty.css // images
All help would be appreciate, thank you!
/models/product.rb
def average_rating
comments.average(:rating).to_f
end
/assets/javascript/application.js
$(document).on('turbolinks:load', function () {
$(".alert").delay(1500).fadeOut("slow");
});
$(document).on('turbolinks:load', function () {
$(".notice").delay(1500).fadeOut("slow");
});
/assets/javascript/site.js
$(document).on('turbolinks:load', function(){
$('.rating').raty( { path: '/assets', scoreName: 'comment[rating]' });
$('.rated').raty({ path: '/assets',
readOnly: true,
score: function() {
return $(this).attr('data-score');
}
});
});
/views/products/_new_comment.erb
<% if signed_in? %>
<h2>Add a review:</h2>
<%= form_for([#product, #product.comments.build]) do |f| %>
<p>
<%= f.label :body, "Comments" %><br>
<%= f.text_area :body %>
</p>
<p>
<%= f.label :rating, "Rating" %><br>
<div class="rating"></div>
</p>
<br>
<p>
<%= f.submit "Submit" %>
</p>
<% end %>
<% end %>
/views/products/_comments.erb
<div class="product-reviews">
<% #comments.each do |comment| %>
<div class="row">
<hr>
<p><%= comment.user.first_name %> <small><em><%= "#{time_ago_in_words(comment.created_at)} ago" %></em></small></p>
<p><div class="rated" data-score="<%= comment.rating %>"></div></p>
<p><%= comment.body %></p>
</div>
<% end %>
</div>
/views/products/show.html.erb
<div class="col-md-12">
<%= render partial:'new_comment' %>
</div>
<div class="col-md-12">
<%= render partial:'comments' %>
</div>
You didn't copy your config/environments/production.rb in your question, but it probably looks like this:
config.assets.compile = false
If you change it to true, it should work:
config.assets.compile = true

Javascript and Ruby Sidescrolling

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/

JavaScript as a condition to load Rails form?

I have a form with a Jquery plugin requirement that creates a form input field with a type of Facebook-autocomplete kind of style:
<%= javascript_include_tag "form_prettify_library" %>
<div class="box">
<ul id="first_form" class="tagit">
<li class="prettify-new"></li>
</ul>
<%= form_for #brand do |f| %>
<%= f.hidden_field :tag_list, :value => #brand.tags_from(current_user).join(", "),
:id => "mytaglist" %>
<%= f.submit "Add tags" %>
<%= f.error_messages %>
<% end %>
</div>
It works well, however without JavaScript the form doesn't work because the form above only has a hidden_field and no visible entry field (the entry field is created by the plugin inside of the tags), and I need this to work without JavaScript on mobile devices. Is there any way to show the code above if JavaScript is loaded, otherwise the code below will be displayed if it isn't?
<div class="box">
<%= form_for #brand do |f| %>
<%= f.label :tag_list, "Your tags" %>
<%= f.text_field :tag_list, :value => #brand.all_tags_list %>
<%= f.submit "Add tags" %>
<% end %>
</div>
Yes, use css to hide it by default, and add a class to the site when js is enabled
html
<body class="no_js">
<script type="text/javascript">
(function() {
var body = document.getElementsByTagName("body")[0];
body.className = body.className.replace(/\bno_js\b/, " js ")
}())
</script>
css
.no_js .jsForm,
.js .no_jsForm {
display:none;
}
.js .jsForm,
.no_js .no_jsForm {
display: block;
}

Categories