data= [{id:1, text:'abc'},{id:2, text:'cde'}]
In my template I want to do this:
<ul>
{{% for article in data %}}
<li><a href={{article.id}}>{{article.id}}</a></li>
</ul>
In click on li I would display only the property "text" of related id.
<div>{{selected article.text}}</div>
If clicked 1 I want to see "abc".
Is there a way to do it with twig?
If I understand correctly, you cant to show dynamically the text related to an id on click on the li containing the related id.
This cannot be achieved with only twig. You need some javascript here. Basically what you can do is the following:
<ul>
{% for article in data %}
<li>
<a href="#" data-content="{{ article.text|e('html_attr') }}" onclick="document.getElementById('dynamic-content').innerHTML = this.dataset.content; return false">
{{ article.id }}
</a>
</li>
{% endfor %}
</ul>
<div id="dynamic-content"></div>
|e('html') is some escaping for keeping it inside an html attribute, learn more here
onclick="" this contains pure javascript, it work like this but I recommand to do it another way (checkout this JSFiddle)
Related
objective : products database + twig component rendered in a loop.
I have this setup:
A .twig product component with my component markup:
<article class="productCard "><h3 class="productCard__name">{{ product.name }}</h3></article>
A loop in my page which I want to display all the instances of the product but with the twig component template:
{% for product in products %}
<div class="col">
{{ include('components/productCard.html.twig'),{'product.name': product.name}) }}
</div>
{% if loop.index % 4 == 0 %}
</div><div class="row" >
{% endif %}
A Database with the actual list of product.
I'm not sure of the correct syntax of the loop call to achieve what I want (passing the parameters of the database to the loop to the component).
The proper syntax would be:
{% include 'components/productCard.html.twig' %}
No need for using with or passing variables. Then your other snippet should work as-is:
<article class="productCard">
<h3 class="productCard__name">{{ product.name }}</h3>
</article>
im calling v-for event on div tag to create <a> tag by every object on results array
Code attempt:
results array:
html (Laravel blade):
#verbatim
<div class="category-item" v-for="result in results" :value="result.id">
<a class="button-product-info-s" href="/product/{{ result.id }}"/>{{ result.name }}</a>
</div>
#endverbatim
brower output:
as you can see {{ result.name }}} is just working and {{ result.id }} is not outputing anything
i tried using .{{ result.id }}. but didn't work
Have you tried changing your href attribute to :href="'/product/'.result.id"?
Or with the + operator instead of .
Change your code to something like:
#verbatim
<div class="category-item" v-for="result in results" :value="result.id">
<a class="button-product-info-s" href="/product/#{{ result.id }}"/>#{{ result.name }}</a>
</div>
#endverbatim
I have the following code in my default.html.twig file to display all the titles of the blog pages with the tag : dog:
<ul>
{% for post in taxonomy.findTaxonomy({'tag':'dog'}) %}
<li>{{ post.title }}<span>(0)</span></li>
{% endfor %}
</ul>
What i would really like to do is find all the tags and not just the dog tag, so i did the following:
<ul>
{% for post in taxonomy.findTaxonomy({'tag':'all'}) %}
<li>{{ post.title }}<span>(0)</span></li>
{% endfor %}
</ul>
I changed the dog to all , but this does't really give me any results. I checked the documentation here for findTaxonomy , but it does't help much , also in the <span></span> inside the <li> , I would like to show how many articles for this perticular tag have been posted , eg. if there are five articles for the tag popcorn the html spitedd out should be:
<li>popcorn <span>(5)</span></li>. How do i achieve this ?
What about not using findTaxonomy and just iterate on all elements like this:
{% for post in yourCollection %}
<li>{{ post.title }}<span>(0)</span></li>
{% endfor %}
Eventually using an "if" statement on post.tag in case you want to check something (defined value, not '', etc).
I'm using Symfony2.3.4 and jQuery, or at least trying to.
The thing is I have a form with two choice widgets(in each multiple=true and expanded=false) and two buttons. This form was generated with Doctrine's crud, so I'm currently getting familiar to the code it generated. After a while searching the web, a long while since I'm new to a lot about web programming, I managed to get a function to remove the selected options from one choice widget and append them to the other using the id of each widget:
//../custom_js.js
function move_option_among_choices(id_from, id_to) {
$('#' + id_to).append($('#' + id_from + ' option:selected'));
}
Here comes the problem:
I click an option from the first widget(id_from).
I press the button that executes the func above.
I see that the selected option is removed from the first widget and appears now in the second.
I submit the form...
only I can't do what I want to do with the moved options because they are not there.
when I try to access the second widget's options:
var_dump($form->get('selected_prof')->getConfig()->getOptions()['choices']);
I get an empty array although every time a press the button that executes the js func it moves the option from the first widget to the second.
It's like the function only moves the text, the actual component/option(idk how to call it) is internally still in the first widget.
Is there a way to fix this?
It doesn't matter if it's either a different way to access the options in the second widget or a different way of appending them to it.
Thanks.
{% extends 'AdminBundle:Default:administracion.html.twig' %}
{% block contenido -%}
<h1>Nuevo Comité Académico</h1>
{% if error %}
<div class="alert alert-error my_error">
<button type="button" class="close" data-dismiss="alert">×</button>
{{ error }}
</div>
{% endif %}
<div class="row-fluid">
<form class="form-horizontal sf_admin_form_area"
action="{{ path('comiteacad_create') }}"
method="post" {{ form_enctype(form) }}>
{{ form_widget(form) }}
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<i class="icon-ok"></i> {{'Guardar' | trans}}</button>
<a class="btn" href="{{ path('comiteacad') }}">
<i class="icon-ban-circle"></i> {{'Cancelar' | trans }}</a>
</div>
</form>
</div>
{% endblock %}
I was trying to get a navigation to work in symfony using twig. It didn't work as I expected. I want a service or another controller to provide the navigation.items, so I don't have to include it in every response object. So that if I'd render like this:
...
return $this->render('AcmeDemoBundle:Default:index.html.twig', array('title' => $slug));
}
I would be able to include this:
{# app/src/Acme/Bundle/AcmeDemoBundle/Resources/views/Navigation/navigation.html.twig #}
<nav>
<ul>
{% for item in navigation.items %}
<li>
{{ item.title }}
</li>
{% else %}
<li>The menu is empty.</li>
{% endfor %}
</ul>
</nav>
Try to implement KnpMenuBundle: https://github.com/KnpLabs/KnpMenuBundle
This bundle does everything you ask.
The docs describe a simple implementation: https://github.com/KnpLabs/KnpMenuBundle/blob/master/Resources/doc/index.md