Develop Reference

If handlebars list is empty, show a message

I am using handlebars to show data. I have a ul that filters the data and populates another ul. The filter ul has a couple of choices that currently output an empty ul. I want the empty ul to show a message that says "There are no sessions yet."
I am trying to use handlebars if helper. The problem I am running into is the message is showing up in all ul, even if it is not empty.
<div class="session-details-inner">
<div class="sidebar left-sidebar left-align">
<ul id="session_filter_15308050681959955093" class="session_filters no-list-style">
<li>
<a class="themelink active" data-filter="All" title="All Tracks">General</a>
</li>
<li>
<a class="themelink" data-filter="Destination Marketers" title="Destination Marketers">Destination Marketers</a>
</li>
<li>
<a class="themelink" data-filter="Exhibitions" title="Exhibitions">Exhibitions</a>
</li>
<li>
<a class="themelink" data-filter="Financials" title="Financials">Financials</a>
</li>
<li>
<a class="themelink" data-filter="Registration" title="Registration">Registration</a>
</li>
<li>
<a class="themelink" data-filter="Technical" title="Technical">Technical</a>
</li>
<li>
<a class="themelink" data-filter="Venues" title="Venues">Venues</a>
</li>
</ul>
</div>
<div class="sidebar right-sidebar left-align">
<ul class="scheduleday_wrapper themeborder no-list-style">
{{#each ./Sessions}}
{{#if TrackDescription.length}}
<li class="themeborder individual-session accordion-panel" data-track="{{TrackDescription}}">
<div class="session_content_wrapper expandable accordion">
<div class="session_content ">
<div class="session_title">
<h6>{{Title}}</h6>
</div>
</div>
</div>
<div class="session_content_extend hide session_content_wrapper panel">
<div class="session_content ">
<div class="session_excerpt">{{SessionDetails}}</div>
<div class="session_title_list">
<span class="ti-bookmark"></span>
<div class="session_title_item">{{TrackDescription}}</div>
</div>
</div>
</div>
</li>
{{else}}
<li class="no-sessions">There are no session yet.</li>
{{/if}}
{{/each}}
</ul>
</div>
<script type='text/javascript'>
$(document).ready(function($) {
$('.accordion').on('click', function() {
$parent_box = $(this).closest('.accordion-panel');
//$parent_box.siblings().find('.panel').slideUp(500);
$parent_box.siblings().find('.icon').removeClass('down');
$parent_box.find('.panel').slideToggle(500);
$parent_box.find('.icon').toggleClass('down');
});
$('ul.scheduleday_wrapper li .session_content_wrapper').on('click', function(ev) {
    ev.preventDefault();
    jQuery(this).next().toggleClass('hide');
});
$(".session_filters a").click(function(){
jQuery(".session_filters a").removeClass("active");
jQuery(this).addClass("active");
currentSessionType=jQuery(this).attr("data-filter");
jQuery(".individual-session").hide();
jQuery(".individual-session[data-track='"+currentSessionType+"'").show();
individualSession = jQuery('.individual-session');
if(currentSessionType == 'All'){
jQuery(".individual-session").show();
}
});
});
</script>

If you want to check & conditionally render if there are no sessions, shouldn't you do the length check on your Sessions instead of the TrackDescription?

Added this snippet of jQuery to check if all li had a style of display: none. If all li have display: none, show message li else hide message li.
if($('.scheduleday_wrapper').children(':visible').length == 0){
jQuery(".no-sessions").show();
}
else{
jQuery(".no-sessions").hide();
}

How to select value of dropdown with ul

Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?

First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>

Always one selected on list <li>

I have an input and users list. This input is a search box, so every time I type on the input it changes the users list reactively. How do I achieve that there's always one selected on the users list preferably the first list item then if I hover to other the selected changes and leaves to where I last hovered on. This is my html code:
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
This needs javascript, cause I wanted to know which is selected. So I can get its data. Also can use up and down keys in changing selection. Doesn't have to be a code that works. Maybe just help me with the logic and give me some pseudocode.

Try using css :hover , :not()
ul li:hover {
background: grey;
}
ul:hover li:first-child:not(:hover) {
background: transparent;
}
ul li:nth-of-type(1) {
background: grey;
}
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text"/>
<div id="userList ">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>

another approach js wise would be...
create a css class
.selected{
/* css for selected class */
}
On page load, add this to first-child
$("some-first-child").addClass("selected")
on selecting any other class, remove it from above li and add it to new li class.
To setup a default, you can search for this class in html body
In case $('body').hasClass doesnt return true, you can always add it back toh the first li child.

Jquery search
$("input").on('input', function() {
var val = $(this).val().toUpperCase();
$("#userList li").each(function() {
if ($(this).text().trim().toUpperCase().indexOf(val) > -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type="text">
<div id="userList">
<ul>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>

You want like this.
<style>
.active{
background: gray;
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("ul li").mouseover(function(){
$("ul li").removeClass("active");
$(this).addClass('active');
});
});
</script>
<div class="user-container">
<input class="form-control user-search" placeholder="Search by name" type=“text">
<div id="userList">
<ul style="width:100px;">
<li class="active">
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
<li>
Bob
</li>
<li>
Charlie
</li>
<li>
Foxtrot
</li>
</ul>
</div>
</div>
with up and down key working.. I am working on this wait.

hide and show doesn't work with hover()?

I can see the hover() is working but it doesn't hide and show the contact_numbers class? What's wrong in my code?
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').remove()
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<li>999</li>
<li>888</li>
</div>
</li>

because of wrong Dom structure in your html
<ul> is missing inside <div class="contact_numbers"> how can a <li> start without <ul>
and in your question you write
hide and show doesn't work with hover()? than why .remove() in your code
if you want to hide your element use .hide() see my code
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log($(this).find('.contact_numbers'))
}, function() {
//$(this).find('.contact_numbers').remove() // this will remove element
$(this).find('.contact_numbers').hide() // this will hide
console.log('out')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<ul>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>

Your HTML is broken, you are missing <ul> tag. Try this code:
$(function() {
$("#hdCallUs").hover(function() {
$('.contact_numbers').show(); <!-- changed this -->
}, function() {
$('.contact_numbers').hide()
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers" style="display:none">
<ul> <!-- added this -->
<li>999</li>
<li>888</li>
</ul>
</div>
</li>

Seems like you are removing the element on hover out.
$(this).find('.contact_numbers').remove();
Is it expected? To hide element change this to:
$(this).find('.contact_numbers').hide();

I don't understand the structure of your html (li inside a div without ul?) but you can achieve this without javascript and just css like this:
.contact_numbers{
display: none;
}
#hdCallUs:hover .contact_numbers{
display: block;
}

That's because you have invalid html. You have to wrap your second level lis inside ul. li cannot have lis as its children and also, display:none; to your contact_numbers + do not remove it on hover out, instead just hide it. remove removes it permanently from DOM.
$(function() {
$("#hdCallUs").hover(function() {
$(this).find('.contact_numbers').show();
console.log('in')
}, function() {
$(this).find('.contact_numbers').hide()
console.log('out')
});
});
.contact_numbers{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="hdCallUs">
<span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>

You have wrong html markup in your body which is rendered differently as compared to what you expect. Below is the rendered html:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers"></div>
</li>
<li>999</li>
<li>888</li>
</ul>
So clearly the .contact_numbers div doesn't have anything to hide and show and probably this is the reason why you are not getting expected results. Correct your html and then try.
You can check the rendered html in the console in this demo
Demo: http://jsfiddle.net/GCu2D/929/
Make sure you use .hide() and .show() or .toggle() as in this demo:
Demo with correct markup: http://jsfiddle.net/GCu2D/930/
JS:
$(function () {
$("#hdCallUs").hover(function () {
$(this).find('.contact_numbers').show();
console.log('in', $(this).find('.contact_numbers'))
}, function () {
$(this).find('.contact_numbers').hide()
console.log('out', $(this).find('.contact_numbers'))
});
});
HTML:
<ul>
<li id="hdCallUs"> <span class="glyphicon glyphicon-earphone"></span>
<span class="call_txt">Call Us Now</span>
<div class="contact_numbers">
<ul>
<li>999</li>
<li>888</li>
</ul>
</div>
</li>
</ul>

Javascript toggle menu -issue with sub-menues

I'm working on a responsive menu for a quite complex website. The horizontal menu collapses to a vertical one for smaller screens and I've used javascript to toggle the sub-menu items open/closed when clicked.The product section is the only sub-menu that has another sub-menu a level deeper and it's not quite working for it as only the third level items close again on click, but not the parent item.
Here's the code
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
And the javascript :
if ($(window).width() <= 760) {
$('li.nav-list_item').click(function(){
$('li.nav-list_item').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
}
I think it might be because when the parent item (products) is clicked the ul close as specified in the javascript but the nav-title items (Purpose/ Series) are still open and can't be closed. I've been trying to work this out but just can't get it to work that when the title items are being clicked the third level menu closes and when the parent item(Products) is clicked the title items close. Any suggestions?

First off, I do not know how to debug your code as what you provided is not a working example. Head over to Codepen and create a pen where we can reproduce the issues.
Apart from that it is possible to implement the navigation with css only using hidden radio buttons or active states.

$('li.nav-list_item a, .nav-title').on('click', function(e){
e.preventDefault();
var el = $(this);
el.parent().siblings().find('> .dropdown:visible, > ul:visible').toggle();
el.parent().find('> .dropdown, > ul').toggle();
});
#nav-list .nav-list_item {
display: block;
}
#nav-list .nav-list_item .dropdown{
display: none;
}
#nav-list .nav-list_item .dropdown .drop-section ul {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="navigation">
<ul id="nav-list">
<li class="nav-list_item nav-about">About us
<div id="about-drop" class="dropdown">
<ul>
<li>....</li>
<li>....</li>
</ul>
</div>
</li>
<li class="nav-list_item nav-products">Products
<div id="prod-drop" class="dropdown">
<div id="subnav_products1" class='targetDiv'>
<div class="drop-section">
<h5 class="nav-title">Purpose</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div class="drop-section">
<h5 class="nav-title">Series</h5>
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
I added Fiddle for you. Also next time better add fiddle for other developer to help you more quickly.