I'm trying to create a const or a var for each array item using jQuery, below is my HTML
<div class="taxonomy-list">
<input type="hidden" id="filters-category">
<ul class="category-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="uncategorized" data-taxtype="category"
data-id="1">
Category </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
<input type="hidden" id="filters-post_tag">
<ul class="post_tag-list ">
<li><a href="javascript:;" class="filter-link portfolio-cat-item cat-list_item active" data-slug="" data-id=""
data-taxtype="">All </a></li>
<li>
<a href="javascript:;" class="filter-link cat-list_item" data-slug="tag-1" data-taxtype="post_tag"
data-id="3">
Tag 1 </a>
<span class="remove"><i class="fas fa-times"></i></span>
</li>
</ul>
</div>
and below is the js I'm trying to use
$('.taxonomy-list input').each(function(index, value) {
const tax_name = [jQuery('.taxonomy-list input')]
for (let i = 0; i < tax_name.length; i++) {
console.log(`tax-${index}: ${this.id}`);
}
});
What I'm willing to get is in below format
const tax_0 = jQuery('#filters-category').val().split(',');
const tax_1 = jQuery('#filters-post_tag').val().split(',');
there will be more tax-i coming up, so I need to create a new const for each of them
Related
I have HTML
<div class="swiper-container instance-0" data-id="nav-slider">
<ul class="swiper-wrapper nav-content__list">
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/stories">
<span class="link__text">
Stories
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/multimedia">
<span class="link__text">
Multimedia
</span>
</a>
</li>
<li class=" swiper-slide nav-content__item">
<a class=" link link--ms" href="/news-stories/press-releases">
<span class="link__text">
Press releases
</span>
</a>
</li>
</ul>
</div>
My js:
const $navSlider = $('[data-id="nav-slider"]');
const $swiperInstances = [];
const $currentPath = window.location.pathname;
$navSlider.each(function (index, sliderElement) {
const $this = $(this);
$this.addClass(`instance-${index}`);
$swiperInstances[index] = new Swiper(sliderElement, {
slidesPerView: 'auto',
watchOverflow: true,
initialSlide: '2',
});
});
But initialSlide don't work for me.
$swiperInstances[index].slideTo(2) don't work too
I need set the default item in the swiperslider
you need to use .slideTo() in afterInit() event.
documentation
I've implemented a search bar that loops into an UL (myUL) and display the results (h5). This works fine for static data but once I implement the PHP call to fetch MySQL, the search won't work and display the results anymore. On the console I see that it's not able to find the query results.
console log
Here's the piece of the code I've implemented the Search Input and ran the query:
<div class="page">
<div class="page-content">
<!-- Panel -->
<div class="panel">
<div class="panel-body">
<form class="page-search-form" role="search">
<div class="input-search input-search-dark">
<i class="input-search-icon md-search" aria-hidden="true"></i>
<input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">
<button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
</div>
</form>
<div class="nav-tabs-horizontal nav-tabs-animate" data-plugin="tabs">
<div class="dropdown page-user-sortlist">
Order By: <a class="dropdown-toggle inline-block" data-toggle="dropdown"
href="#" aria-expanded="false">Last Active</a>
<div class="dropdown-menu animation-scale-up animation-top-right animation-duration-250"
role="menu">
<a class="active dropdown-item" href="javascript:void(0)">Last Active</a>
<a class="dropdown-item" href="javascript:void(0)">Username</a>
<a class="dropdown-item" href="javascript:void(0)">Location</a>
<a class="dropdown-item" href="javascript:void(0)">Register Date</a>
</div>
</div>
<!-- KIEL ALL CONTACTS -->
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
</ul>
<div class="tab-content">
<div class="tab-pane animation-fade active" id="all_contacts" role="tabpanel">
<ul class="list-group" id="myUL">
<?php
$result = mysqli_query($conn,"SELECT * FROM customer");
while($row = mysqli_fetch_array($result))
{
?>
<li class="list-group-item">
<div class="media">
<div class="pr-0 pr-sm-20 align-self-center">
<div class="avatar avatar-online">
<img src="../../../global/portraits/1.jpg" alt="...">
<i class="avatar avatar-busy"></i>
</div>
</div>
<div class="media-body align-self-center">
<h5 class="mt-0 mb-5 name">
<?php echo $row["customerName"]; ?>
<small>Ultimo Acesso: <?php echo $row["customerLastLogin"]; ?></small>
</h5>
<p>
<i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
</p>
<div>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-email" aria-hidden="true" title="<?php echo $row["customerEmail"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="icon icon-color md-smartphone" aria-hidden="true" title="<?php echo $row["customerPhone"]; ?>"></i>
</a>
<a class="text-action" href="javascript:void(0)">
<i class="fas fa-box-open md-smartphone" aria-hidden="true" title="<?php echo $row["customerId"]; ?>"></i>
</a>
</div>
</div>
<div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
<button type="button" class="btn btn-icon btn-primary waves-effect waves-classic" data-toggle="modal" data-target="#updateUser<?php echo $row['customerId']?>">
<i class="fas fa-pencil-alt md-notifications" aria-hidden="true"></i>
</button>
<button type="button" class="btn btn-icon btn-danger waves-effect waves-classic">
<i class="fas fa-trash-alt md-notifications" aria-hidden="true"></i>
</button>
</div>
</div>
</li>
<script>
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
console.log(li);
// debugger;
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("h5")[0];
txtValue = a.textContent || a.innerText;
// debugger;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</ul>
<?php
}
// close connection database
mysqli_close($conn);
?>
Any idea?
Thanks.
I am trying to create an if conditional based on what city a user selects off the dropdown menu. It has presented itself a challenge because it's bulmas CSS dropdown which does not use <selector> and <option> but all <div>s.
// The Dropdown for Cities
const root = document.querySelector(".cities");
root.innerHTML = `
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' id="myCity" value="oak" class='dropdown-item'>
Oakland, CA
</a>
<a href='#' id="myCity" value="san" class='dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
`;
I tried value as you can see, but that will not work.
const myCity = document.getElementById("myCity");
myCity.addEventListener("mousedown", (event) => {
if (
<HTMLInputElement>(
document.getElementById("dropdown-menu").value.includes("san")
)
) {
console.log("this will show us San Francisco");
} else if (
<HTMLInputElement>document.getElementById("dropdown-menu").value === "oak"
) {
console.log("this will show us Oakland");
} else {
return null;
}
});
Change the dropdown <a> ids to class instead to prevent duplicate ids. Also use a data- attribute since <a> does not have value.
Then check the target of the event
const dropdown = document.querySelector('#dropdown-menu')
document.querySelector('.dropdown-trigger button').addEventListener('click', (e)=>{
dropdown.classList.toggle('active');
});
dropdown.addEventListener('click', (e)=>{
e.preventDefault()
if(e.target.matches('.dropdown-item.city')){
const cityName = e.target.dataset.value;
console.log('City =', cityName);
dropdown.classList.toggle('active');
}
})
#dropdown-menu { display:none}
#dropdown-menu.active{display:block}
<div class='dropdown'>
<div class="dropdown-trigger">
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
<span>Choose a City</span>
<span class="icon is-small">
<i class="fas fa-angle-down" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="dropdown-menu" id="dropdown-menu" role="menu">
<div class='dropdown-content'>
<a href='#' data-value="oak" class='city dropdown-item'>
Oakland, CA
</a>
<a href='#' data-value="san" class='city dropdown-item'>
San Francisco, CA
</a>
</div>
</div>
</div>
i am making a website and i need to filter product by type, i have a mongodb collection with id, name, price and type and the idea is to show all product and when the user clicks on rigth menu show the especified type in the same page, changing the content
this is for show all products
<% for(var i =0; i < listaProducto.length; i++) { %>
<div class="col-sm-12 col-md-6 col-lg-4 p-b-50">
<!-- Block2 -->
<div class="block2">
<div class="block2-img wrap-pic-w of-hidden pos-relative block2-labelnew">
<img src= " <%= listaProducto[i].ruta %> ">
<div class="block2-overlay trans-0-4">
<a href="#" class="block2-btn-addwishlist hov-pointer trans-0-4">
<i class="icon-wishlist icon_heart_alt" aria-hidden="true"></i>
<i class="icon-wishlist icon_heart dis-none" aria-hidden="true"></i>
</a>
<div class="block2-btn-addcart w-size1 trans-0-4">
<!-- Button -->
<button class="flex-c-m size1 bg4 bo-rad-23 hov1 s-text1 trans-0-4">
Add to Cart
</button>
</div>
</div>
</div>
<div class="block2-txt p-t-20">
<a href="product-detail.html" class="block2-name dis-block s-text3 p-b-5" id="nombreProducto">
<%= listaProducto[i].nombre %>
</a>
<span class="block2-price m-text6 p-r-5">
<%= listaProducto[i].precio %>
</span>
</div>
</div>
</div>
<% } %>
the right menu
<ul class="p-b-54">
<li class="p-t-4">
<a href="product" class="s-text13 active1">
Ver Todo
</a>
</li>
<li class="p-t-4">
<a href="product?<tipo=impresora>" class="s-text13 active1">
Impresoras
</a>
</li>
<li class="p-t-4">
<a href="producto-etiquetadoras.html" class="s-text13 active1">
Etiquetadoras
</a>
</li>
<li class="p-t-4">
<a href="producto-etiquetas-autoadhesivas.html" class="s-text13 active1">
Etiquetas Autoadhesivas
</a>
</li>
<li class="p-t-4">
<a href="producto-marquillas.html" class="s-text13 active1">
Marquillas
</a>
</li>
</ul>
here is the get page
router.get('/product', async (req, res, next) => {
const listaProducto = await prodcutos.find();
res.render('product',{
listaProducto
});
});
and the schema
const mongoose = require('mongoose');
const bcrypt = require('bcrypt-nodejs');
const { Schema } = mongoose;
const productSchema = new Schema({
id: String,
nombre: String,
tipo: String,
precio: String,
ruta: String
});
var producto = module.exports = mongoose.model('products', productSchema);
i want to when the user click in a list item in the rigth menu show the products of that type in the same page changing the content (could be with the for )
i solved it, was only make another get in the routes and change the href like this (also i add a pagination and its the reason to use :page)
router.get('/product/type/:tipo/:page', async (req, res, next) => {
const tipo = req.params.tipo;
let perPage = 6;
let page = req.params.page || 1;
productos.find({ "tipo": tipo })
.skip((perPage*page)-perPage)
.limit(perPage)
.exec((err, listaProducto) =>{
productos.find({ "tipo": tipo }).count((err, count) =>{
if(err) return next(err);
res.render('product',{
listaProducto,
current : page,
pages : Math.ceil(count / perPage),
total: count,
typeIn: tipo
});
})
})
});
and the rigth menu
<ul class="p-b-54">
<li class="p-t-4">
<a href="/product/1" class="s-text13 active1">
Ver Todo
</a>
</li>
<li class="p-t-4">
<a href="/product/type/impresora/1" class="s-text13 active1">
Impresoras
</a>
</li>
<li class="p-t-4">
<a href="/product/type/etiquetadora/1" class="s-text13 active1">
Etiquetadoras
</a>
</li>
<li class="p-t-4">
<a href="/product/type/etiqueta/1" class="s-text13 active1">
Etiquetas Autoadhesivas
</a>
</li>
<li class="p-t-4">
<a href="/product/type/marquilla/1" class="s-text13 active1">
Marquillas
</a>
</li>
</ul>
the dom as the following:
<li class="category51">
<a class="drop" href="#">Data</a>
<div class="dropdown_2column align_left ">
<div class="col_1">
<ul>
<li class="level1">
<a href="#">
<span class="level1">Solutions1</span>
</a>
</li>
<li class="level1">
<a href="#">
<span class="level1">Solutions</span>
</a>
</li>
</ul>
</div>
</div>
</li>
i want to get Solutions1 and Solutions a lable. how should i do?i using:
var link = document.getElementsByClassName("category51").document.getElementsByTagName(ul).document.getElementsByTagName(li).document.getElementsByTagName(a).
what i want to achieve:
i want to disable the link by javascript.so i must bind an event to the a lable, now, i don't know how to locate it.
You could use Document.querySelecorAll.
var eles = document.querySelectorAll('li.level1 a'),
i;
for (i = 0; i < eles.length, i++) {
eles[i].onclick = function() {
//...
};
}