Develop Reference

Angular ngbDropdown: keyboard navigation not working

I have modal made of a search bar and a list of elements, created with a ngbDropdown splitted into 2 components, parent and child. It works correctly, but I can't figure out a way to enable navigation with keyboard (use UP & DOWN keys to move between list's elements).
Following the official documentation, I tried to use ngbDropdownItem, but it's not working.
These are my 2 component's templates:
PARENT:
<div ngbDropdown class="dropdown-no-arrow" (openChange)="openChange($event)" container="body">
<!-- trigger -->
<ng-container>
<button class="btn" ngbDropdownToggle *ngIf="authorizationService.loggedInUser">
<i class="fal fa-farm me-2"></i>
<span>{{ authorizationService.loggedInUser.name }}</span>
<i class="fal fa-chevron-down ms-2"></i>
</button>
</ng-container>
<!-- menu -->
<div ngbDropdownMenu aria-labelledby="currentMenuItem" id="currentDropdown_{{ id }}">
<button ngbDropdownItem (click)="openNewModal()">
<i class="fal fa-plus me-1"></i> <span i18n>New</span>
</button>
<dm-child-list [isListDisplayed]="isDropdownOpened"></dm-child-list>
</div>
</div>
CHILD:
<div class="dropdown-header d-flex margin-x align-items-center">
<h6 class=" mb-0 flex-grow-1" i18n>MY LIST</h6>
</div>
<div class="px-4 py-2">
<div class="form-group mb-0">
<input class="form-control form-control-sm" libAutofocus [(ngModel)]="elSearch" (ngModelChange)="elSearch$.next($event)" i18n-placeholder placeholder="Search elements">
</div>
</div>
<button *ngFor="let el of list; let i = index;" ngbDropdownItem [ngClass]="{'top-border': i === 0}">
<i class="me-2 fas fa-check-circle text-success"
*ngIf="selectedEl?.id === el.id" title="Current element"></i>
<i class="me-2 fal fa-circle" *ngIf="selectedEl?.id !== el.id"></i>
<span>{{ el.name }}</span>
</button>
Can anyone help with making keyboard selection work?
Thanks!

By adding
#myDrop="ngbDropdown" (keyup)="myDrop.onKeyDown($event)"
on div where ngbDropdown directive is used, Arrow key navigation works.
In your case,
<div ngbDropdown
#myDrop="ngbDropdown"
(keyup)="myDrop.onKeyDown($event)"
class="dropdown-no-arrow
(openChange)="openChange($event)"
container="body">

How can i generate every 3 days of the month?

Can someone help me in date.js or javascript, I want to generate every 3 days of the month but the weekends is not included. from there, I want to pass the generated dates in my view in form of list groups. Here are my codes so far. Thank you.
JS:
$( document ).ready(function() {
var firstDay = Date.parse("t + 1d");
var secondDay = Date.parse("t + 2d");
var thirdDay = Date.parse("t + 3d");
console.log(firstDay);
console.log(secondDay);
console.log(thirdDay);
});
In my view:
#extends('layouts.app')
#section('content')
<div class="container mt-5">
<div class="row align-items-center">
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-calendar-check-o" aria-hidden="true"></i> <b>PICK DATE</b></h4>
</div>
<div class="card-body">
<b><h5><div class="card-header" id="decors_month"></div></h5></b>
<ul class="list-group list-group-horizontal mt-3">
<li class="list-group-item list-group-item-success text-wrap text-center">01-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">02-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<li class="list-group-item list-group-item-success text-wrap text-center">03-March-2022 <br> <small> <b>Tuesday</b> </small></li>
<ul class="float-end"><button type="button" class="btn btn-success "><i class="fa fa-hand-o-left" aria-hidden="true"></i> Pick</button></ul>
</ul>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-header">
<h4><i class="fa fa-graduation-cap" aria-hidden="true"></i> <b>MODULE DATES</b></h4>
</div>
<div class="card-body">
</div>
</div>
</div>
</div>
</div>
#endsection
I am using Laravel 6. Thank you.

how do i display more than 1 item with javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
hello everyone i have made a dropdwon list that displays something on screen when i press a item in it but i need it to display more than 1 thing at a time but i dont know how to do that
<?php
session_start();
if (!isset($_SESSION["userId"])) {
header('Location: ../../auth/login');
die();
}
<div class="d-flex justify-content-center row">
<div class="col-md-10 col-lg-10">
<div class="border">
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row justify-content-between align-items-center mcq">
</div>
</div>
<div class="question bg-white p-3 border-bottom">
<div class="d-flex flex-row align-items-center question-title">
<h3 class="text-danger"></h3>
<h5 id="complaintHeader" class="mt-1 ml-2">welke lichaamelijke klachten heeft u</h5>
</div>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">klachten</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item Maag" href="#" onClick="changeHeader('Maag')">MAAG</a>
<a class="dropdown-item Darmen" href="#" onClick="changeHeader('Darmen')">DARMEN</a>
<a class="dropdown-item Hyperventilatie" href="#" onClick="changeHeader('Hyperventilatie')">HYPERVENTILATIE</a>
<a class="dropdown-item Hartritme-Klachten" href="#" onClick="changeHeader('Hartritme-Klachten')">HARTRITME-KLACHTEN</a>
<a class="dropdown-item Misselijkheid" href="#" onClick="changeHeader('MIsselijkheid')">MISSELIJKHEID</a>
<a class="dropdown-item Keelklachten" href="#" onClick="changeHeader('Keelklachten')">KEELKLACHTEN</a>
</div>
</div>
</div>
<div class="d-flex flex-row justify-content-between align-items-center p-3 bg-white">
<button class="btn btn-primary d-flex align-items-center btn-danger" type="button">
<i class="fa fa-angle-left mt-1 mr-1"></i>
previous
</button>
<button type="button" class="btn btn-primary">bij klachten</button>
<button class="btn btn-primary border-success align-items-center btn-success" type="button">Next
<i class="fa fa-angle-right ml-2"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<?php
require '../include/footer.php'; //include footer
require '../auth/logout-modal.php'; //include logout modal
?>
<script>
function changeHeader(s){
document.getElementById("complaintHeader")
.innerHTML = "welke lichaamelijke klachten heeft u: " + s;
}
so as you can see in my code i made a dropdown button with a script that when i press something in the dropdown it displays it on screen but i want it to display multiple things

If you want to pass multiple things to changeHeader() function you can pass them as an array and in your function append them to your complainHeader with a map() method or a for loop.
<a class="dropdown-item Maag" href="#" onClick="changeHeader(['Maag','DARMEN','MISSELIJKHEID'])">MAAG</a>
function changeHeader(s){
const yourArray = s;
const Header = document.getElementById("complaintHeader");
yourArray.map(item => {
Header.innerHTML += item;
})
}
you can use for loop instead of map() method.

(Vanila JS DOM) Why delete button isn't applied for all 'delete' classes..?

I am trying my first vanilla JS CRUD DOM manipulation project.
I have completed the add item function however delete function isn't working properly.
There are multiple delete buttons on HTML code, and I want it to be deleted when the button clicked. However, it is only working for the first item from the list. If I click the second or third delete button, it is just not working at all.
document.querySelector('li').addEventListener('click', deleteOrTick);
//deleteTick
function deleteOrTick(e) {
console.log("check click")
if (e.target.className == 'delete') {
console.log("delete clicked")
}
deleteTask(e);
// delete task
function deleteTask(e) {
let remove = e.target.parentNode;
let parentNode = remove.parentNode;
parentNode.removeChild(remove);
}
}
deleteOrTick();
<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
</ul>

document.querySelector returns the first of the selected elements.
Also do not have one function inside the other
Lastly why call the delete when you load?
I think you meant to delegate
document.getElementById('card').addEventListener('click', function(e) {
const tgt = e.target;
const parent = tgt.closest('li');
if (tgt.classList.contains('delete')) parent.remove();
else if (tgt.classList.contains('update')) console.log("Update clicked for ",parent.querySelector(".card-title").textContent)
})
<ul class="card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
<li class="card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="btn btn-outline-info update">update</button>
<button type="button" class="btn btn-outline-danger delete">delete</button>
</li>
</ul>

Because querySelector() returns only the first match:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
window.getElementsByTagName() could be more appropriate for your case

I always recommend doing it like this.
Add some semantic to your HTML code. In this case add the classNames translation-card-list, translation-card, etc
Make use of event bubbling by delegating the event listening to the document element and working with the target property of the event argument. This way you have only one Listener improving performance and by delegating you can add buttons at run time without adding new EventListeners in a complicated manner
Use the closest method of the Event's target to use the semantic I added in section 1
;(function(d) {
const classNameCard = 'translations-card';
const classNameUpdateButton = 'translations-card-update-button';
const classNameDeleteButton = 'translations-card-delete-button';
const onClick = function(e) {
const target = e.target
if (!target.closest(`.${classNameCard}`)) {
return false
}
if (target.closest(`.${classNameUpdateButton}`)) {
updateAction(e);
} else if (target.closest(`.${classNameDeleteButton}`)) {
deleteAction(e);
}
}
const updateAction = function(e) {
console.log('update')
}
const deleteAction = function(e) {
const card = e.target.closest(`.${classNameCard}`);
const cardList = card.parentNode;
cardList.removeChild(card);
}
d.addEventListener('click', onClick)
}(document));
<ul class="translations-card-list card-list row m-2 d-flex flex-row justify-content-center" id="card">
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">おはよう</h2>
<p class="card-text">Good morning</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
<li class="translations-card card border-success m-3" style="width: 18rem;">
<div class="card-body">
<h2 class="card-title">にほんご</h2>
<p class="card-text">Japanese</p>
</div>
<button type="button" class="translations-card-update-button btn btn-outline-info">update</button>
<button type="button" class="translations-card-delete-button btn btn-outline-danger delete">delete</button>
</li>
</ul>

Jquery closest find issue - this.closest(...).find is not a function

Why my (this).closest('.row').find('.col-lg-10').remove(); doesn't work and sending me errors in log?
<div class="row section-first">
<div class="col-lg-2 text-center text-grayer my-auto p-2">
<p class="h6">Newbie</p>
<p class="h5">
<i class="fa fa-diamond m-1" aria-hidden="true"></i>
<i class="fa fa-diamond m-1" aria-hidden="true"></i>
</p>
<img class="mb-1 border-gray" src="http://localhost/forum/public/storage/avatars/1598320e3908c6.jpg" style="width: 112px; height: 112px;"/>
<p class="small m-0">Cirapuszka</p>
<!-----------------------------------------------------------------------------Reputacja----------->
<p class="m-0"><span class="badge bg-success"><i class="fa fa-plus-square" aria-hidden="true"></i> 0</span></p>
<p class="m-0"><span class="badge bg-inverse"><i class="fa fa-minus-square" aria-hidden="true"></i> 0</span></p>
<p class="text-muted">3 postów</p>
<!------------------------------------------------------------------------Button do edycji posta--->
<button class="btn btn-info btn-sm pointer post-edit">Edytuj Post</button>
</div>
<div class="col-lg-10 text-gray p-2">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div class="offset-lg-2 small col-lg-9">
</div>
This is my HTML
And I have here this button
<button class="btn btn-info btn-sm pointer post-edit">
Edytuj Post
</button>
It it scripted in jquery like this:
$(document).on('click', 'button.post-edit', function(e){
e.preventDefault();
(this).closest('.row').find('.col-lg-10').remove();
});
Uncaught TypeError: this.closest(...).find is not a function
at HTMLButtonElement.<anonymous> (voluptas-eum-voluptatem-soluta-numquam-ipsum-totam-est:293)
at HTMLDocument.dispatch (jquery.js:3)
at HTMLDocument.q.handle (jquery.js:3)
It works when it is like (this).closest('.row').remove(); It deletes whole row, but it's not what I intend to do.
col-lg-10 containing content in this post have to be deleted.
So I try using (this).closest('.row').find('.col-lg-10').remove(); but as I said this doesn't work and I don't know why, because we go first to .row by traversing UP in DOM by closest and then down by find to col-lg-10
What is wrong here?

As noted in the question comments, you're missing the jQuery identifier.
Change this:
(this).closest('.row').find('.col-lg-10').remove();
To this:
$(this).closest('.row').find('.col-lg-10').remove();