This should be a straightforward problem but I haven't found the solution anywhere on the list.js documentation. How do I go about preventing the list from auto searching as I type in the search field and instead add a search button instead?
var options = {
valueNames: ['material', 'type', 'thickness', 'height', 'category']
};
var featureList = new List('piece-search', options);
.item {
margin: 0.5em;
padding: 0.5em;
width: 150px;
height: 150px;
float: left;
background: #229B55;
color: #F4F4F4;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.item p {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="page">
<div id="main">
<div class="c1">
<div id="piece-search">
<ul class="sort-by">
<li>
<input class="search" placeholder="Search pieces">
</li>
</ul>
<ul class="list">
<li class="item">
<p class="sorting-info hide-this">
<p class="material">plastic</p>
<p class="type">pipe</p>
<p class="thickness">3mm</p>
<p class="height">15inch+</p>
<p class="category">artsy</p>
</li>
<li class="item">
<p class="sorting-info hide-this">
<p class="material">glass</p>
<p class="type">pipe</p>
<p class="thickness">5mm</p>
<p class="height">14inch-</p>
<p class="category">scientific</p>
</li>
</ul>
</div>
</div>
</div>
</div>
The default class for search is "search" according to the documentation. So, you need to remove/change the classname from text input box in order to prevent auto search onkeyup.
I added a button for search that will call the function search() where you will get the search text value and search manually.
To search manually, read the documentation provided here.
JS function that will trigger on button click:
function search() {
var searchText = document.getElementById("searchText").value;
//console.log(searchText);
var options = {
valueNames: ['material', 'type', 'thickness', 'height', 'category']
};
var featureList = new List('piece-search', options);
// Search manually
featureList.search(searchText);
// Search manually on specific columns
//listObj.search(searchText, [ 'material' ]);
}
function search() {
var searchText = document.getElementById("searchText").value;
//console.log(searchText);
var options = {
valueNames: ['material', 'type', 'thickness', 'height', 'category']
};
var featureList = new List('piece-search', options);
// Search manually
featureList.search(searchText);
// Search manually on specific columns
//listObj.search(searchText, [ 'material' ]);
}
.item {
margin: 0.5em;
padding: 0.5em;
width: 150px;
height: 150px;
float: left;
background: #229B55;
color: #F4F4F4;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}
.item p {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/1.1.1/list.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div class="page">
<div id="main">
<div class="c1">
<div id="piece-search">
<ul class="sort-by">
<li>
<input id="searchText" placeholder="Type text to search">
</li>
<li>
<input type="button" class="searchButton" value="Search pieces" onclick="search()">
</li>
</ul>
<ul class="list">
<li class="item">
<p class="sorting-info hide-this">
<p class="material">plastic</p>
<p class="type">pipe</p>
<p class="thickness">3mm</p>
<p class="height">15inch+</p>
<p class="category">artsy</p>
</li>
<li class="item">
<p class="sorting-info hide-this">
<p class="material">glass</p>
<p class="type">pipe</p>
<p class="thickness">5mm</p>
<p class="height">14inch-</p>
<p class="category">scientific</p>
</li>
</ul>
</div>
</div>
</div>
</div>
Related
I want to get the data in a within the description inside the product items. I'm trying to do this with jquery.
$(".dl-view-item").click(function() {
var sku = $(this).find(".product.description").find.data("sku");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
I want to get the data in data-sku
You could try this.
$(".dl-view-item").click(function() {
var sku = $(this).find(".product.description");
console.log(sku)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
Lorem ipsum
</div>
</div>
</div>
this will work for you.
$(document).ready(function(){
$(".dl-view-item").click(function () {
var sku = $(this).find("div.description").data("sku");
$(this).find("div.description").text(sku);
});
});
You are missing a space between your selector classes.
.product.description
Alternatively, instead of simply supplying a space here, you could use a child combinator since the description is an immediate child of the the product container. If this is not the case, you can remove the > in the selector.
.product > .description
$('.dl-view-item').click(function() {
var sku = $(this).find('.product > .description').data('sku');
console.log(sku);
});
.dl-view-item {
display: block;
width: 32px;
height: 32px;
background: red;
border-radius: 50%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
By the way, you can do this without jQuery.
document.querySelectorAll('.dl-view-item').forEach(el => {
el.addEventListener('click', (e) => {
let sku = e.target.querySelector('.product > .description').dataset.sku;
console.log(sku);
})
});
.dl-view-item {
display: block;
width: 32px;
height: 32px;
background: red;
border-radius: 50%;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item">
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
$(".dl-view-item").click(function () {
var sku = $(".dl-view-item").find("div.description").attr("data-sku");
console.log(sku);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dl-view-item"> Click Me!
<div class="product">
<div class="description" data-sku="sample-data">
</div>
</div>
</div>
This is my li element. I want to get only the value of class 'preview' when clicking on the li element using jquery.
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
Output should be: john#gmail.com
I tried below code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $('.preview').val($(this).text());
})
Am getting the entire li items click event list as output.
Please help on this. Thanks.
You'd want to attach the click event handler to each list node, then a few ways could find the child nodes text value, one approach would be using the event.target to get access to the clicked list node, or my approach would be iterating over the list node collection as the following example illustrates.
const theLinkContains = email => document.querySelector('h2 span').textContent = email;
(() =>
{
document.querySelectorAll('li.contact')
.forEach(link =>
{
link.addEventListener('click', () =>
{
theLinkContains(link.querySelector('.preview').textContent);
});
});
})();
ul {
display: flex;
flex-direction: column;
padding-left: 0;
margin-bottom: 0;
}
li {
position: relative;
display: block;
padding-left: 5px;
margin-bottom: -1px;
background-color: rgb(255, 255, 255);
border: 1px solid rgba(0, 0, 0, .125);
}
.preview {
display: none;
}
<h2>Result: <span></span></h2>
<ul>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">Bob</p>
<p class="preview">Bob#gmail.com</p>
</div>
</div>
</li>
</ul>
The issue in your code is using .val() which is wrong to have it here, what you need is to select the <li> tag and then perform .find() to get the child .preview and then get its text using .text()
This is what you should have in your code:
$('li.contact').on("click", function(e) {
e.preventDefault();
var data = $(this).find('.preview').text();
console.log(data);
})
<li class="contact">
<div class="wrap">
<span class="contact-status online"></span>
<img src="" alt="" width="45px" height="45px" />
<div class="meta">
<p class="name">John</p>
<p class="preview">john#gmail.com</p>
</div>
</div>
</li>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
I want to disable a parent background div which contains grid with data. On the grid there are options like sorting and exporting the data into csv/pdf. Also, on this grid there is a filter button, on click of which(via ng-click= xyz();) a filter overlay comes. This is a child container div inside the parent div. I want to disable the parent grid div when this filter overlay div opens i.e., disable the sorting and export and any other functionalities on the parent div.
Any help form anyone? My entire project is in angular js. An example with a demo will be great!
In agg.service.js
angular.module('ccar14a.common').factory('ccar14a.common.AggService', [
'ccar14a.common.Config',
'StatusService',
'ccar14a.common.TcnService',
'ccar14a.common.PivotService',
'ccar14a.common.GridConfigService',
'$timeout',
function(Config, StatusService, TcnService, PivotService, GridConfigService, $timeout) {
var service = {
openFilterOverlay: function() {
console.log("Toggle Filter overlay00");
var filteroverlay = angular.element(".filter-overlay");
if(filteroverlay.hasClass('open')) {
filteroverlay.removeClass('open');
} else {
filteroverlay.addClass('open');
}
angular.element('.tooltip').hide();
},
};
return service;
}]);
In index.html
<div class="col-md-12 main-view" ng-controller="ccar14a.common.drillDownController">
<div class="ddt-container">
<h2>
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
</div>
<!--div container for filter overlay starts here-->
<div class="container-fluid ddt-container" ng-controller="ccar14a.common.drillDownController" id="ccar14a">
<h2 ng-hide="true" class="remove">
<span>
{{config.title}} v{{config.version}}.
<a href="" ng-click="getInitialFilter(true)"
ng-disabled="aggService.gridDisconnected" ng-if="config.initialTitle">
{{config.initialTitle}}</a>
<!--<span class="pull-right" style="font-size: 10px">, RDA: {{config.rda}}</span>-->
<!--<span class="pull-right" style="font-size: 10px">Bridge: {{config.bridge | bridgeDomain}}</span>-->
</span>
<div class="ddt-links pull-right">
<a href="" ng-click="about()">
About</a>
<a href="" ng-click="help()">
Help</a>
</div>
</h2>
<div class="ddt-sidebar filter-overlay col-md-2">
<div class="row">
<div class="col-md-6">
<div class="form-group ddt-filter-box-group">
<select class="form-control ddt-filter-box-fld" ng-model="savedFilter" ng-change="aggService.submitScenario(filter)">
<option value="">My Saved Filters</option>
</select>
</div>
</div>
<div class="col-md-6">
<button type="button" class="filter-close close-filter pull-right" ng-click="aggService.openFilterOverlay()"><i class="glyphicon glyphicon-remove filter-close"></i></button>
</div>
</div>
<!--The code continues having several filter box -->
<div class="ddt-content col-xs-12" ng-class="{'col-md-10': !showControlPanel, 'col-xs-12' : !showControlPanel}">
<div class="ddt-grid" ng-controller="ccar14a.common.AggController" ng-show="config.displaySummaryGrid">
<ng-include src="'templates/summaryGrid.html' | embedUrl"></ng-include>
</div>
In summaryGrid.html
<div class="grid-header">
<button type="button" class="btn btn-sm ddt-btn-medium pull-left" ng-show="true" ng-click="aggService.openFilterOverlay();">
<i class="glyphicon glyphicon-filter" tooltip="Open Filter" tooltip-placement="right"></i>
</button>
<!-- Code for other functionalities continues-->
</div>
In styles.css
.filter-overlay {
position: absolute;
left: -500px;
background: #EEE;
transition: 1s;
z-index: 1000;
box-shadow: 5px 5px 10px 3px #aaaaaa;
height: 100%;
min-width:365px;
overflow-y: auto;
}
.filter-overlay.open {
transition: 1s;
left: 0;
}
.filter-overlay .row {
margin-left: 0;
margin-right: 0;
margin-top: 8px;
margin-botton: 12px;}
.container-fluid {
background-color: #F0F3F6;
height: 100%;
padding: 18px;}
.container-fluid .row{
margin-left: 0;
margin-right: 0;}
.ddt-content {
padding-left: 0;
padding-right: 0;
background-color: white;}
.tab-content > .tab-pane {
display: none;}
.tab-content > .active {
display: block;}
If you disable the parent element then obviously the children elements will also be disabled. Instead of making them parent and children you can place those two divs as siblings and hide them individually depending on the visibility of the element.
I basically want to create a product listing page using jquery, just like this page: https://losangeles.sharegrid.com/browse/
Here is my code:
$(function(){
$('.link').click(function(){
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('#'+id).show();
});
});
.container {
width: 100%;
height: auto;
}
.eighty-percent {
width: 80%;
margin: 0 auto;
}
.categories {
width: 20%;
float: left;
ul {
li {
ul {
display: none;
}
}
}
}
.products-list {
width: 80%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="eighty-percent">
<div class="categories left">
<ul>
<li>
<a href="#" class="link" id="main-category" rel="main1">
main-category-one
</a>
<ul>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
<li>sub-cat-one</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list" id="main-sub1">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub2">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub3">
<h1>sub category one</h1>
</div>
<div class="products-list" id="main-sub4">
<h1>sub category one</h1>
</div>
</div>
</div>
</div>
Now the problem I am having is as you can see, I cannot make the div that is currently opened make hidden when I click on the other sub category links. I hope my snippet will make clear what I am trying to achieve
All changes and details are commented within the source.
FIDDLE
SNIPPET
$(function() {
$('.link').click(function(event) {
/*
Added to prevent <a>nchor links
from jumping. Note the `event`
parameter above as well.
*/
event.preventDefault();
$(this).next('ul').toggle();
var id = $(this).attr("rel");
/*
Added a class (i.e. `sub`), to
each #main-sub* so all of them will
be targeted to hide by the .hide()
method.
*/
$('.sub').hide();
$('#' + id).show();
});
});
.container {
width: 100%;
height: auto;
}
/*
Added to prevent the right
column from wrapping under
the left column.
*/
.subList {
height: 100vw;
display: none;
}
.categories {
width: 50%;
float: left;
}
.products-list {
width: 50%;
float: right;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<!--Removed .eighty-percent because it
hindered layout in demo only,
adding it or removing it shouln't
affect functionality in your production version.-->
<div class="categories left">
<ul>
<li>
main-category-one
<!--Added a class (i.e. subList)
in order to style it easier,
see CSS for why styling was needed -->
<ul class="subList">
<!--Changed each <a>nchor id as a
unique one. You should never have more
than one of the same id on a page.-->
<li>sub-cat-one
</li>
<li>sub-cat-two
</li>
<li>sub-cat-three
</li>
<li>sub-cat-four
</li>
</ul>
</li>
</ul>
</div>
<div class="products right">
<div class="products-list" id="main1">
<h1>main category one</h1>
</div>
<div class="products-list sub" id="main-sub1">
<h2>sub category one</h2>
</div>
<div class="products-list sub" id="main-sub2">
<h2>sub category two</h2>
</div>
<div class="products-list sub" id="main-sub3">
<h2>sub category three</h2>
</div>
<div class="products-list sub" id="main-sub4">
<h2>sub category four</h2>
</div>
</div>
</div>
As far as I understood, you want to hide the main div when another was clicked.
This would achieve it:
$(function() {
$('.link').click(function() {
$(this).next('ul').toggle();
var id = $(this).attr("rel");
$('div[id^="main"]').hide(); // added line
$('#' + id).show();
});
});
I want to be able to click on div.square-1 and have it toggle with div.square-2
The div itself needs to act like a button, I don't want an external button to activate the toggle like they did on jQuery documentation
Here is a sample of my code.
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
What is the best way to achieve this?
When you click on div.square-1 it will get content of div.square-2
var content1 = $('.square-1').html();
var content2 = $('.square-2').html();
var content = 1;
$('.square-1').click(function() {
if (content == 1) {
$(this).html(content2);
content = 2;
} else {
$(this).html(content1);
content = 1;
}
});
.square-box {
width: 100px;
height: 100px;
}
#square-1 {
background-color: blue;
}
#square-2 {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#">
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
HI now try to this way
.html()
first of you save your square-1 div content than replace your content your square-2 div
$(document).ready(function(){
$('.square-1').on('click', function(){
var thisText = $(this).find('h1').text();
$('.square-2 h1').html(thisText);
});
});
.square-box {
width: 100px;
height: 100px;
}
.square-1 {
background-color: blue;
}
.square-2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a href="#" >
<div class="square-box square-1">
<h1>Square 1</h1>
</div>
</a>
<a href="#">
<div class="square-box square-2">
<h1>Square 2</h1>
</div>
</a>
Have a look at this, it may be the best suited method.