When I checked my work I see undefined in my work. It's not supposed to be there. Can anyone help?
jQuery
$(document).ready(function () {
var listItems = $("#productList li");
listItems.each(function (idx, li) {
var product = $(li);
product.append(" - <b> ("+product.attr('data-type')+") </b>");
});
});
HTML
<ul id="productList">
<li data-activity-type="family">Snow Tubbing</li>
<li data-activity-type="family">Snowcat Mountain Tour</li>
<li data-activity-type="adventure">SnowSlam 11 Racing Course</li>
<li data-activity-type="adventure">Snowboarding</li>
<li data-activity-type="adventure">Edge 11 Performance Ski Racing</li>
<li data-activity-type="family">Dog Sled Tour</li>
<li data-activity-type="family">Snowshoeing</li>
<li data-activity-type="kids">Kid's Night Out</li>
<li data-activity-type="kids">Bear Cub Kamp at the Nursery</li>
</ul>
I'm assuming the activity-type value is going to append to innerHTML.
the data-type should be data-activity-type.
$(document).ready(function () {
var listItems = $("#productList li");
listItems.each((index, item) => {
item = $(item);
item.html( item.html() + `- <b>${ item.attr('data-activity-type') }</b>` );
});
});
Related
I am attempting to create a way of ordering a list into specific sections using a nav bar. For example, all list items displays under 'All' and then the option to refine the list into 3 other sections.
Current example
https://ibb.co/pvBV4Lf
Does anyone have any suggestions on how to achieve this? Any examples?
I'm not even sure what you would name this kind of function
<div class="nav">
<h1>All</h1>
<h1><span>Residential</span></h1>
<h1><span>Commercial</span></h1>
<h1><span>Retail</span></h1>
</div>
<ul>
<li>Granville Place</li><br>
<li>Palisade</li><br>
<li>King & Phillip</li><br>
<li>Castle Residences</li><br>
<li>Opera Residences</li><br>
<li>Brighton Collection</li><br>
<li>Carpe Group</li><br>
<li>The Lennox</li><br>
<li>South Quarter</li><br>
<li>One Barangaroo</li><br>
<li>One Queensbridge</li><br>
<li>Australia 108</li><br>
<li>Oceans Freshwater</li><br>
<li>The Pavilions</li>
</ul>
Welcome to stackoverflow,
one way to filter your list element is to append a data-* attribute to your elements and bind a javascript function on your links in the div.nav to filter the list:
window.addEventListener('DOMContentLoaded', () => {
// filter list
const filterList = e => {
e.preventDefault();
// fetch filtertype
const type = e.target.closest('a').getAttribute('data-filter-type');
// hide or display list elements
document.querySelectorAll('ul li').forEach(li => {
li.style.display = type === li.getAttribute('data-filter-type') || type === 'all' ? 'list-item' : 'none';
});
};
// bind links
document.querySelectorAll('.nav a').forEach(a => {
a.addEventListener('click', filterList)
});
});
h1 { font-size: 18px; }
<div class="nav">
<h1>All</h1>
<h1><span>Residential</span></h1>
<h1><span>Commercial</span></h1>
<h1><span>Retail</span></h1>
</div>
<ul>
<li data-filter-type="residential">Granville Place</li>
<li data-filter-type="residential">Palisade</li>
<li data-filter-type="commercial">King & Phillip</li>
<li data-filter-type="commercial">Castle Residences</li>
<li data-filter-type="residential">Opera Residences</li>
<li data-filter-type="residential">Brighton Collection</li>
<li data-filter-type="commercial">Carpe Group</li>
<li data-filter-type="retail">The Lennox</li>
<li data-filter-type="retail">South Quarter</li>
<li data-filter-type="residential">One Barangaroo</li>
<li data-filter-type="residential">One Queensbridge</li>
<li data-filter-type="retail">Australia 108</li>
<li data-filter-type="commercial">Oceans Freshwater</li>
<li data-filter-type="commercial">The Pavilions
</ul>
I have a sideBar that opens when I click on a button and i have <li> items there.
I want do add an onCLick event to those items but, onClick event fires when page is loaded and when ever I click on <nav className={drawClass}> elements.
Any information is helpful, thank you.
const Sidedraw = props => {
let drawClass = "sideDraw";
if (props.show) {
drawClass = "sideDraw open";
}
return (
<nav className={drawClass}>
<ul>
<li className="matches" onclick={console.log("work work")}>
Pro matches
</li>
<li className="matches">Public mathes</li>
<li className="matches">Players</li>
<li className="matches">Teams</li>
</ul>
</nav>
);
};
As others have mentioned, the onClick should be a function reference.
Also, you will likely get a warning with the current code:
Non-interactive elements should not be assigned mouse or keyboard event listeners
You should place an interactive element (anchor, button, etc.) within the list item.
<ul>
<li className="matches">
<button onClick={() => console.log('work work')}>Pro matches</button>
</li>
<li className="matches">Public mathes</li>
<li className="matches">Players</li>
<li className="matches">Teams</li>
</ul>
You’re setting the onClick to the result of the console.log call, not the function itself. You want:
onClick={() => console.log("work work")}
Check out the docs for Handling events.
Also, you might want to move your click handler into its own function so that you can easily add it to all nav items.
const Sidedraw = props => {
let drawClass = "sideDraw";
if (props.show) {
drawClass = "sideDraw open";
}
function clickHandler(evt) {
console.log(evt.target)
}
return (
<nav className={drawClass}>
<ul>
<li className="matches" onClick={clickHandler}>Pro matches</li>
<li className="matches" onClick={clickHandler}>Public mathes</li>
<li className="matches" onClick={clickHandler}>Players</li>
<li className="matches" onClick={clickHandler}>Teams</li>
</ul>
</nav>
);
};
Stackblitz
you must add clickeventhandler to each element you want to perform some actions.
<li className="matches" onClick={handleValueChange}>Pro matches</li>
and you must add that function ie
handleValueChange = (e) => {
// ...
}
I am working on drop down in angular js which is already in ng-repat option.
I want to make it work in a way that when an option is selected in any of repeated select box it should not be available in other repeated select boxes.
My current code looks like this. :
HTML:
<div ng-repeat="endDate in endDate_counts">
<div class="sch_endDate_opsAmount_cell cell1">
<strong class="nc_Camaignfinance_title">Option</strong>
<div class="nc_Camaign_costFinance_opsSlct" select-input>
<div class="nc_Camaign_costFinance_opsSlct_inn">
<span>{{endDate.select_endDate}}</span>
<ul>
<li ng-click="endDate.select_endDate = 'Never'">
<em>Never</em></li>
<li ng-click="endDate.select_endDate = 'Impressions'">
<em>Impressions</em></li>
<li ng-click="endDate.select_endDate = 'Budget'">
<em>Budget</em></li>
<li ng-click="endDate.select_endDate = 'Clicks'">
<em>Clicks</em></li>
<li ng-click="endDate.select_endDate = 'Date'">
<em>Date</em></li>
</ul>
</div>
</div>
</div>
</div>
*Note: Please ignore the custom directives or other methods. I am using them myself and aware of them .
try:
html:
<ul>
<li ng-show="checkExist(key-1,'Never')" ng-click="endDate.select_endDate = 'Never'">
<em>Never</em></li>
<li ng-show="checkExist(key-1,'Impressions')" ng-click="endDate.select_endDate = 'Impressions'">
<em>Impressions</em></li>
<li ng-show="checkExist(key-1,'Budget')" ng-click="endDate.select_endDate = 'Budget'">
<em>Budget</em></li>
<li ng-show="checkExist(key-1,'Clicks')" ng-click="endDate.select_endDate = 'Clicks'">
<em>Clicks</em></li>
<li ng-show="checkExist(key-1,'Date')" ng-click="endDate.select_endDate = 'Date'">
<em>Date</em></li>
add this function in your js file:
$scope.checkExist = function(index,value){
if(index < 0){
return true;
}
if($scope.endDate_counts[index].select_endDate == value){
return false;
}else {
return true;
}
}
Using dragula plugin (Angular 1) link
ng-click not working moved (drag and drop to another ul) on li element
<ul dragula='"second-bag"'>
<li ng-click="fun()">Item One </li>
<li ng-click="fun()">Item Two</li>
<li ng-click="fun()">Item Three</li>
<li ng-click="fun()">Item Four</li>
</ul>
<ul dragula='"second-bag"'>
<li ng-click="fun()">Item One </li>
<li ng-click="fun()">Item Two</li>
<li ng-click="fun()">Item Three</li>
<li ng-click="fun()">Item Four</li>
</ul>
app.controller('ExampleCtrl', ['$scope', function ($scope) {
$scope.fun = function(){
alert('test');
}
}]);
It is probably the expected behaviour of dragula, becouse in order to drag the element you are actually clicking it.
The important part is why do you want to listen the clicking event of an dragula list element? If the answer is to manipulate that particular element or do another operation, dragula gives you a set of opportunities.
<div dragula='"sixth-bag"'></div>
<div dragula='"sixth-bag"'></div>
app.controller('MuchExampleCtrl', ['$scope', 'dragulaService',
function ($scope, dragulaService) {
dragulaService.options($scope, 'sixth-bag', {
moves: function (el, container, handle) {
return handle.className === 'handle';
}
});
}
]);
In this example, you are changing the className of the "handled" element. Similar to this, you can use this approach for other possible outcomes.
Links:
http://bevacqua.github.io/angular-dragula/
https://github.com/bevacqua/dragula#optionsmoves
Also as an alternative you might want to checkout the service ngDraggable for more "Angular1 style" syntax.
ngDraggable: https://github.com/fatlinesofcode/ngDraggable
I am using bootstrap nav bar with codeigniter as backend.
Now In my application i want to change the < li> class to active dynamically for each page.
So i can known i am on which page currently.
Below is my code:
<ul class="nav navbar-nav">
<li class="active">Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">
You can use this javascript to add active class based on current url please try it
<script type="text/javascript">
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
});
</script>
Can't you just use this replacing your <a> tags. This will match the current uri string, with the links href attribute. If it matches, it add's an active class to the link. You can style the .active using you
Company
So the entire code will be.
<ul class="nav navbar-nav">
<li>Dashboard</li>
<li>Company</li>
<li>Users Management</li>
<li>Key Management</li>
<li>Activated Devices</li>
</ul>
<ul class="nav navbar-nav navbar-right">
Your pages should know which menu should be set as active.
Try adding an id to your <li> and add a javascript code to your pages to set the active menu based on the ID.
Example:
<ul class="nav navbar-nav">
<li id="menu-dashboard" class="active">Dashboard</li>
<li id="menu-company">Company</li>
<li id="menu-user">Users Management</li>
<li id="menu-key-management">Key Management</li>
<li id="menu-activation">Activated Devices</li>
</ul>
<script>
var menuid = "menu-dashboard";
$(function() {
$('.nav li').removeClass('active');
$(menuid).addClass("active");
});
</script>
Pages:
Add the following javascript lines to your pages
Company page
menuid = "#menu-company";
User page
menuid = "#menu-user";
You can achieve it by using jQuery or JavaScript.
jQuery example:
$('.nav li').click(function(){
$('.nav li').removeClass('active');
$(this).addClass('active');
});
The jQuery in the accepted answer do not know the difference if the visitor is coming from http://example.com or http://example.com/index.php and would not activate the "home" menu-item. This is my fix for that.
HTML This is a snippet from my menu:
<div class='navbar'>
<a href='index.php'><div class='nav-icon icon-home'></div>Hem</a>
<a href='calender.php'><div class='nav-icon icon-calender'></div>Kalender</a>
<a href='exchange.php#utbyte'><div class='nav-icon icon-byte'></div>Byten</a>
</div>
This is a function I've added to my database controller class to find out what protocol the visitor use:
public static function adr_protocol()
{
$str = 'http://';
if(isset($_SERVER['HTTPS']) && 'on' === $_SERVER['HTTPS']) $str = 'https://';
return $str;
}
jQuery:
;var ix = '<?php echo DBController::adr_protocol()."{$_SERVER['HTTP_HOST']}/"; ?>';
var url = (window.location==ix)?window.location+'index.php':window.location;
$('div.navbar a[href="'+ url +'"]').parent().addClass('active');
$('div.navbar a').filter(function() {
return this.href == url;
}).addClass('active');