My entries field is outputting the correctly selected FAQs multiple times?
I have an FAQ structure which has my Questions and Answers. I then created a Entries Field Type called faqRelated selecting FAQ as the source. And then added the field to the Single where I want FAQs to appear.
My template looks as such…
{% for faq in entry.faqRelated.all() %}
<div class="faq content">
<div class="faq__title" onClick="this.parentNode.classList.toggle('active'); this.nextElementSibling.classList.toggle('visually-hidden');">
<p class="h5 uppercase">{{ faq.title }}</p>
<span class="status"></span>
</div>
<div class="faq__content visually-hidden">{{ faq.textField }}</div>
</div>
{% endfor %}
The result is the three FAQs outputted four times? I was expecting three individual FAQs
Related
I'm creating a couple of thymeleaf fragments to use in other pages, and I was told they need to be inside a well-formed html page (with HTML, HEAD, BODY tags etc). Is this the case?
The fragments are only going to be used with th:include/th:replace in other places.
A fragment just needs to be a well formed html. You can start with a div
For e.g
<div th:fragment="formField (field, value, size)">
<div>
<label th:for="${#strings.toLowerCase(field)}"> <span
th:text="${field}">Field</span>
</label>
</div>
<div>
<input type="text" th:id="${#strings.toLowerCase(field)}"
th:name="${#strings.toLowerCase(field)}" th:value="${value}"
th:size="${size}">
</div>
Which you then include somewhere else
<body>
<header th:insert="fragments/general.html :: header"> </header>
<div th:replace="fragments/forms.html
:: formField(field='Name', value='John Doe',size='40')">
</div>
<div th:replace="fragments/general.html :: footer"></div>
I took these examples from here: https://www.baeldung.com/spring-thymeleaf-fragments
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
I'm trying to limit foreach item. here it is my source :
<div class="build-failed">
<h1 class="jenkins-status"><span data-bind="title"></span> FAILED</h1>
<ul class="list-nostyle list-failed">
<li data-foreach-item="failedJobs">
<div class="label" data-bind="item.label"></div>
<div class="value" data-bind="item.value"></div>
</li>
</ul>
</div>
<div class="build-succeeded">
<h1 class="jenkins-status">All <span data-bind="title"></span> builds are successful</h1>
<i class="fa fa-thumbs-o-up"></i>
</div>enter code here
<p class="updated-at" data-bind="updatedAtMessage"></p>
and I want to get only 3 results. I know that I have to add something in "data-foreach-item" but I don't know what is it.
With <iron-list>, your <ul> can be rewritten as
<ul>
<iron-list items="[[failedJobs]]">
<template>
<li>
<div class="label">[[item.label]]</div>
<div class="value">[[item.value]]</div>
</li>
</template>
</iron-list>
</ul>
Try and see if the property, maxPhysicalCount, can get you only three results ;)
I thought I would find an applicable filter in the documentation:
http://batmanjs.org/docs/filters.html
But I couldn't find one! first returns only one item and truncate works for strings only, so neither of those would work.
You can create your own filter:
https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook/html#sec-custom_filter
For example, to limit an array to three items:
Batman.Filters.limit = (array, limit) -> array?.slice(0, limit)
Then, use it in your binding:
<li data-foreach-item="failedJobs | limit 3">...</li>
(Hmm, I hope data-foreach works with filters!)
Anyhow, hope it helps :)
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.
What is the difference between the two Thymeleaf attributes: th:include and th:replace?
According to documentation if you have this situation:
<div th:include="..."> content here </div>
fragment will be placed inside <div> tag.
However when you use replace:
<div th:replace="..."> content here </div>
then <div> will be replaced by content.
Thymeleaf can include parts of other pages as fragments (whereas JSP
only includes complete pages) using th:include (will include the
contents of the fragment into its host tag) or th:replace (will
actually substitute the host tag by the fragment’s).
Taken from baeldung
There are three basic ways to include content from a fragment:
insert – inserts content inside the tag
replace – replaces the current tag with the tag defining the fragment
include – this is deprecated but it may still appear in a legacy code
Try to understand with this
suppose this the fragment
<div th:fragment="targetFragmentToIncludeInOurPage" id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
we are using this in these div
<div id="tagWithReplaceAttribute" th:replace="fragments/header :: targetFragmentToIncludeInOurPage"></div>
<div id="tagWithInsertAttribute" th:insert="fragments/header :: targetFragmentToIncludeInOurPage"></div>
<div id="tagWithIncludeAttribute" th:include="fragments/header :: targetFragmentToIncludeInOurPage"></div>
So the final output:
<div id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
<div id="tagWithInsertAttribute">
<div id="tagWithFragmentAttribute">
<div id="contentGoesHere"></div>
</div>
</div>
<div id="tagWithIncludeAttribute">
<div id="contentGoesHere"></div>
</div>
Thymeleaf can include parts of other pages as fragments (whereas JSP only includes complete pages) using th:include (will include the contents of the fragment into its host tag) or th:replace (will actually substitute the host tag by the fragment’s). This allows the grouping of fragments into one or several pages.