We Keep Coding

jQuery and HTML how to use storage in a dropdown menu

I have a question for you.
I have a sidebar with a dropdown "toggle buttons". The code HTML are the following.
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item" id="sidebar">
<a class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1" href="#firstSubmenu" data-toggle="collapse"
aria-expanded="false" class="dropdown-toggle">Performance Monitoring<span data-feather="plus-circle"></span></a>
<ul class="collapse list-unstyled" id="firstSubmenu">
<li>
<a class="nav-link" href="#">
<span data-feather="monitor"></span>
Dashboard</a>
</li>
<li>
<a class="nav-link" href="/conto_economico">
<span data-feather="trending-up"></span>
Conto Economico</a>
</li>
....
All works perfectly, but If I open my dropdown menu and after I update or change the url page, the dropdown menu collapse and I'm force do open it again.
So I looked for a jQuery code that give me the possibility to achive my aim. I fund that it's possibile to use localStorage to memorize if a dropdown menu is open or not and when upload the page give the same opened and closed dropdown menu.
I have tried to adapt the code for my aim, but I'm not good at jQuery code. I have tried the following code but does not work
$("#sidebar li a").on("click", function() {
// get index of parent `<li>` within it's siblings
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
localStorage.setItem("sidebar_selected", selected_item_index);
});
$(function() {
$("#sidebar li").eq(parseInt(localStorage.getItem("selected_item_index "))).addClass("active").siblings().removeClass('active');
});

You have set the container as li element and you are trying to find its index in set of anchor element. You need to instead find the index in set of li element. like this
var container = $(this).closest("li");
var selected_item_index = $("#sidebar li").index(container);
Also, You may want to remove the active class from other sibling elements after setting the li class active using setStorage. Also, the keyname used for getstorage and setstorage are different. They should be same instead
$("#sidebar li").eq(parseInt(localStorage.getItem("sidebar_selected "))).addClass("active").siblings().removeClass('active');

UI bootstrap dropdown toggle needs to be clicked twice if closed manually

I am using UI Bootstrap drop-down component to show angular-bootstrap-datetimepicker calendar on click. I have also added a $watch to close the dropdown after date is selected.
Plunker
<div uib-dropdown id="calendar1">
<h4>
<a uib-dropdown-toggle id="calendar1-toggle" href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }"></datetimepicker>
</ul>
</div>
$scope.$watch('date', function(newValue){
angular.element(document.getElementById('calendar1')).removeClass('open');
})
The removeClass('open') worked but also brought a new issue. After you selected a date (removeClass('open') called) you have to click the dropdown toggle twice to make it open.
I looked into uib source code, did some digging and tried the following:
window.angular.element(document.getElementById('calendar1')).removeClass('open');
window.angular.element(document.getElementById('calendar1-toggle'))
.removeClass('collapse')
.addClass('collapsing')
.attr('aria-expanded', false)
.attr('aria-hidden', true);
But I still had to press toggle twice. What am I doing wrong?

Manually changing classes is not how you open/close a uib-dropdown why are you doing it that way? The docs clearly show the is-open attribute for hiding/showing the dropdown:
Markup:
<div uib-dropdown id="calendar1" is-open="dropdownOpen">
<h4>
<a uib-dropdown-toggle href="">Select Date <b class="caret"></b>
</a>
</h4>
<ul uib-dropdown-menu>
<datetimepicker data-ng-model="date" data-datetimepicker-config="{ startView:'month', minView:'month' }">
</datetimepicker>
</ul>
</div>
Script:
$scope.$watch('date',function(newValue){
//angular.element(document.getElementById('calendar1')).removeClass('open')
$scope.dropdownOpen = false;
});
Plunker: https://plnkr.co/edit/touxnNRmnsefAMScCprC?p=preview

Collapse responsive nav when clicking link

I'm trying to get my responsive navigation to collapse when clicking a navigation item (link).
This is my navigation:
<nav class="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav-toggle"></li>
</ul>
</nav>
Here's how the responsive nav gets expanded:
<script>
function myFunction() {
document.getElementsByClassName("nav")[0].classList.toggle("responsive");
}
</script>

I'm not sure why you're mixing old school list tags with the modern Nav because you don't need them.
If you want the menu to collapse upon selection you can use this neat technique:
<nav style="position:absolute; left:20px; top:50px;">
<div onclick="TheBox.removeAttribute('open');">
<details id="TheBox"><summary>Choices</summary>
Home<br>
About<br>
Products<br>
Services<br>
Contact
</div></details></nav>

It looks like you want to hide the navigation when the toggle link is clicked. If so, I would do the following. Note that your <a> tags were outside the <li> tags, I've moved them inside.
<nav id="nav">
<ul>
<li class="nav-item">Overview</li>
<li class="nav-item">Amenities</li>
<li class="nav-item">Residences</li>
<li class="nav-item">Neighborhood</li>
<li class="nav-item">Availability</li>
<li class="nav-item">Contact</li>
<li class="btn login">Login</li>
<li class="nav0item">Toggle</li>
</ul>
</nav>
I would target by ID and not class, and set the display to none.
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
Since your toggle is on a <li> inside the nav, your navigation menu (and the toggle) will be hidden when activated. So, I'd make a way to show it again. You could, for instance, add this function in your JS.
function showNav() {
document.getElementById('nav').style.display = "block";}
And then add a link somewhere for the user to show the menu again.
<button onclick="showNav();" >Show Menu</button>
If you go that route, I'd also hide the Show Menu button by default by adding id="shownav" style="display: none;" to hide it initially. And then have your collapseNav function also show the button:
document.getElementById('shownav').style.display = "block";

Thank you for your responses.
This is what I was looking for:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
Now the "responsive" class gets removed when clicking on a navigation item or the logo, so my navigation returns to collapsed mode.

Protractor - Select from Bootstrap Dropdown

I have a Bootstrap single-button dropdown and I would like to click on one of the options appearing in the dropdown using Protractor. How do I accomplish this?
<div class="btn-group" ng-if="!persist.edit" dropdown>
<button type="button"
class="btn btn-default"
dropdown-toggle>
<span translate="GENERAL.ACTIONS"></span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- Check In -->
<li role="presentation">
<a ng-click="checkIn()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_IN">
</a>
</li>
<!-- Check Out -->
<li role="presentation"">
<a ng-click="checkOut()"
role="menuitem"
tabindex="-1"
translate="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"
translate-value-length="1">
</a>
</li>
</ul>
</div>
I tried this (dropdown is called, but click fails):
it('Should click Actions button and show dropdown', function(){
element(by.buttonText("Actions")).click();
browser.sleep(1000);
});
it('Should click the Check Item Out dropdown option and change status to checked out', function(){
element(by.css('[value="ITEMS.LIST.BUTTON_CHECK_ITEM_OUT"]')).click();
});

First, click the "dropdown toggle" button to open up the dropdown. Then, select an option:
var dropDown = element(by.css("div[dropdown]"));
dropDown.element(by.css("button[dropdown-toggle]")).click();
dropDown.element(by.css("a[ng-click*=checkIn]")).click(); // Check In
Working code:
element(by.buttonText("Actions")).click();
element(by.css('[ng-click="]checkIn()"]')).click(); // Check In

A clean solution to select from Bootstrap Dropdown is to click by buttonText and then by linkText:
element(by.buttonText('your button')).click();
element(by.linkText('your selection')).click();

Issues adding .editable function to a .sortable list

Here is my Fiddle I am currently working with. http://jsfiddle.net/Nemi9/76JPk/29/
I want keep everything sortable, but want to add the editable function to all the ul on a click or mouse down. I am currently trying to make each list and any new items added to each list .editable they are currently all .sortable. The top code is the code I am currently using to try to make lines 17- 45 in HTML editable when clicked on. I want the person to be able to click on each listed item and add their own text inside the field.
I put contenteditable= true into each list id
These lines below are 63- 66 in .JS
var editable1 =$("#names,#homes,#purchased").editable();
$("#names,#homes,#purchased",editable1).click(function(ev){
$("#names,#homes,#purchased").input(type=submit)
Here is my current HTML
<div class="box1">
<h3>Needed Items</h3>
<ul id="names" contenteditable="true"/>
<li class="ui-state-default">Carrot</li>
<li class="ui-state-default">Onion</li>
<li class="ui-state-default">Water</li>
</ul>
</div>
<div class="box2">
<h3>Home Items</h3>
<ul id="home" contenteditable="true"/>
<li class="ui-state-default">Cookies</li>
<li class="ui-state-default">Milk</li>
<li class="ui-state-default">Chicken</li>
</ul>
</div>
<div class="box3">
<h3>Purchased Items</h3>
<ul id="purchased" contenteditable="true"/>
<li class="ui-state-default">Potato</li>
<li class="ui-state-default">Rum</li>
<li class="ui-state-default">Coke</li>
</ul>
</div>