I found this question, which has an answer which is exactly what I tried to start. However, it does not yield the intended results.
Given array #items, I want to create a new row for every 3 items. This is currently my markup:
- #items.each_with_index do |item, index|
- if index % 3 == 0
%div.row-fluid
%div.span4
%div.item-container
use item
This results in html being rendered like this
<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="row-fluid"></div>
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
Of course, what I want is:
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
<div class="row-fluid">
<div class="span4">...</div>
<div class="span4">...</div>
<div class="span4">...</div>
</div>
Where am I going wrong here?
Divide collection using Array#in_groups_of an then iterate it:
- #items = (1..20).to_a
- #items.in_groups_of(3, false).each_with_index do |group, index|
.row-fluid
- group.each do |item|
.span4= "group: #{index}; item: #{item}"
hint: You can leave off the tag definition and have it default to %div. %div.span4 became just .span4 and so on.
Related
Im stuck in a very simple problem. I am receiving an array of parameters in my view and want to iterate over the values.
This is the print of my params:
Parameters: {"utf8"=>"✓", "authenticity_token"=>"dfOQVuXlQriII3akiGCSuMIf4i2B8c1/OX02nd6Dhy0ZKzHkhiXxlcXKCJAMFHw0vhtNKKVYuLHFo22LGsy6UQ==", "album"=>{"name"=>"asdasd", "photos_media"=>["[{\"id\":\"a245b724845f447eb63dfbaa3fba173669b55fcdf7fb55fb634707ff0c1c\",\"filename\":\"BWT_eUmU.jfif\",\"content_type\":\"image/jpeg\",\"size\":56060},{\"id\":\"1bfb4188a126079f5069c5204f8df1c7169d0464f488385ef1f8d081fcda\",\"filename\":\"drafts.png\",\"content_type\":\"image/png\",\"size\":6029}]"]}, "commit"=>"Save Album"}
My album_params are like this:
def album_params
params.require(:album).permit(:name, photos_media: [])
end
And my form:
<%= form_for #album do |f| %>
<div class="col-9">
<div class="form-group row" >
<div class="col-6">
<label for="">Name:</label>
<%= f.text_field :name %>
</div>
</div>
</div>
<div class="col-9">
<div class="form-group row" >
<div>
<div class="progress" id='progress-bar' style='display:none;'>
<div class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%"><h6>Loading...</h6>
<span class="sr-only" id='progress-bar-text'></span>
</div>
</div>
</div>
<div class="col-6">
<label for="">Add or drag photos here:</label>
<%= f.attachment_field :photos_media, multiple: true, direct: true, presigned: true %>
</div>
</div>
</div>
How can I iterate over photos_media? If I do a print on it like this:
logger.debug("******SIZE*** #{album_params[:photos_media].size} ")
It says the size is 1. Like a big string.
What im doing wrong?
As Vailisa says, photo_media contains an Array with one element that is a string:
"photos_media"=>["[{\"id\":\"a245b724845f447eb63dfbaa3fba173669b55fcdf7fb55fb634707ff0c1c\",\"filename\":\"BWT_eUmU.jfif\",\"content_type\":\"image/jpeg\",\"size\":56060},{\"id\":\"1bfb4188a126079f5069c5204f8df1c7169d0464f488385ef1f8d081fcda\",\"filename\":\"drafts.png\",\"content_type\":\"image/png\",\"size\":6029}]"]
Specifically, that string is a JSON string.
To parse that on the backend, you can try:
#photo_media_ary = JSON.parse(album_params[:album][:photos_media][0])
I am new in MVC. In this page; I list the projects belonging to the "unit name" by loop. And what I want to do: I want to group projects belonging to the same "unit name". Each project has a "unit name" to which it belongs. There can be more than one project belonging to one unit. So I want to group it.
My cshtml code is as follows:
#if (Model.Projects.Any())
{
foreach (var item in Model.Projects.ToList())
{
<div class="ProjectPartialBody" data-id="#item.ID">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<span><i class="glyphicon glyphicon-asterisk"></i> #item.tbl_Unit.Name</span>
</div>
<div class="tools">
</div>
<div class="actions">
Details
</div>
</div>
<div class="portlet-body">
<span><i class="fa fa-file"></i> #item.Name</span>
<span><i class="fa fa-calendar"> Contract Start and End Dates: #(item.ContractStartDate != null ? item.ContractStartDate.Value.ToString("dd.MM.yyyy") : "-") / #(item.ContractEndDate != null ? item.ContractEndDate.Value.ToString("dd.MM.yyyy") : "-")</i></span>
<div class="well">
<div class="form-group">
<label>Cash Completion Rate: %#item.CashCompletionRate</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(item.CashCompletionRate)%;"></div>
</div>
</div>
</div>
<div class="well">
<div class="form-group">
<label>Physical Completion Rate: %#item.PhysicalCompletionRate</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(item.PhysicalCompletionRate)%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
}
}
And the view of the page is as follows (my view is in Turkish language but you'll understand what I am talking about):
My Page View
Can you please help me? And if there is any other code block you want to insert, please tell me.
You first need to group by in your for statement:
foreach(var unitGroup in Model.Projects.GroupBy(g => g.tbl_Unit.Name))
{
//...your MVC markup here
}
Now you actualy need to change the markup as you would need to put in another foreach loop that would generate markup for projects.
So something simillar to this.
<div class="ProjectPartialBody" data-id="#item.ID">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
<span><i class="glyphicon glyphicon-asterisk"></i> #item.tbl_Unit.Name</span>
</div>
<div class="tools">
</div>
<div class="actions">
Details
</div>
</div>
#foreach(var project in unitGroup.ToList())
{
<div class="portlet-body">
<span><i class="fa fa-file"></i> #project.Name</span>
<span><i class="fa fa-calendar"> Contract Start and End Dates: #(project.ContractStartDate != null ? project.ContractStartDate.Value.ToString("dd.MM.yyyy") : "-") / #(project.ContractEndDate != null ? project.ContractEndDate.Value.ToString("dd.MM.yyyy") : "-")</i></span>
<div class="well">
<div class="form-group">
<label>Cash Completion Rate: %#project.CashCompletionRate</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(project.CashCompletionRate)%;"></div>
</div>
</div>
</div>
<div class="well">
<div class="form-group">
<label>Physical Completion Rate: %#project.PhysicalCompletionRate</label>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar" style="width: #(project.PhysicalCompletionRate)%;"></div>
</div>
</div>
</div>
</div>
}
</div>
</div>
There should be some errors here as I am not very familliar with your model but this should be the general idea behind it.
I've been struggling with string interpolation inside an HTML accordion. It's more a logic issue that I can't seem to figure out (fairly new to rails). The problem I have is that while the layout is fine, when I click to collapse any of the 3 collapsible panels they all collapse. (Because I only have 1 #collapse).
Outermost ERB
<div class="container-fluid">
<div class="row">
<div class="col-md-2 col-sm-3">
<h2>Categorias</h2>
<div class="panel-group" id="accordion">
<%= render partial: "categories/catalog", collection: #categories, as: :c %>
</div>
</div>
_catalog Partial
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<%= c.name %>
<span class="badge">4</span>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<% c.subcategories.each do |sc| %>
<div class="panel-body">
<a href="#">
<%= sc.name %>
</a>
</div>
<% end %>
</div>
</div>
Controller
def catalogo
#categories = Category.where("parent_id IS NULL")
unless params[:cat_id].blank?
#products = Product.where(category_id: params[:cat_id]).paginate(:page => params[:page], :per_page => 50)
else
#products = Product.all.paginate(:page => params[:page], :per_page => 50)
end
#categorieswparent = Category.where("parent_id IS NOT NULL")
end
Your IDs need to be unique. Instead of hard-coding id="collapse1", use the ID of the record:
id="collapse<%= sc.id %>"
Perform the same interpolation for the href of the <a> tag responsible for collapsing and expanding the accordion.
Use category id id="#collapse<%= c.id %>" to interpolate with element id in _catalog Partial.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= c.id %>">
<%= c.name %>
<span class="badge">4</span>
</a>
</h4>
</div>
<div id="collapse<%= c.id %>" class="panel-collapse collapse in">
<% c.subcategories.each do |sc| %>
<div class="panel-body">
<a href="#">
<%= sc.name %>
</a>
</div>
<% end %>
</div>
</div>
I'm new to MVC.NET and I'm working with MVC4 .
In a project I should return System Information like Post count, User counts and etc. In My _Layout I have defined a Sidebar which will show these data.
here is my sidebar div
<div class="sideElement">
<div class="header">
مشخصات سیستم
</div>
<div class="body">
#{Html.Action("GatherSystemInfo","Home").ToString();}
</div>
</div>
My GatherSystemInfo Action is Like This :
Of Course I have used static data For testing
[OutputCache(Duration=900, VaryByParam = "none")]
[ChildActionOnly]
public ActionResult GatherSystemInfo(SystemInformation model = null)
{
model.QuestionCount = 10930;
model.ToturialCount = 10353;
model.UserCount = 120123;
model.ProjectsNumber = 10231;
model.DateTime = DateTime.Now.ToLongTimeString();
model.OnlineUsers = 28;
return PartialView("_SystemInfo", model);
}
And My Partial View Is like this:
#model Persiangeeks.Models.SystemInformation
<div class="infoContainer">
<div class="rightFloated sysInfoTitle">تعداد سوالات ثبت شده : </div>
<div class="leftFloated sysInfoValue">#Html.Raw(Model.QuestionCount)</div>
<div class="clear" ></div>
</div>
<div class="infoContainer">
<div class="rightFloated sysInfoTitle">تعداد آموزشهای موجود : </div>
<div class="leftFloated sysInfoValue">#Html.Raw(Model.ToturialCount)</div>
<div class="clear" ></div>
</div>
<div class="infoContainer">
<div class="rightFloated sysInfoTitle">تعداد پروژه های موجود : </div>
<div class="leftFloated sysInfoValue">#Html.Raw(Model.ProjectsNumber)</div>
<div class="clear" ></div>
</div>
<div class="infoContainer">
<div class="rightFloated sysInfoTitle">تعداد کاربران ثبت شده : </div>
<div class="leftFloated sysInfoValue">#Html.Raw(Model.UserCount) نفر</div>
<div class="clear" ></div>
</div>
<div class="infoContainer">
<div class="rightFloated sysInfoTitle">تعداد کاربران آنلاین : </div>
<div class="leftFloated sysInfoValue">#Html.Raw(Model.OnlineUsers) نفر</div>
<div class="clear" ></div>
</div>
But When I run my project I have Nothing to show in my sidebar div. here is the Image
Thank you for your help :)
Html.Action() – Outputs string
Html.RenderAction() – Renders directly to response\
Solution : use RenderAction() in place of Action()
I want to write 4 columns in a row like this
<div class="row">
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
</div>
<div class="row">
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
</div>
data sizes are dynamic, so it can be 4, 8 or more.
this is archived in other template engine
{{#each list}}
{{#if #index % 4 == 0}}
<div class="row">
{{/if}}
<div class="span3">{{this.name}}</div>
{{#if #index % 4 == 0}}
</div>
{{/if}}
{{/each}}
but how can I archive this in thymeleaf?
I can't find the way because th:each is in tag(<div class="row"> or <div class="span3">) as attribute.
Model code
List<String> data = new ArrayList<String>();
data.add("1");
data.add("2");
data.add("3");
data.add("4");
data.add("5");
data.add("6");
data.add("7");
data.add("8");
model.addAttribute("datas", data);
Thymeleaf view code
<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.current} % 4 == 0" class="span3">
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>
Result
<div class="span3">
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="span3">
<span>5</span><span>6</span><span>7</span><span>8</span>
</div>
I used an array to solve this problem.
I think you will find a better way.
This can be done using numbers.sequence too. Set colCount to whatever number of columns you'd like:
<th:block th:with="colCount=${4}">
<div th:each="r : ${#numbers.sequence(0, datas.size(), colCount)}" class="row">
<div th:each="c : ${#numbers.sequence(0, colCount - 1)}" th:if="${r + c < datas.size()}" th:text="${datas.get(r + c)}" class="span3"></div>
</div>
</th:block>
I just created an account here to correct the accepted answer. The accepted answer works great so long as the "datas" being passed in is an array of consecutive integers. However, to make it work with any kind of data structure, "row.current" needs to change to "row.count", as follows:
<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.count} % 4 == 0" class="span3">
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>
If you use row.current, then it uses the actual item in the list, which is great in the example shown, but not so great for any other kind of data structure. Hope this helps.
EDIT:
I have to further refine this because the accepted answer also does not work if the number of items in the list is not evenly divisible by 4. Here is a better (though probably not perfect) solution:
<div th:each="data, row: ${datas}" th:with="numList=${ {3,2,1,0} }" th:if="${row.count % 4 == 0 or row.last}" class="span3">
<!-- Show all rows except the leftovers -->
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.count % 4 == 0}" th:text="${datas[dataIndex]}">data</span>
<!-- Show the remainders (eg, if there are 9 items, the last row will have one item in it) -->
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.last} and ${row.count % 4 != 0} and ${num < row.count % 4}" th:text="${datas[dataIndex]}">data</span>
</div>
This may be able to be refactored to eliminate one of the spans, but I have to move on now.
th:each can be used on any element basically. So something like this:
<div class="row" th:each="row : ${rows}">
<div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div>
</div>
<div class="row" th:each="museum,step : ${museums}">
<span th:if="${step.index % 2 == 0}">
<div class="column" style="background-color:#aaa;" >
<h2 th:text="'Name: ' + ${museum.name}"></h2>
<p th:text="'Address: ' + ${museum.address}"></p>
<p th:text="'Capacity: ' + ${museum.capacity}"></p>
</div>
</span>
<span th:if="${step.index < 3 and step.index %2 == 0} ">
<div class="column" style="background-color:#bbb;">
<h2 th:text="'Name: ' + ${museums[step.index+1].name}"></h2>
<p th:text="'Address: ' + ${museums[step.index+1].address}"></p>
<p th:text="'Capacity: ' + ${museums[step.index+1].capacity}"></p>
</div>
</span>
</div>
This is how I would approach the problem. Using a simple odd or even trick
I had the same problem and I saw the accepted answer but it was not easy enough for me so I tried a new solution and it does the job with much less code and much easier to understand
this is what I came up with:
// rowNum your situation, but be aware that you have to change all its instances to
<div th:each="i: ${#numbers.sequence(1, rowNum)}" class="row">
<div th:each="j: ${#numbers.sequence(((i-1) * rowNum), ((i-1) * rowNum) + (rowNum - 1)) }"
th:if="${j < #lists.size(list)}"
class="col col-md-5">
<span th:text=${list.get(j)}>item</span>
</div>
</div>
These are all so complicated when the answer is so simple as answered here.
<div colCount=${4} class="row">
<div class="span3" th:each="data : ${data}">...</div>
</div>
It limits the for each to 4 element blocks. I'm guessing that's a relatively new feature. Pretty cool.