I want to assign "active" class to the menu. The active clip is throwing but not deleting. I do not understand why you did not delete. Thank you in advance to those who can help.
There is no error, it surprises me that it does not delete this way
<ul id="avia-menu" class="menu av-main-nav">
<li id="menu-item" class="menu-item">
<a href="home">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Home</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="about">
<span class="avia-bullet"></span>
<span class="avia-menu-text">About</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
<li id="menu-item" class="menu-item">
<a href="contact">
<span class="avia-bullet"></span>
<span class="avia-menu-text">Contact</span>
<span class="avia-menu-fx">
<span class="avia-arrow-wrap">
<span class="avia-arrow"></span>
</span>
</span>
</a>
</li>
</ul>
function updateMenu(url) {
const active = document.querySelector('#menu-item.active');
if (active !== null) {
active.classList.remove('active');
}
const links = Array.from(document.querySelectorAll('#menu-item'));
links.forEach(function (li) {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
}
});
}
updateMenu(window.location.href);
You can simplify your function by consolidating your .add("active") and .remove("active") calls inside your loop. This saves you a query and avoids unsetting and resetting a class on the same element unnecessarily.
You also don't need the Array.from() call.
function updateMenu(url) {
const links = document.querySelectorAll('#menu-item');
links.forEach(li => {
let anchor = li.querySelector("a");
if (url.indexOf(anchor.href) > -1) {
li.classList.add("active");
} else {
li.classList.remove("active");
}
});
}
updateMenu(window.location.href);
Related
i have a trouble at the moment will rendering html tag inside state. When i add 'div dangerouslySetInnerHTML={{__html: this.state.actions}} it seems can't because i will render in li tag for menu
this.state = {
sideBar : '<li>[object Object]</li>'
}
// when i render
render(){
return(
{ this.state.sideBar}
) ==> // '<li>[object Object]</li>'
// what should happen is to create a new list
[object Object]
You can get it working without using dangerouslySetInnerHTML. Here's an example of using <ul> and an array of <li> tags that you can render directly in React.
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: ["list 1", "list 2", "list 3"]
};
}
render() {
return (
<div>
<ul>
{this.state.list.map((obj, index) => <li key={index}>{obj}</li> )}
</ul>
</div>
);
}
}
like this code
import React, { Component } from 'react'
import { Route, NavLink, Link } from 'react-router-dom'
import ReactTimeout from 'react-timeout'
class Menu extends Component {
constructor() {
super();
this.state = {
menuBar: [],
sideBar: []
}
}
async componentDidMount() {
const res = await fetch('http://localhost:3001/api/menu/' + 18)
const something = await res.json()
this.setState({ menuBar: something })
console.log(this.state.menuBar)
let menuBar = this.state.menuBar
let html = "";
let link_menu = []
for (var i = 0; i < menuBar.length; i++) {
if (menuBar.menu_url == 'dashboard' || menuBar.menu_flag_link === 1) {
var span_selected = ''
} else {
var span_selected = 'arrow'
}
if (menuBar.menu_flag_link == 0) {
var title_menu = menuBar[i].menu_title
link_menu =
<NavLink
to='javascript:;'
exact>title_menu</NavLink>
} else {
var title_menu = menuBar[i].menu_title
link_menu = <NavLink
to="/"
exact>title_menu</NavLink>
}
html += '<li>' + link_menu
if (menuBar[i].child.length > 0) {
html += "<ul class='sub-menu'>"
for (var j = 0; j < menuBar[i].child.length; j++) {
if (menuBar[j].child.menu_flag_link == 0) {
var link_menu2 = <NavLink
to='javascript:;'
exact>menuBar.child.menu_title</NavLink>
} else {
var link_menu2 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
}
html += "<li>, ${link_menu2}"
if (menuBar[i].child[j].length > 0) {
html += "<ul class='sub-menu'>"
for (var kjh = 0; kjh < menuBar[i].child[j].length; kjh++) {
var link_menu3 =
<NavLink
to="/"
exact>menuBar.child.menu_title</NavLink>
html += '<li> ${link_menu3} </li>'
}
html += '</ul>'
}
html += '</li>'
}
html += '</ul>'
}
html += '</li>'
}
this.setState({ sideBar: html })
}
render() {
let menuBar = this.state.menuBar
let sideBar = this.state.sideBar
// console.log(sideBar)
return (
<div class="page-sidebar-wrapper">
<div class="page-sidebar navbar-collapse collapse">
<ul class="page-sidebar-menu page-sidebar-menu-light" data-keep-expanded="true" data-auto-scroll="true" data-slide-speed="200">
<li class="sidebar-toggler-wrapper">
<div class="sidebar-toggler">
</div>
</li>
<li class="sidebar-search-wrapper">
<form class="sidebar-search " action="extra_search.html" method="POST">
<a href="javascript:;" class="remove">
<i class="icon-close"></i>
</a>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." />
<span class="input-group-btn">
<i class="icon-magnifier"></i>
</span>
</div>
</form>
</li>
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
<span class="arrow open"></span>
</a>
<ul class="sub-menu">
<li>
<NavLink
to="/"
exact>Home</NavLink>
</li>
<li class="active">
<NavLink to={{
pathname: '/blog',
hash: '#submit',
search: '?quick-submit=true'
}}
>Blog</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/Table'
}}>Table</NavLink>
</li>
<li>
<NavLink to={{
pathname: '/BCC'
}}>BCC</NavLink>
</li>
</ul>
</li>
{this.state.sideBar}
<li>
<a href="javascript:;">
<i class="icon-folder"></i>
<span class="title">Multi Level Menu</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-settings"></i> Item 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<a href="javascript:;">
<i class="icon-user"></i>
Sample Link 1 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-power"></i> Sample Link 1
</li>
<li>
<i class="icon-paper-plane"></i> Sample Link 1
</li>
<li>
<i class="icon-star"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<i class="icon-camera"></i> Sample Link 1
</li>
<li>
<i class="icon-link"></i> Sample Link 2
</li>
<li>
<i class="icon-pointer"></i> Sample Link 3
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-globe"></i> Item 2 <span class="arrow"></span>
</a>
<ul class="sub-menu">
<li>
<i class="icon-tag"></i> Sample Link 1
</li>
<li>
<i class="icon-pencil"></i> Sample Link 1
</li>
<li>
<i class="icon-graph"></i> Sample Link 1
</li>
</ul>
</li>
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Item 3 </a>
</li>
</ul>
</li>
</ul>
</div>
</div>
)
}
}
export default ReactTimeout(Menu)
I have three links (anchor tag) that represent standards like std1, std2. I want to get the active class value.
<li data-interest="1" class="check <? if($std_id == 1){?> class="active"<?}?>" >
<a href="#1" onclick="changeDiv('1','S1')" data-toggle="tab" title="S1">
<span class="round-tabs green">
<span class="grade_catgory">S1</span>
</span>
</a></li>
<li data-interest="2" class="check <? if($std_id == 2){?> class="active"<?}?>" >
<a onclick="changeDiv('2','S2')" data-toggle="tab" title="S2">
<span class="round-tabs yellow">
<span class="grade_catgory">S2</span>
</span>
</a>
</li>
jQuery
$(function() {
// var val = $('ul#myTab1').find('li.active').data('interest');
var itemType = $('ul#myTab1').find('li.check').data('interest');
alert(itemType);
});
I want the value like 1, 2, etc. Where can I put this?
Try this:
$("li").each(function(){ // loop through all li
if($(this).hasClass("active")) { // check if li has active class
console.log($(this).data("interest")) // get the value of data-interest attribute
}
})
Try this :
var val = $('body').find('li.active').attr('data-interest');
I have a component which have buttons and list both of which perform events on click. I need a common way to get the ancestor element for these elements. The structure looks like
<div class='a'>
<button class ='b' data-name="hello">
<span class ='c'>clickMe
<span>somehting</span>
</span>
<button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>somehting</span>
</span>
</li>
</ul>
</div>
I try to get the element button and li because I need to get data-name information.
e.target is the element that was clicked
var targetel = goog.dom.getAncestorByClass(e.target,null,class??);
Not sure how to get the correct element irrespective if its a button or li. Do i need to add a unique class to all the elements ?
Just use e.currentTarget
var result = document.querySelector('#result');
var clickables = document.querySelectorAll('button, li');
//add click listener to elements
for (var i = 0, l = clickables.length; i < l; i++) {
clickables[i].addEventListener('click', getDataName);
}
function getDataName(e) {
var dataName = e.currentTarget.getAttribute('data-name');
result.textContent = dataName;
}
<div class='a'>
<button class ='b' data-name="hello">
<span class ='c'>clickMe
<span>somehting</span>
</span>
</button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>somehting</span>
</span>
</li>
</ul>
</div>
<div id="result">data-name of clicked element goes here</div>
https://api.jquery.com/parents/
Use the jquery.parents("li") function. it will select all the parents that match your css filter. so you can do
var parentli = targete1.parents("li");
var button = targete1.parents("div").children[0];
Or something similar to that.
EDIT:
Not sure why i got downvoted, here is my idea in action.
maybe press f12 to inspect element and look at the console log.
var onClick = function () {
var parentEl = $(this).parents("button, li")[0];
console.log(parentEl);
$("#result")[0].innerText = parentEl.getAttribute("data-name");
};
$('span.c').click(onClick);
$('li span.e').click(onClick);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='a'>
<button class='b' data-name="hello">
<span class='c'>clickMe
<span>something</span>
</span>
</button>
<ul class ='d'>
<li data-name="about">
<span class ='e'>something here
<span>somehting</span>
</span>
</li>
<li data-name="home">
<span class ='e'>something elser here
<span>something</span>
</span>
</li>
</ul>
</div>
<div id="result">result goes here</div>
I have a jQueryUI sortable list of li-Buttons with following markup:
<ol id="tracks" class="ui-sortable">
<li class="pl_clipEntry ui-widget-content ui-draggable ui-draggable-handle">
<span class="pl_slot_1_clipNumber_6">6. </span>
<span class="pl_clipName">
<button class="pl_entry" onclick="emitCommand('goto: clip id: 6')">Clip Copy 3.mov</button>
</span>
<span class="pl_clipLength">(00min17sec)</span>
</li>
</ol>
These Items are dragged from another list, where their onclick has its good use
Now everytime the list is sorted (or a new item is inserted), i want to overwrite the onclick, so that the items in THIS list have a different function (in fact, it's going to be a playlist, that's why the onclick-command can't be the same as in the file-list)
i can't figure out how exactly to do this.
This is called on every list-update:
function updatePlaylist () {
var list = $("#tracks");
list.children(':not(.placeholder)').each(function(index) {
console.log($(this).childNodes[1].text()); // to check if it works
//$(this).children[1].attr("onclick","play_clip:" + index);
});
};
so, in plain: i want to set the onclick of each li > span > button to "play_clip6" etc.
i've tried it with children[1] and childnodes[1], but they all print undefined.
i suppose it's something about the scope of "this", or some other thing i've overlooked.. but shouldn't this work? i'm stuck :(
thanks
I think what you are missing is the parameter for the referenced element in the each function.
HTML
<ol id="tracks">
<li>Track 1 <span style="color:red;">sp1</span> <span style="color:blue;">Play 1</span>
</li>
<li>Track 2 <span style="color:red;">sp1</span> <span style="color:blue;">Play 2</span>
</li>
<li>Track 3 <span style="color:red;">sp1</span> <span style="color:blue;">Play 3</span>
</li>
<li>Track 4 <span style="color:red;">sp1</span> <span style="color:blue;">Play 4</span>
</li>
<li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>
JS
$(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1);
$(cElem).click(function () {
alert("before: " + $(cElem).text());
});
});
});
$("#changeIt").click(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1);
$(cElem).attr('onclick', '').unbind('click');
$(cElem).click(function () {
alert("after: " + $(cElem).text());
});
});
});
Edit for selecting button inside
HTML
<ol id="tracks">
<li>Track 1 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 1</button></span>
</li>
<li>Track 2 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 2</button></span>
</li>
<li>Track 3 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 3</button></span>
</li>
<li>Track 4 <span style="color:red;">sp1</span> <span style="color:blue;"><button>Play 4</button></span>
</li>
<li class="placeholder">Move Track Here</li>
</ol>
<button id="changeIt">Change The Click Event</button>
JS
$(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1).children().eq(0);
$(cElem).click(function () {
alert("before: " + $(cElem).text());
});
});
});
$("#changeIt").click(function () {
$("#tracks").children(":not(.placeholder)").each(function (index, elem) {
var cElem = $(elem).children().eq(1).children().eq(0);
$(cElem).attr('onclick', '').unbind('click');
$(cElem).click(function () {
alert("after: " + $(cElem).text());
});
});
});
I'm using .net mvc and razor and I'm displaying items (itemRoom, itemDescription) in my view like this:
#foreach (var item in Model) {
<li class="errorItem">
<a href="#" class="list-group-item">
<i class="fa fa-warning fa-fw"></i> #Html.DisplayFor(modelItem => item.room) : #Html.DisplayFor(modelItem => item.title)
<span class="pull-right text-muted small"><em>5 min ago</em>
</span>
<div>
<ul id="errorExtra" class="nav nav-second-level" style="display: none;">
<li>
<p> #Html.DisplayFor(modelItem => item.description)</p>
<input type="button" id="btnFixed" value="Fixed" class="btn btn-success"/>
</li>
</ul>
</div>
</a>
</li>
}
At the bottom of my page I'm using JQuery to let every item slide open when it's clicked on so that the details and 'Fixed' button become visible. When the user clicks on the Fixed button he gets directed to a confirmation page to delete the item.
<script src="../Assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var isOpen = false;
$(".errorItem").click(function (e) {
isOpen = !isOpen;
if (isOpen) {
$(this).find("#errorExtra").slideToggle("slow");
} else {
$(".btn-success").click(function (e) {
window.location.replace("Reports/Delete/2")
})
};
});
});
</script>
Everything works quite all right but the link 'window.location.replace("Reports/Delete/2")' actually has to be 'Reports/Delete/itemID' but how can I mange to get the ID of the item that the user has clicked on and that has slide open? So that THIS item will be deleted on the confirmation page?
do a little change in view, assuming your unique id is with property name Id:
#foreach (var item in Model) {
<li class="errorItem">
<a href="#" class="list-group-item">
<i class="fa fa-warning fa-fw"></i> #Html.DisplayFor(modelItem => item.room) : #Html.DisplayFor(modelItem => item.title)
<span class="pull-right text-muted small"><em>5 min ago</em>
</span>
<div>
<ul id="errorExtra" class="nav nav-second-level" style="display: none;">
<li>
<p> #Html.DisplayFor(modelItem => item.description)</p>
--> change is here <input type="button" id="btnFixed" data-url="#Url.Action("Delete","Reports",new{id=item.Id})" value="Fixed" class="btn btn-success"/>
</li>
</ul>
</div>
</a>
</li>
}
In Jquery:
$(".btn-success").click(function (e) {
var url = $(this).data("url");
window.location.replace(url);
});
Just a small notice: you'll have multiple buttons with the same id="btnFixed" because it's inside of the #foreach loop. Maybe adding some kind of index to it would be reasonable or changing it to the class="btnFixed".
The same with the <ul id="errorExtra" ...>.