Here's my code:
<div class="panel-group" id="accordion">
<% #workspace_tasks.each do |t, a| %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= t.to_s %>">
<%= t %>
</a>
</h4>
</div>
<div id="collapse<%= t.to_s %>" class="panel-collapse">
<div class="panel-body">
<table class="table table-striped">
</table>
</div>
</div>
</div>
<% end %>
</div>
As you can see, I am setting the ID for the panel to be in line with the Key for the hash which I am looping through.
The information is displayed correctly, however, if I set the panel by default to be expanded, I cannot collapse it. The inverse is true too where I cannot expand the panel if I set to to collapsed by default.
I us identical code elsewhere in my app but with a different Model being used to create the hash in the Controller. I find this behavior very strange.
I'm not sure whether it is my code? Or something with Bootstrap?
The HTML5 specifcation states that id cannot contain spaces:
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.
You need to prepare t variable to be a valid id, e.g. by replacing spaces with -:
t.to_s.gsub(/\s/, '-')
Or by using parameterize:
t.to_s.parameterize
Related
In my app each user has 4X graphs to display.
I'm displaying 3X col-md-4 graphs for each user through the each loop below.
This code is in my view.
<div class="row">
<div class="container">
<% #user_overviews.each do |overview| %>
<div class="col-md-4 text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph%>
</div>
<% end %>
</div>
</div>
the problem is that I need to be able to show a fourth graph below the other three graphs in a col-md-12.
I'm using active admin to upload the graphs, so the four graphs for user 1 have ID 1,2,3,4 and the next four graphs for user 2 have ID 5, 6, 7, 8 and so on.
So in graph 4 and 8 are the once that should be displayed in the col-md-12
I find it hard to get around how I can display graph 4 and 8 in a col-md-12
can someone advise me on how I would do that?
First of all (unless I'm missing something), the row div should be the child of the container div.
Given that the overviews will always be of fixed sized 4, try using the each_with_index method as shown below:
<div class="container">
<div class="row">
<% #user_overviews.each_with_index do |overview, index| %>
<div class="col-md-<%= index == 3 ? '12' : '4' %> text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph%>
</div>
<% end %>
</div>
</div>
If each user has exactly 4 overviews, probably a simple solution is to iterate over all except the last one and then put another row for the last overview. You will need another row anyway if you want to have col-md-12.
Also, I think the container div has to wrap everything else.
Something like this maybe:
<div class="container">
<div class="row">
<% #user_overviews[0...-1].each do |overview| %>
<div class="col-md-4 text-center">
<h4><%= overview.title %></h4>
<%= raw overview.graph %>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-12 text-center">
<h4><%= #user_overviews.last.title %></h4>
<%= raw overview.graph %>
</div>
</div>
</div>
Edit: Lazarus' solution is more DRY, so I think it's better.
I am currently working on a project that requires me to create a (real) estate agent website. I have imported an XML list with all the properties and created the database, but when I go to create a properties list and insert the first image for each property, it creates two images (one for each property in the list) and assigns both images to each property.
The code is:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<% property.pictures.each do |picture| %>
<% if picture.name.eql?('Photo 10') %>
<img src="<%= picture.url %>" class="img-responsive center-block"/>
<% end %>
<% end %>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
The html output is:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>Pen Y Bryn, Llanfairfechan</h4>
<p>A semi detached three bedroom family home located in a quiet cul de sac in the upper part of the village of Llanfairfechan. The property benefits from double glazed windows, gas central heating, gardens to front and rear. This would make an ideal family home or investment property.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>33, Pen Y Bryn, Llanfairfechan LL33 0UH</h4>
<p>A semi detached three bedroom family home located in a quiet cul-de-sac in the upper part of Llanfairfechan village. The property benefits from double glazed windows, gas central heating, gardens to front and rear. Restrictions apply. Application fees apply. Deposit: £750.</p>
</div>
</div>
</div>
</div>
To me it seems that rails is looping throught the property.picture.each twice (or I'm guessing more if I had more properties) and inserting the output twice but I can't see why.
Many thanks
It looks like you have duplicate pictures with a name attribute of 'Photo 10'. Use your rails console to run a query to confirm this.
Picture.where(name: 'Photo 10').count
How many records are returned? Is your expectation that each property would have one picture with a name of 'Photo 10'? If so you you should expect to have as many pictures returned as properties, if not then you have duplicate entries with the name 'Photo 10' for each property. which brings me to my next point.
You should normalize your database. The fact that you are relying on a non unique attribute, and that there are multiple picture entries that point to the same url tells me that. You are also creating a lot of unnecessary picture entries in the picture table. Instead, I'd create a join table between between properties and pictures, maybe called PropertyPictures. For each unique picture url, create one entry in the Picture table. For each property that uses a picture, create an entry in the join table with that property_id and the desired picture's picture_id. This will help in case your pictures change. As you have it now, if one picture url changes it doesn't change in all places, even if it should. As far as your view goes, now that you have a unique and consistent picture_id, use that, it will be impossible to have duplicates. Also, instead of pulling all pictures, just get the one you want. You could write a method in your property model to do this. It might look like this:
def special_picture
pictures.where(id: 1)
end
And in your view:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img src="<%= property.special_picture.url %>" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
`
If you're only wanting the first image for each listing, why are you looping through all pictures for each listing?
You could do this instead:
<div class="col-sm-3">
<img src="<%= property.pictures.first.url %>" class="img-responsive center-block"/>
</div>
Previously to create Accordion controls I used to use this piece of code:
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div>
<p style="background-color: red"> Someting ELSE in here</p>
<p style="background-color: red"> Someting ELSE2 in here</p>
</div>
</div>
</div>
</div>
or as seen here: Bootplay Live Demo
Now I still want to use my example but in this page I have a for-each loop so I need to create these at run-time.
The items I need to put variables there in order for this to work are
id="accordionMessagesSetup"
data-parent="#accordionMessagesSetup"
href="#collapseMessagesSetup"
id="collapseMessagesSetup"
How can I initialize those in a for-each loop a mode using Razor?
Imagine you have whatever property you like to do it in the model.
The biggest issue you are/will likely run into is Razor parsing. When you try to use a Razor variable in the middle of some bit of text, often Razor cannot determine where the variable name ends. For example, if you were to do something like:
<div id="accordion#Model.IdMessageSetup">
Razor thinks it needs to look for a property on the model named IdMessageSetup, when actually, you just wanted Id. The easiest way to fix this is to wrap the variable in paranthesis:
<div id="accordion#(Model.Id)MessageSetup">
Now, it's clear which part is the variable. As far as adding the # sign goes, I'm not really sure what the confusion is there. You just put it where it needs to go:
<a href="#collapse#(Model.Id)MessagesSetup">
Nothing special required.
I am trying to create a hover over action for items inside of a dynamically created loop. I have no idea what the object names are or how many there are. As of now, I have the list printed correctly and a hover over working, however the hover over only prints the info from the first item, no matter which one you are hovering over
<% #reward_definitions_with_user_points.each do |definition| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
For example: if the my list is a,b,c,d,e,f and I want the hover over to display each letter in sequence when activated. However it will display 'a' in the hoverover no matter which one the mouse activates.
You should probably mention that the problem you're having is with popovers. Also showing the html generated by your loop would be helpful. You seem to imply from the tags that popovers are an html5 thing, but I thought they were a part of twitter-bootstrap?
Having said all that...
What you are describing is clearly related to data-target="#point-tracker-popover". Which I believe is pointing to id="point-tracker-popover". The div with this id is being generated inside of your loop (having multiple elements with the same id is bad and is why you are experiencing the behavior you mentioned).
Changing your loop to use each_with_index should fix your problem.
<% #reward_definitions_with_user_points.each_with_index do |definition, index| %>
<li>
<a href="#" data-class="popover-inside" data-toggle="popover-follow" data-placement="right" data-btn-edit="hover" data-target="#point-tracker-popover-<%= index %>">
<%= definition.first.name %><span class="points"><%= format_points(definition.second) %> pts.</span>
</a>
<div id="point-tracker-popover-<%= index %>" style="display:none">
<div class="popover-title"><%=definition.first.name%></div>
<div class="popover-content">
<div class="popover-inner popover-lg">
<%=definition.first.description%><span class="points"><%= format_points(definition.first.points) %> pts.</span>
</div>
</div>
</div>
</li>
<% end %>
Of course, you may be able to simply change the target to a class like data-target=".point-tracker-popover" and change the id="point-tracker-popover" to be class="point-tracker-popover"; which would be a much cleaner approach. I am really not familiar with popovers, though, so I cannot say if this is the only problem you have, or if the second approach will work.
Thanks for reading. Super frustrated (and maybe missing something fundamental, I've never been great with Nokogiri)
In short - I have a source:
<div class="schedule-page">
<h3>Sunday, September 1, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
</table>
<h3>Sunday, September 7, 2013</h3>
<table class="views-table cols-1 schedule-table">
<div class="game">Game 1</div>
<div class="game">Game 2</div>
<div class="game">Game 3</div>
</table>
<!--and so forth.... -->
</div>
I am able to iterate through the source, grab each day and X number of games, and create the container for each day and fields for each game.
<% #schedule_array.each do |a_game| %> #
<div class="game-info">
<div class="date"><%= #the_date %></div>
<div class="single-game"> # this pulls info for each game, works fine.
<div class="game-home"><%= a_game.css('.field-home-team').text %></div>
<div class="game-score"><%= a_game.css('.field-score').text %></div>
<div class="game-away"><%= a_game.css('.field-away-team').text %></div>
<div class="game-time"><%= a_game.css('.field-game-date-start-time').text %</div>
</div>
</div>
<%end%>
But I really don't know how to retrieve the original date (h3) from the source and parse it in such a way so that I can use it as shown above.
I've tried a dozen variations of the example shown under Moving Nodes, here:
http://nokogiri.org/tutorials/modifying_an_html_xml_document.html
But nothing's working. Can anyone tell me the correct way to handle this? My method is gibberish and I'm not sure it's helpful to put it up.
I assume #schedule_array is coming from something like #schedule_array = Nokogiri::HTML( html_contents).css('.schedule-table').
In which case, you need to traverse back to the parent and go back to it's previous sibling and get the value:
game_date = a_game.parent.previous_element.text
So in your particular case, that line can be:
<div class="date"><%= a_game.parent.previous_element.text %></div>