I want to know what language can make my template being dynamic. Example HTML sturtcure
<div id="tabs">
<ul class="tabs">
<li>Header</li>
<li>Navigation</li>
<li>Layout & Colors</li>
<li>Optimization</li>
<li>Miscellaneous</li>
</ul>
<form method="post" action="options.php">
<div class="tab-container">
<div id="tabs-1" class="tab-content">Header</div>
<div id="tabs-2" class="tab-content">Navigation</div>
<div id="tabs-3" class="tab-content">Layout & Colors</div>
<div id="tabs-4" class="tab-content">Optimization</div>
<div id="tabs-5" class="tab-content">Miscellaneous</div>
</div>
</form>
</div>
I want the LI and DIV
<li>Header</li>
<div id="tabs-1" class="tab-content">Header</div>
Can be dynamic without write it one by one. How to do that?
jQuery Templates works best in this scenario.
Check the doc #:
http://api.jquery.com/jQuery.template/
I'd use Python, more specifically Flask. Here's a maybe-working template. I'm guessing your element's names are stored in a list returned by get_titles:
<div id="tabs">
<ul class="tabs">
{% for index in get_titles|length %}
<li>{{ titles[index] }}</li>
{% endfor %}
</ul>
<form method="post" action="options.php">
<div class="tab-container">
{% for index in titles|length %}
<div id="tabs-{{ index + 1 }}" class="tab-content">{{ titles[index] }}</div>
{% endfor %}
</div>
</form>
</div>
But then again, this might be a bit overkill.
Related
I am writing a diploma in symfony 5 and studying symfony in parallel. I reached the implementation of the search in the table. I have a search field
<div class="search__container">
<div class="search__block">
<img class="search__glass" src="{{ asset('images/search-glass.svg')}}">
<input class="search__field" type="text">
</div>
</div>
and the actual table itself, which is output as follows
<div class="table__body">
{% block table_items %}
{% for item in items %}
<div class="body__item">
<a class="item__detail" href="item.html"></a>
<img class="item__icon" src="images/icons/{{ item.extension }}.svg">
<div class="item__title">{{ item.fileName }}</div>
<div class="item__extension">{{ item.extension }}</div>
<div class="item__updated">{{ item.uploaded }}</div>
<div class="item__size">{{ item.size }}b</div>
<div class="item__act">
<span></span>
<span></span>
<span></span>
<div class="action__popap">
<ul class="actions__list">
<li class="act__item detail">
Detail
</li>
<li class="act__item delete">
Delete
</li>
<li class="act__item download">
Download
</li>
</ul>
</div>
</div>
</div>
{% endfor %}
{% endblock %}
</div>
I want to do a search by "item.fileName" without reloading the page. And when I started doing it, I was at a dead end, not knowing what to do. I can do this with a page reload, but as for me it is not very convenient.
So, how can i do this?
I hope you can help me or point me to the correct vector.
I am new to OctoberCMS and I am stuck now, I am facing issue to use my custom blog posts component (which overrides Rainlab blog posts) in the same page multiple times.
Say I have created an alias of default blogPosts to postLists and I defined my custom HTML structure and it is working well, no issues.
Now what I want is to use the postLists post structure in my page for three different categories and here I am stuck because when I pass variable to component like this - { % component 'postLists' categoryFilter='news' %} it does not work for the category filter and if I select a category from drag drop component UI it becomes global categoryFilter setting for the page.
This is my requirement.
My postList component code:-
{% set posts = __SELF__.posts %}
{% for post in posts %}
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4 col-4 content_body_img">
<a href="{{ post.url }}">
{% if post.featured_images.count > 0 %}
<img class="media-object" src="{{ post.featured_images.first.getThumb(108, 108) }}" />
{% else %}
<img class="media-object" src="http://placehold.it/108x108" />
{% endif %}
</a>
</div>
<div class="col-sm-8 col-8">
<p>{{ post.title }}</p>
<!--location_date-->
<div class="location_date">
<ul>
<li><i class="fa fa-calendar"></i><span> {{ post.published_at|date('j F, Y') }}<span></li>
<li><i class="fa fa-map-marker"></i>Dubai</li>
</ul>
</div>
<!--location_date end -->
</div>
</div>
</div>
<!--content_body_img end -->
{% else %}
<div class="col-sm-6 col-6 col-lg-3">{{ noPostsMessage }}</div>
{% endfor %}
Please help me, any help will be very much appreciated.
Thanks Sanny
This is static Approach - I will post dynamic Approach as well give me some time
Best and possibly easy solution will be ( in case you just intend to show posts ) is to add 3 Post List component with Different Category filter option for each tab.
It should do your work
make sure this is optimal solution if you just need to show lists nothing else.
I am trying to loop through an array of meeting objects each meeting on same date needs to be displayed inside its own div and if the date changes then that date meeting needs to be in next div so the output i am looking for is something like this
<div class="row">
<h2 class="date-heading">September 24</h2>
<div class="col4">Meeting 1 </div>
<div class="col4">Meeting 2 </div>
<div class="col4">Meeting 3 </div>
<div class="col4">Meeting 4 </div>
<div class="col4">Meeting 5 </div>
</div>
<div class="row">
<h2 class="date-heading">September 25</h2>
<div class="col4">Meeting 1 </div>
<div class="col4">Meeting 2 </div>
<div class="col4">Meeting 3 </div>
<div class="col4">Meeting 4 </div>
<div class="col4">Meeting 5 </div>
</div>
<div class="row">
<h2 class="date-heading">September 26</h2>
<div class="col4">Meeting 1 </div>
<div class="col4">Meeting 2 </div>
<div class="col4">Meeting 3 </div>
<div class="col4">Meeting 4 </div>
<div class="col4">Meeting 5 </div>
</div>
Now inside the loop i have access to a parameter of each object called request.isNewDate, this is set to yes as soon as the current loop has a different date than the previous loop, i think i can use this to achieve what i need but i am having a problem in the logic.
This is what my code looks like where I am looping, how can i break out of this loop if the request.isNewDate is yes and then start the rest inside a new div.
Any help will be appreciated.
<div class="row">
{% for request in pagination %}
<div class="col4">
<h5 class="">{{ request.getGuest.getFirstName }}</h5>
<h6 class="text-transform-none">{{ request.getGuest.getCollege }}<br>
{{ request.getGuest.getDegree }}<br>
({{ request.getGuest.getCourse }})
</h6>
</div>
</div>
Try this snipped code:
{% for request in pagination %}
{#
If is a new date, open a new div TAG and dump the data.
If the first element of the collection do not have this info
consider to use loop.index0 as OR operation.
#}
{% if request.isNewDate %}
<div class="row">
{# print and format the date #}
<h2 class="date-heading">{{ request.date }}</h2>
{% endif %}
{# Render data of an element, consider to wrap this data in a single twig and incude #}
<div class="col4">
<h5 class="">{{ request.getGuest.getFirstName }}</h5>
<h6 class="text-transform-none">{{ request.getGuest.getCollege }}<br>
{{ request.getGuest.getDegree }}<br>
({{ request.getGuest.getCourse }})
</h6>
</div>
{# remember to close the div #}
{% if request.isNewDate %}
</div>
{% endif %}
{% endfor %}
Hope this help
Perform the logic in the controller and pass the data to Twig separately.
You don't want that kind of logic buried in a template. It will become a maintenance headache in the future and doing that sort of thing leads to cluttered, difficult to read templates.
I want to call a component inside a component with a variable, like this:
Here's the code of the default.html->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<div class="container">
<div class="row">
{% partial __SELF__ ~ "::category" category=__SELF__.category childscategory=__SELF__.childscategory%}
<div class="col-xs-3">
<strong>DATA</strong>
<ul class="list-group text-center">
{% partial __SELF__ ~ "::dates" files=__SELF__.files %}
</ul>
</div>
<div class="col-xs-3">
<strong>Nome do Ficheiro</strong>
<ul class="list-group text-center">
{% partial __SELF__ ~ "::files" files=__SELF__.files %}
</ul>
</div>
<div class="col-xs-3">
<strong>Descrição</strong>
<ul class="list-group text-center">
{% partial __SELF__ ~ "::description" files=__SELF__.files %}
</ul>
</div>
<div class="col-xs-1">
<strong>{{__SELF__.labelpresentation}}</strong>
<ul class="list-group text-center">
{% partial __SELF__ ~ "::download_1" files=__SELF__.files %}
</ul>
</div>
-> I WANT TO CALL THE COMPONENT HERE <-
</div>
</div>
If you want me to post more code like the .php, it's ok
Example: use the fileUploader component in my ApplicationForm component. In ApplicationForm class, add this:
public function init()
{
$component = $this->addComponent(
'Responsiv\Uploader\Components\FileUploader',
'fileUploader',
[
'deferredBinding' => true,
'maxSize' => $this->property('maxFileSize'),
'fileTypes' => $this->property('fileTypes'),
'placeholderText' => $this->property('placeholderText'),
]
);
$component->bindModel('cv', new Application());
}
And in the view (default.htm) of the ApplicationForm component use the initialized component like so:
{% component 'fileUploader' %}
Is there are way I can create an easily maintainable for loop in Twig that works with Bootstrap's layout?
I'm using bootstrap's row functionality, meaning that each row has a div of class "row". This makes things tricky in twig, because I have no way of entering these header divs.
For example, my main page will have several articles, and extends the skeleton template, as shown below. Is there any way I can use this skeleton base and use it multiple times in a for loop?
I've tried by adding the Article block, but it overrides everything inside. Do I have to create another template for this to work?
<div id="main" class="container-fluid">
{% block article %}
<div class="row">
<div class="col-md-3"></div>
<div id="title" class="col-md-6">
{% block title %}
{% endblock title %}
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div id="left-nav" class="col-md-2">
{% block left_nav %}
{% endblock left_nav %}
</div>
<div class="col-md-6" id="content">
{% block content %}
{% endblock content %}
</div>
<div id="right-nav" class="col-md-2">
{% block right_nav %}
{% endblock right_nav %}
</div>
<div class="col-md-1"></div>
</div>
{% endblock article %}
</div>
How do I iterate and create multiple "Articles" in this context?
Using parent() isn't helpful because it'll just print the start and end tags, wheras I need them to be placed around the correct sections, otherwise the rows won't work.
In other words, in a for loop context, how can I change the values of variables inside child blocks within a parent block?
Apologies if this is unclear, I found it hard to put into words.
Edit:
I know the existence of for loops in twig, I am just unsure of how to implement a solution to this particular problem.
As a simple example of the skeleton template and its output:
Template
<div class="row">
<div class="title">
{% block title %}{% endblock %}
</div>
<div id="content">
{% block content %}{% endblock %}
</div>
</div>
Output
<div class="row">
<div class="title">
This is the first post.
</div>
<div id="content">
Post 1
</div>
</div>
<div class="row">
<div class="title">
This is the second post.
</div>
<div id="content">
Post 2
</div>
</div>
I found a solution that is fairly maintainable, as it still extends the skeleton template, but is flexible enough to support for loops inside a block.
Skeleton
<div id="main" class="container-fluid">
{% block article %}
<div class="row">
<div class="col-md-3"></div>
<div id="whitespace" class="col-md-6">
{% block title %}
{% endblock title %}
</div>
<div class="col-md-3"></div>
</div>
<div class="row">
<div class="col-md-1"></div>
<div id="left-nav" class="col-md-2">
{% block left_nav %}
{% endblock left_nav %}
</div>
<div class="col-md-6" id="content">
{% block content %}
{% endblock content %}
</div>
<div id="right-nav" class="col-md-2">
{% block right_nav %}
{% endblock right_nav %}
</div>
<div class="col-md-1"></div>
</div>
{% endblock article %}
</div>
Article list
{% extends 'skeleton.php' %}
{% block article %}
{% for post in posts %}
<div class="row">
{# Start title #}
<div class="col-md-3"></div>
<div id="title" class="col-md-6">
{{post.title}}
</div>
<div class="col-md-3"></div>
{# End title #}
</div>
<div class="row">
<div class="col-md-1"></div>
{# Start left-nav #}
<div id="left-nav" class="col-md-2">
{{post.left}}
</div>
{# end left-nav #}
{# Start content #}
<div class="col-md-6" id="content">
{{post.getBody}}
</div>
{# end content #}
{# start right-nav #}
<div id="right-nav" class="col-md-2">
{{post.right}}
</div>
{# end right-nav #}
<div class="col-md-1"></div>
</div>
{% endfor %}
{% endblock article %}
{% foreach article in articles %}
<div class="row">
<div class="title">
{{ article.title }}
</div>
<div id="content">
{{ article.content }}
</div>
</div>
{% endfor %}
Is the template assuming articles is an array containing arrays with keys title and content