I'm trying to iterate over my database in EJS, and render them as an Accordion. There are 2 issues here. When I expand an individual accordion, they all expand. To solve this I tried to assign a unique id (by assigning a variable 'i' and then incrementing it at the end of the loop). But this also doesn't seem to work. Not sure what I'm doing wrong here.
Below is my EJS template code.
<% for(let li of list) { %>
<% let i = 0; %>
<div class="accordion" id="accordionExample<%=i%>">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne<%=i%>">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne<%=i%>" aria-expanded="true"
aria-controls="collapseOne<%=i%>">
<%= li.title %>
</button>
</h2>
<div id="collapseOne<%=i%>" class="accordion-collapse collapse"
aria-labelledby="headingOne<%=i%>" data-bs-parent="#accordionExample<%=i%>">
<div class="accordion-body">
<%= li.body %>
</div>
</div>
</div>
</div>
<% i++;%>
<% } %>
Are you using Bootstrap ?
Can you inspect and see what id is being added to accordian content div after render. More info is needed to solve this as I can't figure it out.
The data-target of the button should match with the id of the content div. Please verify this and reach again.
i think the problem that you put the " i " variable inside the for loop so every loop it starts to assign a new ' i ' variable with a start value of '0'
so i beleive the right way to do that is like that :-
<% let i = 0; %>
<% for(let li of list) { %>
<div class="accordion" id="accordionExample<%=i%>">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne<%=i%>">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne<%=i%>" aria-expanded="true"
aria-controls="collapseOne<%=i%>">
<%= li.title %>
</button>
</h2>
<div id="collapseOne<%=i%>" class="accordion-collapse collapse"
aria-labelledby="headingOne<%=i%>" data-bs-parent="#accordionExample<%=i%>">
<div class="accordion-body">
<%= li.body %>
</div>
</div>
</div>
</div>
<% i++;%>
<% } %>
Related
I've been trying to make a very simple ToDo list but when I want to show the description of the tasks, it displays all the descriptions, not only for that task itself. See the image, I want only one description by each task.
I'm using a forEach loop but idk if I should create a new variable to receive only the description of tasks. What can I do to show only one item from description and that's refer to the task.
Here is the EJS file:
<% todo.forEach(function(task) { %>
<div class="itens">
<li>
<a class="item" href="/edit/<%= task._id %>">
<%= task.task %>
</a>
<a class="item del-btn" href="/delete/<%= task._id %>" onclick="return confirm('Deseja excluir?');">
<img class="trash-icon" src="/images/trash.png" alt="">
</a>
<a class="item del-btn" href="/delete/<%= task._id %>" onclick="return confirm('Tarefa Concluida?');">
<img class="trash-icon" src="/images/done.png" alt="">
</a>
<% todo.forEach(function(desc) { %>
<p>
<%= desc.desc %>
</p>
<% }); %>
</li>
</div>
<% }); %>
Hey, I figure out what was the problem here. The second loop is what makes the description show duplicated and not only for the task.
Just erase the second loop and changes the <%= desc.desc %> to
<%= task.desc %> and will work fine!
I'm still a Rails beginner, and still have a lot to learn.
Currently, I can display all the images at once, no problem:
<!-- For the Thumbnail strip -->
<% #examples.each do |e| %>
<ul class="example-grid"><%= e.description %></ul>
<% if e.image.url != "/images/original/missing.png" %>
<p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
<% end %>
But I want to first show the image of #examples[0] and from there, have two link_to or button_to paths to show #example[current + 1]. Something like that.
How does this work?
Thank you SOF community!
You can use Jquery Sliders, image slide show plugins
Image Slide show demo link
try bootstrap carousel and genertate the html like you are doing now:
http://getbootstrap.com/javascript/#carousel
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<% #examples.each_with_index do |e, index| %>
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="<%= index %>" class="<%= if e.primary ? "active" : "" %>></li>
</ol>
<% end %>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<% #examples.each do |e| %>
<div class="item active">
<% if e.image.url != "/images/original/missing.png" %>
<p><%= image_tag e.image.url, size: "200x200" %></p>
<% end %>
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
I am using a Modal to pop up the show page inside the index page.....Everything works just fine until I click on a product. For some reason, the same name is popping up for every product on the modal
I know it's an easy fix, please help....new to rails
This is my code:
Views
_show.html.erb
<div id="myModal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="content-inner hero-unit">
<h1 class="pump-up center">
<br>
<strong>Coming Soon.</strong></h1>
<br><br>
<p>
<b>Name: </b>
**<%= #product.name %>**
</p>
</div>
</div>
index.html.erb
<div class="row">
<% #products.each do |product| %>
<div class="span3">
<%= render :partial => 'products/show', :locals => { :product => product } %>
<a href="#myModal" role="button" data-toggle="modal">
<%=(image_tag product.photo(:medium))%></a>
</div>
<% end %>
</div>
Model
product.rb
class Product < ActiveRecord::Base
attr_accessible :name, :photo
end
Controller
products_controller.rb
class ProductsController < ApplicationController
def show
#product = Product.find(params[:id])
end
def index
#products = Product.all
end
end
Ok The issue is with this code.
In Index.html.erb
It should be
<a href="#myModal<%=product.id %>" role="button" data-toggle="modal">
And Change ur _show.html.erb to this
<div id="myModal<%=product.id%>" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
This should do the JOB.
Also I see that you are not using the local variable that is passed from index action. you are using #product which may be an issue, try using just 'product' that is being passed from the index.html.erb
On my show page from a scaffold I have the following design:
<div id="show_location_main_area" class="grid_24">
<p>
<strong><%= #business_location.website %></strong>
</p>
<p>
<strong><%= #business_location.address %></strong>
</p>
</div>
<div class="grid_5">
<%= gmaps(#json) %>
</div>
If #business_location.address is blank I don't want to show this part on the page:
<div class="grid_5">
<%= gmaps(#json) %>
</div>
How is this done?
Thank you.
You can try following conditions -
unless #business_location.address.nil?
unless #business_location.address.empty?
if #business_location.address
Example -
<% unless #business_location.address.nil? %>
<div class="grid_5">
<%= gmaps(#json) %>
</div>
<% end %>
Just don't include it at all:
<% if #business_location.address.present? %>
<div class="grid5">
<%= gmaps(#json) %>
</div>
<% end %>
Or, if you need the .grid5 <div> there for your HTML/CSS to work:
<div class="grid5">
<% if #business_location.address.present? %>
<%= gmaps(#json) %>
<% end %>
</div>
i had installed the gem "carmen" successfully and also include it in my gem file, but when i write it's code in my view it gives error, here is my view:
<%= form_for(#contact) do |f| %>
<div class="field">
<%= f.label :country %><br />
<%= country_select(:country, "US") %>
</div>
<div>
<button type="submit" class="btn btn-green big"><img src= "images/add.png" /> Save</button>
<button type="reset" class="btn btn-gray big">Cancel</button> </div>
<% end %>
I am just confused ,how can i populate a default country Like :india
You should check out the carmen-rails library. If you want IN to be the default then,
<%= f.country_select :country_code, {priority: %w(IN)} %>