is it possible to reorder/move widgets by given property on the dashboard ?
i am adding widgets dynamically to the dashboard by pushing data from a job to the erb file:
<div class="gridster">
<ul>
<% settings.servers.each do |data| %>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="<%=data['webHost']%>" data-title="<%=data['name']%>" data-version="<%=data['Version']%>" >
</li>
<% end %>
</div>
You can organize your widgets changing data-row and data-col.
If there are some property on your data that can be used to sort them the widgets, you could use it on data-row and data-col
Ex.:
<% settings.servers.each do |data| %>
<li data-row="<%= data['row'] %>" data-col="<%= data['col'] %>" data-sizex="1" data-sizey="1">
<div data-id="<%=data['webHost']%>" data-title="<%=data['name']%>" data-version="<%=data['Version']%>" >
</li>
<% end %>
Related
I have a list of items in rails that I would like to display in Tabs, what is the best way to achieve this in rails? Below is the code.
<ul class="nav nav-tabs">
<% State.all.each do |state| %>
<div class="btn-group btn-group" role="group">
<%= link_to state.status, tickets_path(state: state.status), :class => "panel-heading" %>
<div class="badge">
<%= state.tickets.count %>
</div>
</div>
<% end %>
Basically it is a list of about 8 categories which once clicked on filters the list based on the category.
Currently it displays with no tab styling. My goal is these bootstrap tabs.
State is the category class and Status is the actual category
You're not building the correct structure for the tabs.
The Bootstrap documentation specifies that you should create a structure that looks like this:
<ul class="nav nav-tabs">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
The structure that you're creating looks like this:
<ul class="nav nav-tabs">
<div class="btn-group btn-group" role="group">
[state status]
<div class="badge">[ticket count]</div>
</div>
<!-- more for each state -->
</ul>
What you actually want is something like this:
<ul class="nav nav-tabs">
<% State.all.each do |state| %>
<li role="presentation">
<%= link_to tickets_path(state: state.status) do %>
<%= state.status %>
<span class="badge"><%= state.tickets.count %></span>
<% end %>
</li>
<% end %>
</ul>
I extremely need your assistance. I have many to many :through relationship models: Product, Category and Categorization(as intermediate model). In my view I want to iterate through #products and fetch category's
field "title" on each iteration.
Here's my view:
<div class="col-md-9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<% #products.each do |product| %>
<% product.categories.each do |category| %>
<li class="item-thumbs col-md-4 <%= category.title %> ">
<% end %>
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" >
<span class="overlay-img"></span>
<%= icon 'font-icon-plus' %>
</a>
<!-- Thumb Image and Description -->
<%= image_tag product.product_images, alt: product.description %>
<p><%= product.price %></p>
</li>
<!-- End Item Project -->
<% end %>
</ul>
</section>
</div>
As you see, I need to get category's title on each iteration so as to insert it to li "class" and link each product tab to a menu "li".
The problem is that when I iterate through #categories inside #products loop, it executes just once therefore I don't get category's title for each product.
It looks to me like your loop is repeatedly creating the opening li tag rather than collecting all the category titles like you want, resulting in invalid HTML. Try writing your markup like so instead:
<div class="col-md-9">
<div class="row">
<section id="projects">
<ul id="thumbs">
<!-- Item Project and Filter Name -->
<% #products.each do |product| %>
<!-- RELEVANT CHANGES RIGHT HERE! -->
<li class="item-thumbs col-md-4 <%= product.categories.pluck(:title).join(' ') %>">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The City" >
<span class="overlay-img"></span>
<%= icon 'font-icon-plus' %>
</a>
<!-- Thumb Image and Description -->
<%= image_tag product.product_images, alt: product.description %>
<p><%= product.price %></p>
</li>
<!-- End Item Project -->
<% end %>
</ul>
</section>
</div>
</div>
This uses Rails' handy pluck method to grab all the relevant category titles directly from the database, then joins them together with spaces to make a valid class string. Is this the effect you were looking for?
I have an array of strings that I want to interpolate into links within an erb file.
How would I approach this syntactically?
Currently, I have the following
<% names.each do |name| %>
<b>
<%=name%>
</b>
<%end%>
<% navigation=["home","about us","store","contact","blog"] %>
<%navigation.each do |navitem| %>
<ul>
<li>
<a href= <%=/#{navitem}/%>".html">
<%=navitem%>
</a>
</li>
</ul>
<%end%>
Change
<a href= <%=/#{navitem}/%>".html">
to
<a href="<%= navitem %>.html">
I am trying to grasp interpolation and am trying to use a dynamic string ( i say dynamic as it can change all the time, I am pulling dates via a screen scrape for movie releases) and as an ID so that i can use bootstrap scrollspy in my project
I created a js fiddle using conventional ID's and anchor tags that demonstrates what I am trying to achieve.
As you can see, I would like to show the release date of a film if I am within that section as I am scrolling.
My code looks like this:
<div class="container">
<div class="row">
<div class="span8 offset2">
<div id="dateNav">
<ul class="dateNav">
<li><% #response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %></li>
</ul>
</div>
</div>
</div>
</div>
<div class="span9">
<% #response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="<%= date %>">Available on <%= date_format(date) %></h3>
</div>
<!-- More movie information here
<% end %>
I have my body set like so
<body data-spy="scroll" data-target="#dateNav">
and am calling scrollspy like so
$('.dateNav').scrollspy()
When you are in the relevant section the date is supposed to appear
CSS
ul.dateNav ul li a {
display:none;
}
ul.dateNav ul > li.active > a{
display:block
color: red;
text-decoration: underline;
}
however when scrolling down the page the dates do not appear.
Any help appreciated, would really like to clarify some understanding here.
Thanks
EDIT
ok so have changed as Joe Pym suggested
<li><% #response.each_pair do |date, movie| %><%= link_to date_format(date), "##{date}" %><% end %></li>
Each date has its own id now which wasnt happening before but still no appearance of the relevant date
HTML now generated
<ul class="dateNav">
<li>
9th Jan 2013
11th Jan 2013
18th Jan 2013
23rd Jan 2013
25th Jan 2013
30th Jan 2013
</li>
</ul>
EDIT for Sara
calling scrollspy
$('#spyOnThis').scrollspy();
Nav for dates
<div class="container">
<div class="row">
<div class="span12">
<div id="dateNav">
<ul class="nav dateNav">
<li><% #response.each_pair do |date, movie| %><%= link_to date_format(date), "#d_#{date}" %><% end %></li>
</ul>
</div>
</div>
</div>
List of Movies
<div id="spyOnThis">
<% #response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
<% movie.each do |m| %>
<div class="thumbnail clearfix">
<img class="pull-left" src=<% if m.image_link %> <%= m.image_link %> <% else %> "/assets/noimage.jpg" <% end %>>
<div class="caption pull-right">
<%= link_to m.name, m.title_id, :class => 'resultTitle fontSize11' %>
<p class="bio"><%= m.bio %></p>
<p class="resultTitle">Cast</p>
<p class="bio"><%= m.cast.join(", ") unless m.cast.empty? %></p>
<%= link_to "Remind me", reminders_path(:title_id => m.title_id), :method => :post, :class => 'links button' %>
</div>
</div>
<% end %>
<% end %>
</div>
CSS
#spyOnThis {
height:auto;
overflow:auto;
}
I set height as auto because the number of results can change every time
ul.dateNav > li.active > a {
display:block;
color: red;
text-decoration: underline;
}
IDs that start with a number are invalid. Source
Try adding a string constant to the beginning of each ID.
and
<h3 class="resultTitle fontSize13" id="d_<%= date %>">
Disclaimer: I don't know Ruby.
EDIT
Okay, so I stripped this down and got it working. jsFiddle
I changed some of your classes and IDs for fiddle purposes (also there seemed to be some confusion about .dateNav and #dateNav), but it should look something like this:
<ul class="nav dateNav">
<li>
<% #response.each_pair do |date, movie| %><%= link_to date_format(date) %><% end %>
</li>
</ul>
and
<div class="span9">
<% #response.each_pair do |date, movie| %>
<h3 class="resultTitle fontSize13" id="d_<%= date %>">Available on <%= date_format(date) %></h3>
</div>
You can put the IDs on div (like in the fiddle) or h3, it doesn't matter. The important part is the CSS and how you initiate ScrollSpy.
If you're calling it with JavaScript ($('#spyOnThis').scrollspy()), you need to attach it to the element that is going to trigger scroll events - not the menu that keeps track. Source
Furthermore, you should remove data-spy and data-target from the body element.
Last but not least, the element you're calling .scrollspy() on needs to have a height and overflow: auto; set for the plugin to keep track of the scroll position.
In your ERB, where you have
<li>
You aren't interpolating it. Change it to:
<li>
EDIT.
Scrap that...just looks like that a tag should be inside the loop?
I am working within a Ruby on Rails app. I have a loop that creates divs like this:
<% #snorks.each do |snork| -%>
<div>
<%= snork %>
</div>
<% end %>
And I need the output to have every other div be floated left or right like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
Additionally, I need to add a div with class="clear" every two divs, like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="right">
Casey Kelp
</div>
<div class="clear"></div>
<div class="left">
Dimmy Finster
</div>
<div class="right">
Daffney Gillfin
</div>
<div class="clear"></div>
<div class="left">
Tooter Shellby
</div>
<div class="right">
Dr. / Uncle Galeo
</div>
<div class="clear"></div>
I have researched, and found a few posts saying that the alternate classes can be accomplished easily by using cycle(), and that does work. However, when I use it in two places within the loop it stops working right and just outputs something like this:
<div class="left">
Allstar Seaworthy
</div>
<div class="left">
Casey Kelp
</div>
<div class="left">
Dimmy Finster
</div>
<div class="left">
Daffney Gillfin
</div>
<div class="left">
Tooter Shellby
</div>
<div class="left">
Dr. / Uncle Galeo
</div>
What's the best practices way in Ruby on Rails to alternate classes in a loop, and also add something every other loop?
According to the documentation, if you need nested ones you name them. Otherwise they will both share the name "default" and conflict.
<% #snorks.each do |snork| -%>
<div class="<%= cycle('left', 'right') -%>">
<%= snork %>
</div>
<%= cycle('','<div class="clear"></div>', :name=>"cleardiv") %>
<% end %>
The best thing here seems to be using each with index. That way you could do some simple modulus math to determine if the number is odd or even and output the correct class and add the clears.
#snorks.each_with_index do | snork, index|
If index%2 == 0
class = 'left'
else
class = 'right'
end
Well u get my drift and I'm on my phone.
use cycle helper
http://apidock.com/rails/ActionView/Helpers/TextHelper/cycle
<% #snorks.each do |snork| -%>
<div class="<%= cycle("left", "right") -%>">
<%= snork %>
</div>
<% end %>
Edit: for adding new div; following could help
<% #snorks.each_slice(2) do |snork_batch| -%>
<% snork_batch.each do |snork|%>
<div class="<%= cycle("left", "right",:name=>"className") -%>">
<%= snork %>
</div>
<%end%>
<div class="clear"></div>
<% reset_cycle("className")%>
<% end %>