Inside my well i have a list that splits to left and right. I want to place users in that list. I want to order them like: Firs one in the left list, second one in the right, third one in the left list, forth in the right... So every second user would be placed in the right list. Here is the html of the well:
<div class="well">
<h4>Users</h4>
<div class="row">
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User1
</li>
<li>User3
</li>
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
<li>User2
</li>
<li>User4
</li>
</ul>
</div>
</div>
</div>
Now i cant do it just with classic for loop, because if i do as the below code shows, it would load the whole second list many times:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
<li> {{ user }}
</li>
</ul>
</div>
{% if forloop.counter|divisibleby:2 %}
<div class="col-xs-6">
<ul class="list-unstyled">
<li>{{ user }}
</li>
</ul>
</div>
{% endfor %}
</div>
I would probably have to use forloop.counter|divisibleby:3 but i dont know how to load just users in the second unordered list , without the whole list being copied for every user. Maybe soulution would use javascript too?
I hope you understand my problem :D
Other thing you can do to avoid sending 2 additional arrays is to use divisibleby in this manner.
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if not forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in users %}
{% if forloop.counter|divisibleby:2 %}
<li>{{ user }}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
EDIT: I figured it out, after two days of trying it just came to me. If anybody is dealing with the same problem; I handled it in views:
def index(request):
users = User.objects.all()
odd_users = users[::2]
even_users = users[1::2]
return render(request, 'index.html', {'users': users, 'odd_users': odd_users, 'even_users': even_users})
And then i just loaded it in template:
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in odd_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
<div class="col-xs-6">
<ul class="list-unstyled">
{% for user in even_users %}
<li>{{ user }}
</li>
{% endfor %}
</ul>
</div>
Cheers!
Related
I have a page where User can select people to add in his team.
One side of the page is the list of the people to select.
When user click Add to the team, it goes to the right side where we have the list of the selected people.
I don't understand how I can get the data on the selected side from the view in django..
For example on the left:
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" style="float: right;">Add to the team</span>
</li>
{% endfor %}
and on the right:
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
</ul>
</div>
The click is handled by a little js click event like this:
var selected = document.querySelector('#selected-list ul');
var team = document.querySelector('#team-list ul');
function clickHandlerTeam(e){
if(e.target.classList.contains('move')){
if (e.target.textContent == 'Add to the team'){
console.log('changing add');
e.target.textContent ='Remove from the team';
selected.appendChild(e.target.parentNode);
} else {
console.log('changing remove');
e.target.textContent = 'Add to the team';
team.appendChild(e.target.parentNode);
}
console.log('****************');
}
return;
}
Thanks for your help
{{ selected_techs=[] }}
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" onclick="{{ selected_techs.append(tech) }}" style="float: right;">Add to the team</span>
</li>
{% endfor %}
</ul>
</p>
</div>
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
{% for tech in selected_techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
</li>
{% endfor %}
</ul>
</div>
I think this should solve your problem.
Just remember to add
Edit 1:
Try this
{% with selected_techs=[] %}
<div class="card-body" id="team-list">
<p class="card-text">Select today's teammates:</p>
<ul class="list-group list-group-flush">
{% for tech in techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
<span class="move" onclick="{% selected_techs.append(tech) %}" style="float: right;">Add to the team</span>
</li>
{% endfor %}
</ul>
</p>
</div>
<div class="card-body" id="selected-list">
<h3 class="title">You have selected the following teammates for today: </h3>
<ul class="list-group list-group-flush" style="list-style-type: none;">
{% for tech in selected_techs %}
<li class="list-group-item">
<span class="name" name="{{tech.id}}">{{tech.name}}</span>
</li>
{% endfor %}
</ul>
</div>
{% endwith %}
I found out my solution. I added a form tag for each of my elements in my template, and removed the ul, replaced it by a hidden input with a value of tech.id, and replaced the spans tags where the user used to click by buttons. Then handled it with the views.py by getting the ids.
In my django project, I am trying to build a menu for navigation on one single site. The navigation should be done by href="#about us" The menu has three sizes, one for big screens (PC), one for medium screens (Tablets), and one for small screens (Phones). The navigation works on PC size menu, but does not work on the other ones. To be clear, all of the menus redirects the user to something like mywebsite.com/info#about us, but just the PC menu actually scrolls the site. There, I fill the menus with some content from a database:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
And there is the template for the menus:
<div class="w3-sidebar w3-bar-block w3-collapse w3-card w3-animate-right w3-hide-small" style="width:300px;right:0;top:0;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()"><h3>Menu ×</h3></button>
<a class="w3-bar-item w3-large w3-hide-small w3-hide-medium"><h3>Menu</h3></a>
{% block big-menu %}
{% endblock %}
</div>
<div class="w3-bar-block w3-collapse w3-animate-right w3-hide-large w3-hide-medium w3-light-gray" style="display:none;" id="smallSidebar">
<a class="w3-bar-item w3-large"><h3>Menu</h3></a>
{% block small-menu %}
{% endblock %}
</div>
And there I assign ids to content I am linking to in the menu:
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
There are screenshots of working & not working menu:
The problem was caused by two elements (the big content and the small one) having the same id ({{faq.question}}). So, the fix is as following:
{% block big-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block small-menu %}
{% for faq in question_list %}
{{faq.question}}
{% endfor %}
{% endblock %}
{% block body %}
<h1>Vitosoft - FAQ</h1>
<div class="w3-hide-small w3-hide-medium"style="width: calc(100% - 300px);">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}big">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
<div class="w3-hide-large">
{% for faq in question_list %}
<div class="w3-card-4" id="{{faq.question}}">
<h3 class="w3-container w3-blue">{{faq.question}}</h3>
<div class="w3-container">
{{faq.answer}}
</div>
</div>
{% endfor %}
</div>
A jquery script will do it, try the following:
$("a").on('click', function(event) {
# Distinguish the a tags with others by adding a class, like $('a.anchor').click
if (this.hash !== "") {
event.preventDefault(); // prevent the default behavior of the link
var hash = this.hash;
$('html, body').animate({ # With just a smooth animation within 800 miliseconds, we scroll towards the target anchor
scrollTop: $(hash).offset().top // we scroll
}, 800, function(){
// window.location.hash = hash; // Optional here
// this will return the part of the URL that follows the # symbol, including the # symbol.
});
} // End if
});
So I have a nested CollectionType of File entities:
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder->add('file', FileType::class, array('label' => 'File', 'required' => false));
}
Now if I display the nested entities like so:
<h3>Files</h3>
<ul style="list-style-type:none;padding-left:0;" class="col-files">
{% for file in form.files %}
{{ form_row(file) }}
{% endfor %}
</ul>
With the prototype:
{% block _omics_experiment_files_entry_row %}
<li class="panel panel-body panel-default">
{{ form_row(form.file) }}
</li>
{% endblock %}
It generates HTML like so (after JS injection):
<li class="panel panel-body panel-default">
<div class="form-group">
<label class="control-label" for="omics_experiment_files_0_file">File</label>
<input type="file" id="omics_experiment_files_0_file" name="omics_experiment[files][0][file]">
</div>
<br>
<button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</button>
<br>
</li>
And when the delete button is pressed the <li> disappears and on save the file is correctly removed from the parent entity.
However, I don't want to display the form row, I'd rather just display the name of the file:
<h3>Files</h3>
<ul style="list-style-type:none;padding-left:0;" class="col-files">
{% for file in form.files %}
<li class="panel panel-body panel-default">
<p>{{ file.vars.value.name }}</p>
</li>
{% endfor %}
</ul>
Which generates HTML like:
<li class="panel panel-body panel-default">
<p>001ÔùÅÔùÅ.lrtemplate</p>
<br><br>
<button type="button" class="btn btn-danger btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span> Remove </button>
<br>
</li>
Which removes itself from the DOM fine, but doesn't actually delete the entity.
The button element in both cases simply removes the parent <li>.
Does anyone know what I need to do so I can have the behaviour of the first example, and the UI of the second?
I've already tried including {{form_row(file)}} inside a hidden/visibility:none div, and this caused the DOM to behave unexpectedly so I don't think that works.
Edit:
I've also tried adding a input:hidden field with the same id and name as the form input, and this didn't work.
So I found a slightly hacky solution, if anyone has anything cleaner I'd love to know:
<h3>Files</h3>
<ul style="list-style-type:none;padding-left:0;" class="col-files">
{% for file in form.files %}
<li class="panel panel-body panel-default">
<p>{{ file.vars.value.name }}</p>
{{ form_widget(file.file , { 'attr': {'style': 'display: none;'} }) }}
</li>
{% endfor %}
</ul>
While display: none doesn't work for the entire form_row, it does work for the individual form_widget and this is enough for Symfony to delete the file.
I'm trying to make a left side navigation bar where by-default categories are listed and while clicking on a category, the subcategories are shown under it (in sort expanding sub-menu). I'm working in Django and relevant portions of my code are below. When I include the JS code, none of the links on the page work and when I exclude it, all the subcategories for all categories are shown by-default. I need only categories to be shown by default and while clicking on any, the respective subcategories be shown. What I'm missing here?
JS CODE: at the bottom of the page, loaded after the footer:
{% block theme_script %}
<script src="{% static " pinax/js/theme.js " %}"></script>
<script>
$(function() {
$(".nav-collapse88").hide();
$(".nav-collapse89 a").click(function(e) {
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
</script>
{% endblock %}
My HTML:
My CATEGORYINDEX.HTML TEMPLATE:
{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}
{% catindexlist as catindexlisted %}
{% block body %}
<div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;">
<div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;">
<h2><center>Categories</center></h2>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}</li></div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum"><li style="padding-right:10px;">{{forum.name}}</li></div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
MY SITE_BASE.HTML:
<div class="col-md-2" style="border-right:solid;text-align:right;height:99%;padding:0 0 0 0px;" id="sidebar"> {% include "categoryindex.html" %} </div>
All who answer will win a magical Pony! Thanks,
Using the concept of parent siblings you can do that as:
Code Snippet
$(function() {
$(".category-name a").parent('li').parent('div').siblings('div').hide();
$(".category-name a").click(function(e) {
e.preventDefault();
$(".category-name a").parent('li').parent('div').siblings('div').slideUp();
if(!($(this).parent('li').parent('div').siblings('div').is(":visible"))){
$(this).parent('li').parent('div').siblings('div').slideToggle();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}01</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}01</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}02</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}02</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}03</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}03</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
In my template, I am iterating over a django variable using a for loop.
There is a Carousel within the td.
What I want to do is add an overlay over the td with class CAROUSEL and not to anything within the If condition. if animal.available exist. Maybe execute javascript and add class that would add an overlay over the td. Basically, There should be a difference between the carousels where animal.available and where it doesn't.
Basically, when inner html tag is populated by Django variable, I want the parent html to be overlayed.
template.html
<table>
<td class="carousel">
{% for animal in stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
<!-- Add overlay over td ->
{% endif %}
</div>
{% endfor %}
</td>
</table>
Overlay css
.overlay {
background-color: rgba(0,0,0,0.5);
}
How do I add overlay class to td with class carousel if django variable animal.available exist? There are many such td's in the table, generated dynamically, so adding ID to the elements is also not possible.
No javascript needed. Just close your carousel td, start a new one, put your content in the new td.
<table>
<td class="carousel">
{% for animal in animal.stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
</td><td> add your stuff here
{% endif %}
</div>
{% endfor %}
</td>
</table>
I solved it by adding a dummy hidden div with class exist if the django variable animal.available existed and then added an overlay on the parent TD with class carousel as below.
<table>
<td class="carousel">
{% for animal in stores %}
<div>
<ul>
<li>Name: {{ animal.name }} </li>
<li>Price: {{ animal.price }}</li>
</ul>
{% if animal.available %}
<div class="exist" style="display:none"></div>
{% endif %}
</div>
{% endfor %}
</td>
</table>
Jquery
$(document).ready(function(){
var x = $('.exist');
x.parents('.carousel').addClass('overlay');
});