Develop Reference

Javascript search bar displaying holes in place of not displayed cards

so I'm building this online learning website, and I have a catalog of all courses where you can search for courses which titles or description contain the input in the search bar. I used bootstrap cards to make the catalog. It's working well, but on desktop I get empty spaces in place of the cards which are hidden, and the results show with big empty spaces between them is there were courses in between etc. No issue on mobile, all results show up vertically one after another. Is there a way to go around that? thanks!
Picture to see the "empty spaces"
JS code:
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.card').hide();
$('.card').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards:
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

You're hiding the card but keeping the col-md-4 div. You can merge the col-md-4 and card divs.

Just hide the col-md-4 div by introducing a "wrapper" class (or whatever you want to call it)
JS Code
$('#live_search').on('keyup', function() {
let input = $(this).val();
$('.wrapper').hide();
$('.wrapper').filter(function() {
return new RegExp(input, 'i').test($(this).text())
}).show();
});
Cards
<div class="search">
<form>
<label for="live_search">Rechercher une formation :</label>
<input type="text" id="live_search" size="30" class="form-control" placeholder="Rechercher une formation" />
</form>
</div>
<br>
<div class="container px-5 mb-3">
<div class="row">
{% for formation in formations %}
<div class="col-md-4 wrapper">
<div class="card">
<img class="card-img-top" src="{{ vich_uploader_asset(formation, 'imageFile') }}" alt="{{ formation.imageName }}">
<div class="card-body">
<h5 class="card-title">{{ formation.title }}</h5>
<p class="card-text">{{ formation.description }}</p>
<a class="small btn btn-success custom-btn rounded-pill px-3" href="{{path('app_formations_see', {'id' : formation.id })}}" role="button">voir</a>
<span class="small">par {{ formation.user.firstname }} {{ formation.user.lastname }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>

Javascript & Django: Event listener for form submit (Multiple forms using for loop) for AJAX

I tried posting before but I was not able to get a clear answer so I thought I would reframe it simply.
My template currently uses a for loop to print the posts of a "blog" and another for loop inside that to print comments belonging to the post.
Before I continue, just want to make it clear that my models and database is functioning. I even currently have a working comment section, it just keeps refreshing the page and so I would like to incorporate JS and AJAX instead.
Because I have multiple posts with their own comment sections, I tried creating individual id's for each form in the loop by saying . However, I am slightly confused as to how I am supposed to create an EventListener to make sure that no matter which of these forms are pressed, it takes the correct data and sends it to the backend.
Any help would be appreciated. Thank you! Code upon request is available. However, I would like to stress that it is unnecessary to ask for my model code as it works just fine.
{% for post in posts %}
<div class="mt-3 px-5 pt-4 pb-2 bg-white shadow-sm" style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem;">
<div class="row">
<div class="col-xs-1 pl-4">
<img class="rounded-circle post-image" src="{{ post.author.profile.image.url }}" />
</div>
<div class="col-xs-4 pt-1">
<a class="mr-2 post-author-name" href="#">{{ post.author.first_name }} {{ post.author.last_name }}</a>
<small class="text-muted post-time"><br>{{ post.date_posted|date:"F d, Y" }}</small>
</div>
<div class="col-xs-7 ml-3 pt-2">
Click for more options
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="post-content">{{ post.content }}</p>
</div>
</div>
</div>
<div class="mb-3 pr-5 pt-4 pb-2 bg-light shadow-sm border-light" style="border-bottom-left-radius: 0.5rem; border-bottom-right-radius: 0.5rem;">
<div class="col-sm-12 pl-5 pb-5">
<form class="form-inline" method="POST" style="display:flex" id="{{forloop.counter}}"> {% csrf_token %}
<input type="search" name="comment" placeholder="New comment" class="form-control mr-sm-2 p-4" style="flex-grow:1;">
<button name="post_id" class="btn btn-info my-2 my-sm-0 " value="{{post.id}}" onclick='update_comments("{{forloop.counter}}")'> Post </button>
</form>
</div>
{% for comment in post.comments.all %}
<div class="row">
<div class="col-xs-1 offset-1 pl-4">
<img class="rounded-circle comment-image" src="{{ comment.author.profile.image.url }}" />
</div>
<div class="col-xs-4">
<a class="mr-2 comment-author-name" href="#">{{ comment.author.first_name }} {{ comment.author.last_name }}</a>
<small class="text-muted comment-time"><br>{{ comment.date_posted|date:"F d, Y" }}</small>
</div>
</div>
<div class="row">
<div class="col-sm-12 offset-1">
<p class="comment-content">{{ comment.content }}</p>
</div>
</div>
{% empty %}
<div class="px-5">
<p>No comments for this post.</p>
</div>
{% endfor %}
</div>
{% endfor %}

How to change timer for every single post in django

For every item in items I want to have a timer. I made a timer using javascript and I can show the timer for every single item. But when I want to show all the items in home page the timer is shown just for the last item. Is there any way to show the timer for all the items?
<div class="row m0 p0 justify-content-center">
{% for item in items %}
<div class="col-12 col-xs-6 col-md-4 card-item p0">
<div class="img-container">
<img class="rounded img-fluid img-thumbnail" src="{{MEDIA_URL}}{{ item.image }}" />
<div class="sold-img-item"></div>
{% if item.sold == 1 %}
<div class="sold">Sold
<div class="sold-price"><span>{{item.highest_bid_offer}} €</span></div>
</div>
{% endif%}
</div>
<h5 class="no-flow capital "><b>{{item.title}}</b></h5>
<div class="no-flow"><strong>Seller :</strong> {{item.seller}}</div>
<div class="no-flow">
<strong>Initial Price :</strong> <span>{{item.price}} €</span>
</div>
<input type="hidden" id="auction_status" name="auction_status" value="{{ item.auction_status }}"/>
<input type="hidden" id="end-time-fix" name="end-time-fix" value="{{item.auction_end_time}}"/>
<div class="timer-small" id="timer-small">
<div class="timer-small" id="days-small"></div>
<div class="timer-small" id="hours-small"></div>
<div class="timer-small" id="minutes-small"></div>
<div class="timer-small" id="seconds-small"></div>
</div>
<a class="divLinkkk" href="{% url 'item_detail' item.id %}"></a>
</div>
{% endfor %}
</div>

Elorbratiing what #Mithlesh has pointed out
You need to change your time code like this
<div class="timer-small">
<div class="timer-small days-small"></div>
<div class="timer-small hours-small"></div>
<div class="timer-small minutes-small"></div>
<div class="timer-small seconds-small"></div>
</div>
Then fix your javascript to work with class instead of id.

How can I mark button as active based on the page I am at?

when a user clicks a tab I want that tab to show as active in blue. I can do it using if statements like the one I show on the code, but I would be repeating the code a LOT, so there has to be another way, could someone let me a hand please?
The current if statement shows the profile page which is active
<!-- This is saying: inherit everything from __base.html -->
{% extends "storePage/partials/__base.html" %}
<!-- Main base template which contains header and footer too -->
{% load crispy_forms_tags %}
<!-- To beautify the form at signup -->
{% block body %}
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>
</div>
{% endblock %}
Here is a screenshot:
[]
How can I do it so when I go to Account it shows blue?
Thanks guys

Try to match your request URL name with your current URL, you can add active class like this or directly to the tag.
<ul>
<li class="{% if 'profile' in request.resolver_match.url_name %} active {% endif %}">
Profile
</li>
</ul>
This should solve your question:
<div class="container bootstrap snippet">
<div class="row">
<div class="col-md-3">
<div class="list-group ">
<label class="card-header">Personal Settings</label>
{% if request.get_full_path == "/settings/profile/" %}
<span class="fa fa-user"></span> Profile
{% endif %}
<span class="fa fa-cog"></span> Account
<i class="fas fa-envelope"></i> Emails
<span class="fa fa-credit-card"></span> Billing
</div>
</div>
<!-- Center-right navBar-->
<div class="col-md-9">
{% block settingsPageInfo %} {% endblock %} <!-- Here goes the user information on the profile page -->
</div>
</div>

create a common component like this
<angular-anchor-tag [url]="link1"></angular-anchor-tag>
angular-anchor-tag.html
<div>
<a href="url" class="link" (click)="highlightFunction($event)">
<div>
angular-anchor-tag.ts
#Input url;
highlightFunction(event){
//remove all the highlight classes from links
.$("link").removeClass("highlight");
add highlight class to the events target
event.target.addClass('highlight');
}

How to concatenate if template django with variable js

I would like to know if it is possible to concatenate Django template, I made many attempts but none succeeded as shown below:
<script>
function seeDetail(researcher_id) {
let convert_int_researcher_id = parseInt(researcher_id)
$('#detailRearcher').empty();
let element= `
<br>
<h2> Detalhes do pesquisador selecionado </h2>
<div class="panel panel-default" id="panel">
<div class="panel-body">
<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Artigos</h2>
{%for show_list_article in show_list_articles %}
{% for article in show_list_article%}
{% if article.researcher_id `+ researcher_id+`%}
{{article.researcher}}
<div class="row">
{{article.title}}
</div>
{% endif %}
{% endfor %}
{% endfor %}
</div>
<div class="col-lg-6 col-md-6 col-xs-6">
<h2>Projetos</h2>
{%for show_list_projeto in show_list_projetos %}
{% for project in show_list_projeto%}
<div class="row">
{{project.title}}
</div>
{% endfor %}
{% endfor %}
</div>
</div>
</div>
`;
$('#detailRearcher').append(element)
}
but when I do this, the following error happens:
django.template.exceptions.TemplateSyntaxError: Could not parse the remainder: '`+' from '`+'
If anyone can help me and explain why, I will be totally grateful.
Yes I saw it in the console.log and this is actually a string type value and I tried to convert it, but the same error occurs.