I need to append to the nested list under ARTCC. Here is an excerpt from the body of the document:
<div id="GUI" class="sidenav">
<section id='list' class="ladder tree">
<ul>
<li><a id="ARTCC" href="."><i class="fa fa-cube"></i> <i class="fa fa-check-square"></i> ARTCC</a>
<ul>
<li><a id ="ZAB" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
</ul>
</li>
</ul>
</section>
</div>
Here is the funciton that appends items to the list:
for(var i = 0; i < added.length; i++) {
var entityId = added[i].name.toLowerCase();
if(entityId.includes("z")){
$("#ARTCC ul").append("<li><a id=" + added[i].id + " class=ARTCC href='#'><i class='fa fa-check-square'</i>" + added[i].name + "</a></li>");
}
}
When I use $("#ARTCC ul").append nothing is added to the list.
However, $("#list ul ul").append does place the items in the correct location but also appends the items to the other list items and it causes a function that relies on $("a.ARTCC").dblclick() to not execute on a double click.
From what I have read "#ARTCC ul" seems to be the correct way to get the result I am looking for but it is currently not working. Am I missing something here?
The end result would add this last element to the list:
<li><a id="ARTCC" href="."><i class="fa fa-cube"></i> <i class="fa fa-check-square"></i> ARTCC</a>
<ul>
<li><a id ="ZAB" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
//new item
<li><i class="fa fa-check-square"></i> NEW ITEM</li>
</ul>
</li>
ARTCC doesn't have any ul below it in the document tree. The query selector you have listed is first trying to find an element with the id of "ARTCC", then selecting all ul elements that are within it. It sounds like you're looking to add to this ul:
<ul>
<li><a id ="ZAB" class="ARTCC" href="#"><i class="fa fa-check-square"></i> ZAB</a></li>
<li><i class="fa fa-check-square"></i> ZAU</li>
<li><i class="fa fa-check-square"></i> ZBW</li>
</ul>
To do that, change <ul> to <ul id="someId">, then in jQuery you can do $('#someId').append(someElement);
Unless you're trying to append to the class ARTCC in which you'd do $('.ARTCC') but it doesn't look like that's what you're trying to do.
Change $("#ARTCC ul") to $("#ARTCC+ul"). This is prev + next selector.
Related
I have the code below in my index.php, only the first item in the accordion shows.
For instance: when I click on Status or Repeated, am expecting the sub-menu of the clicked item but instead I get the result from the first list. That is Position.
<style>
ul .sub_main{
cursor: pointer;
}
.nested {
display: none;
}
.active {
display: block;
}
</style>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MANAGE</li>
<li class="sub_main"><i class="fa fa-users"></i><span>Positions</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-users"></i> <span>a link 1</span></li>
<li class=""><i class="fa fa-users"></i> <span>a link 2</span></li>
</ul>
</li>
<li class="sub_main"><i class="fa fa-tasks"></i> <span>Status</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-tasks"></i> <span>b link 1</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>b link 2</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>b link 3</span></li>
</ul>
</li>
<li class="sub_main"><i class="fa fa-tasks"></i> <span>Repeated</span><i class="fa fa-plus" aria-hidden="true"></i>
<ul class="nested">
<li class=""><i class="fa fa-tasks"></i> <span>c link 1</span></li>
<li class=""><i class="fa fa-tasks"></i> <span>c link 2</span></li>
</ul>
</li>
</ul>
this is the script to show the accordion item when clicked.
var toggler = document.getElementsByClassName("sub_main");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.parentElement.querySelector(".nested").classList.toggle("active");
});
}
Your JS line with the class toggle method is being called on the parent of the "sub-main" class. This means that the querySelector is grabbing the first ".nested" element it finds from your ul.sidebar-menu element, which will always be the top ".nested" group.
If you simply remove the "parentElement" from that JS line, then the querySelector will look for the first ".nested" within the ".sub-main" (this) element.
Your JS should look like:
var toggler = document.getElementsByClassName("sub_main");
var i;
for (i = 0; i < toggler.length; i++) {
toggler[i].addEventListener("click", function() {
this.querySelector(".nested").classList.toggle("active");
});
}
How can I change a icon class based on a field value? I have a field name called flag, this field contains two value On and Off.
How can i change icon class based on the value:
When flag="On" show this icon fa-check-circle green
When flag is off show k-i-close-outline
<ul id="treeview" >
#foreach (var item in rpInfo)
{
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="far fa-check-circle" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="far fa-check-circle"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
}
</ul>
To make it easier i added data-id as and in browser looks like this <i class="far fa-check-circle" data-id="Off" style="padding-right: 10px;"></i>.
may be if that helps
Thank you!
I'm having trouble to understand what you do and what you need but it sounds like you need a simple if statement.
Maybe something along the lines?
<ul id="treeview" >
#foreach (var item in rpInfo)
{
var flag = #item.Flag;
if (flag = 'On') { '
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="far fa-check-circle" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="far fa-check-circle"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
'} else{ '
<li data-expanded="true" class="panel-handler" data-id="#item.ID">
<i class="k-icon k-i-close-outline" data-id="#item.Flag" style="padding-right: 10px;"></i>#item.CompanyName
<ul>
<li data-expanded="true">
<i class="k-icon k-i-close-outline"></i>#item.flag #item.ContactName
</li>
</ul>
</li>
'}
};
</ul>
I'm a beginner to javascript, I've been trying to add the active class to a li using jquery i.e. When its clicked, expand li and make it active:
<script>
$(document).ready(function() {
var url = window.location['pathname'];
jQuery('li a').each(function() {
if($(this).attr('href') == url)
$(this).parent().addClass('active');
});
});
</script>
This only makes the sub-menu active but not expanded. But when I manually added the active class (as shown below) to treeview and li, it expanded and became active. How to dynamically add the active class through jquery?
<aside class="main-sidebar">
<section class="sidebar">
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MENU</li>
<li class="treeview active">
<a href="#">
<i class="fa fa-table"></i> <span>USER</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-plus"></i> Add</li>
<li class="treeview active">
<a href="#"><i class="fa fa-circle-o"></i> Profile
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active"><i class="fa fa-circle-o"></i> View </li>
<li><i class="fa fa-circle-o"></i> Settings </li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
</aside>
So, you need to apply active class on all .treeview using parents:
$(this).parents('.treeview').addClass('active');
Actually, changing parent() to parents() fixed it:
$(this).parents().addClass('active');
I have a code like below in my html
<ul class="nav">
<li class="no-bullet " onclick="window.location = 'ask_question.html';">
<button type="button" class="signout_btn line_height">
<i class="fa fa-home " aria-hidden="true"></i>
Home</button>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-tags" aria-hidden="true"></i>
Search by Category</a>
<ul class="" id="loadCategories">
<li>Food</li>
<li>Sports</li>
<li>Personal</li>
</ul>
</li>
<li class="sub-menu"><a href="#">
<i class="fa fa-map-marker" aria-hidden="true"></i>
Switch City </a>
<ul class="" id="loadCities">
<li>Mumbai</li>
<li>Bangalore</li>
<li>Personal</li>
</ul>
</li>
<li class="no-bullet " onclick="window.location = 'user_profile.html';" >
<button type="button" class="settings_btn line_height">
<i class="fa fa-user" aria-hidden="true"></i>
My Profile</button>
</li>
<li class="no-bullet " onclick="window.location= 'all_users.html';">
<button type="button" class="signout_btn line_height" id="btnFindAFriend">
<i class="fa fa-users" aria-hidden="true"></i>
Find A Friend</button>
</li>
</ul>
If you notice the above code, I have li which on click I am directing to a certain html page. Inside the li I have put a button there in order to make all my menu option look uniform. In order to achieve that I did some make and break to make it look exact similar.
But I am unable to make all of them look exactly the same. I want to have the same height and size of all the menu option.
Can someone recommend a correct way to solve this.
Here's the fiddle for the same.
I am using a jQuery menu plugin from http://mmenu.frebsite.nl/
Everything is working fine, but when I select the sub menu, it never shows the active state. It keeps on sending to the main page after page loads. See the screenshot for more information.
I am doing this:
<div id="menu">
<ul class="listview-icons">
<li>
<a>
<form method="post" action="{$site_url}/tracking.html" name="trak_now_homepage" id="trak_now_homepage">
<div class="form-group texttransform">
<input type="text" class="form-control" id="shipment_track_num" name="track_num" placeholder="Enter the booking ID">
<span id="shipment_alert" class="alert" style="color:#CF0"></span>
<BR />
<input name="news_go" type="submit" value="Track now" class="com_buton" id="send" onclick="return valid_shipment_tracking_form(document.trak_now_homepage);" />
</div>
</form>
</a>
</li>
<li><i class="fa fa-home"></i> HOME</li>
<li>
<span><i class="fa fa-file-text-o"></i> SEND</span>
<ul>
<li><i class="fa fa-file-text-o"></i> DOCUMENTS</li>
</ul>
</li>
<li>
<span><i class="fa fa-plane"></i> SERVICES</span>
<ul>
<li><i class="fa fa-map-marker"></i> SAME DAY DELIVERY</li>
</ul>
</li>
<li>
<span><i class="fa fa-user"></i> ABOUT US</span>
<ul>
<li><i class="fa fa-info-circle"></i> ABOUT US</li>
<li><i class="fa fa-info-circle"></i> FAQ</li>
<li><i class="fa fa-info-circle"></i> HOW IT WORKS</li>
<li><i class="fa fa-info-circle"></i> PACKAGING ADVICE</li>
<li><i class="fa fa-info-circle"></i> REVIEWS</li>
<li><i class="fa fa-info-circle"></i> TERMS</li>
<li><i class="fa fa-info-circle"></i> POLICIES</li>
<li><i class="fa fa-info-circle"></i> VOLUME CALCULATOR</li>
</ul>
</li>
<li><i class="fa fa-phone"></i> CONTACT US</li>
<li><i class="fa fa-fw fa-shopping-cart"></i>ITEMS</font></li>
<li><i class="fa fa-fw fa-user"></i> my account</li>
</ul>
</div>
How to fix this? The working demo is at www.matchcouriers.com
I have solved it, using smarty condition as i am using smarty as a template and the class that need to be used from mmenu is mm-seleced
<li class="mm-selected"><i class="fa fa-home"></i> HOME</li>
By default mmenu uses the css class Selected (note the capital S) on the current li for the current selected item.
selected menu have a dark background
You must define your own li.Selected style, I don't think you have done this.
sub-menu panel should stay as it is, but after selecting menu and page load, main-menu appear no the selected sub-menu panel
This is actually not automatic. You need to add Selected class to the relevant li on your pages. For example, in the About Us page, you would do this:
<li class="Selected"><i class="fa fa-info-circle"></i> ABOUT US</li>
References:
Styling Lists
Menu Items not selected after page load