We Keep Coding

Set active class when page refreshes JQuery?

I have a UL on my page which is acting as navigation (it works fine). I copied some jQuery code to keep the classes as they are on page reload (through location.reload()) but can't set it up as I don't know much javascript.
and my HTML code :
<!-- TABS NAVIGATION -->
<div id="tabs-nav">
<div class="row">
<div class="col-lg-12 text-center">
<ul id="myTab" class="tabs-1 ico-55 red-tabs clearfix">
<!-- TAB-1 LINK -->
<li class="tab-link current" data-tab="tab-1">
<span class="flaticon-pizza"></span>
<h5 class="h5-sm">Pizze</h5>
</li>
<!-- TAB-2 LINK -->
<li class="tab-link " data-tab="tab-2">
<span class="flaticon-burger"></span>
<h5 class="h5-sm">Panini</h5>
</li>
</ul>
</div>
</div>
</div>
<!-- END TABS NAVIGATION -->
<!-- TABS CONTENT -->
<div id="tabs-content">
<?php include_once "inc/db_connect.php"; ?>
<!-- TAB-1 CONTENT -->
<div id="tab-1" class="tab-content current">
<table class="editableTable sortable">
<!-- sql query -->
</table>
</div>
<!-- END TAB-1 CONTENT -->
<!-- TAB-2 CONTENT -->
<div id="tab-2" class="tab-content">
<div class="row">
<!-- database query -->
</div>
</div>
<!-- END TAB-2 CONTENT -->
</div>
<!-- END TABS CONTENT -->
the way I intend to use location.reload
$(document).ready(function () {
$('.editableTable').SetEditable({
onAdd: function () {
$.ajax({
type: 'POST',
url: "action.php",
dataType: "json",
data: { action: 'add' },
success: function () {
location.reload();
},
});
}
});
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $(e.target).class('current'));
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
$('#myTab li[href="' + activeTab + '"]').tab('show');
}
});

Saving $(e.target).class('current') won't work. There is no .class() method...
It seems you wish to use the href to open the tab... But there is no href!
So I think you should use the data-tab.
$(document).ready(function(){
console.log("Page just loaded")
$('li').on('show.bs.tab', function(e) {
localStorage.setItem('activeTab', $("li.current").data('tab')); // Change is here -- Save the data-tab value
console.log("a data-tab value was saved to localStorage")
});
var activeTab = localStorage.getItem('activeTab');
if(activeTab){
console.log("There is an activeTab value stored:" , activeTab)
// Loop all li to find the one having a data-tab == activeTab
$('#myTab li').each(function(){
if($(this).data("tab") === activeTab){
$(this).tab('show');
}
});
}
})

How can show and hide a <li> inside the panel?

I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.This are the voice that I'd like to display or not in order users permission.
<li id="company" display="none">
<a href="/aziende/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
<li id="users" display="none">
<a href="/users/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">person</i>
<i class="material-icons md-only">account_circle</i>
</div>
<div class="item-inner">
<div class="item-title">Users</div>
</div>
</div>
</a>
</li>
this is app.js
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
if(user.checkPermission() == 'true'){
app.router.navigate('/home/');
}
}
},
},
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
if(user.checkPermission() == 'true'){
addVoicesToNavbar();
}
}
page.router.clearPreviousHistory();
}
},
}
this method said me that Cannot set property ‘display’ of null
function addVoicesToNavbar(){
document.getElementById("company").display = "block";
document.getElementById("users").display = "block";
}

display is not a valid html attribute, it is a CSS property.
So setting display="none" on your <li> in the example doesn't do anything.
Instead in your markup you need to set an inline CSS style like this to initially hide the element:
<li id="users" style="display:none;">
And in your function change that inline CSS style like this to show it:
document.getElementById("users").style.display = "block";

Here is an example of what you could do:
function addVoicesToNavbar(){
companyElement = document.getElementById("company");
companyElement.style.display = "block";
...
}
Hope it helps!

No Console Log Output When Clicking Plus Icon in Unordered List

I have an ul (unordered list) which contains several li (list items) when I click on the + sign left to li, console log should output "description expanded" For the two first li, it works just fine, but not for any other li's. The html code by default includes only 2 li's. any li after that is added through the form. However, any new li does not produce the console log output. Which means they're not responding to clicks. I'm using jQuery to listen for click events. When clicking on the icon.
project link http://pctechtips.org/apps/todo/
//variables
//todoList array to hold (title, description) for every todo tiem
var todoList = []; //{title: "value", desc: "value"},
var numId = 2; //num is for desc paragraph id eg <p id="plus-3">
/*
* Script main body
*/
$(document).ready(function() {
//hide form when doc loads first time
$("#submit-form").hide();
//hide list item description <p>
$(".item-desc").hide();
//listener for show hide form functionality
$("#add-todo").click(function() {
toggleForm();
return false; //return false to prevent page reload
});
//listener for add new item form (submit button)
$(".btn").click(function() {
console.log("submit item");
addToList();
});
//listener for expanding li description
$(".plus").click(function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
});
//functionality for show / hide form
function toggleForm() {
if($("#submit-form").is(":hidden")) {
console.log("form exapnded");
$("#submit-form").show("slow");
$("#form-icon").removeClass("fa-plus-square-o");
$("#form-icon").addClass("fa-minus-square-o");
}
else {
console.log("form hidden");
$("#submit-form").hide("slow");
$("#form-icon").removeClass("fa-minus-square-o");
$("#form-icon").addClass("fa-plus-square-o");
}
}
//add new item to todo list items
function addToList() {
numId++;
//getting data from input fields
var todoTitle = $("#todo-title").val();
var todoDesc = $("#todo-desc").val();
//checking user input
if(todoTitle == "" || todoDesc == "") {
alert("fill in all fields!");
}
else {
console.log(todoTitle + "\n" + todoDesc);
//adding values to array
todoList.push({title: todoTitle, desc: todoDesc},);
//adding new li to ul
var ul = document.getElementById("list");
var li = document.createElement("li");
$(li).addClass("list-group-item justify-content-between align-items-center");
$(li).append(($('<i id="plus-'+numId+'" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>')));
$(li).append(($('<span class="left marg-left">'+todoTitle+'</span>')));
$(li).append(($('<i class="fa fa-trash-o right" aria-hidden="true"></i>')));
$(li).append(($('<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>')));
ul.appendChild(li);
}
}
//expanding description under for each todo
function showDescription(plusId) {
//getting the number from id
var num = plusId.substring(plusId.indexOf("-")+1);
//checking for hide / show description paragraph
if($("#desc-"+num).is(":hidden")) {
$("#desc-"+num).show("slow");
$("#desc-"+num).removeClass("fa-plus-square-o");
$("#desc-"+num).addClass("fa-minus-square-o");
}
else {
$("#desc-"+num).hide("slow");
$("#desc-"+num).removeClass("fa-minus-square-o");
$("#desc-"+num).addClass("fa-plus-square-o");
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>TodoList App</title>
<!-- bootstrap, fontawsome cdn -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- local stylesheet -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- jquery cdn -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<!-- local javascript -->
<script type="text/javascript" src="js/todo.js"></script>
</head>
<body>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-drak bg-dark mb-4">
<a class="navbar-brand" href="#"><i class="fa fa-thumb-tack" aria-hidden="true"></i> Todo<strong>List</strong></a>
</nav>
<!-- /navbar -->
<!-- todoList -->
<div class="container">
<div class="add-item text-white text-center col-sm-12 col-md-10 col-lg-8 mb-4">
<a id="add-todo" class="new-todo text-white text-center" href=""><i id="form-icon" class="fa fa-plus-square-o" aria-hidden="true"></i> Enter new todo item</a>
<div id="submit-form" class="form-hide text-center col-sm-12 col-md-12 col-lg-8">
<form class="">
<div class="form-group">
<input type="text" class="form-control" id="todo-title" placeholder="Todo Title" value="Pay Car Insurance">
</div>
<div class="form-group">
<input type="text" class="form-control" id="todo-desc" placeholder="Todo Description" value="This is to pay car insurance">
</div>
<button type="button" class="btn btn-primary btn-lg col-12">Submit Todo</button>
</form>
</div>
<!-- horizontal line -->
<hr>
<!-- list items -->
<h1 class="heading-4">Todo List Items</h1>
<ul id="list" class="list-group mt-4 pb-4">
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-1" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span>
<i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-1" class="item-desc bg-white">Helloooooooooo this is description</p>
<li class="list-group-item justify-content-between align-items-center">
<i id="plus-2" class="plus fa fa-plus-square-o left" aria-hidden="true"></i>
<span class="left marg-left">Pay Car Insurance </span><i class="fa fa-trash-o right" aria-hidden="true"></i>
<i class="fa fa-pencil right marg-right pr-2" aria-hidden="true"></i>
</li>
<p id="desc-2" class="item-desc bg-white">Helloooooooooo this is description</p>
</ul>
</div>
</div>
</body>
</html>

ok for dynamically added elements the even listener needs to be defined at the root / document level. so
$("class").on("click", function() { });
will not work. It needs to be
$(document).on("click", ".class", function() { });
Thanks to "MADDY BLACKLISTED" above pointed me in right directions

Use
$(document).on("click", ".plus", function() {
console.log("description expanded")
var plusId = $(this).attr("id"); //grabbing id of plus sign
showDescription(plusId);
return false;
});
Instead of having a static click listener defined at document load.

Datatables header align when sidebar is collapsed: trigger class change

I'm using datatables with scrollY actived and AdminLTE2 theme:
acquisitionTable = $('#acquisitionsTable').DataTable({
responsive: true,
// "bLengthChange": false,
deferRender: true,
scrollY: '60vh',
scrollCollapse: true,
scroller: true,
the problem is the header align when sidebar is collapsed
and this problem is widespread but all the solutions that I tryed have failed.
I thought to call acquisitionTable.columns.adjust(); but how can I catch the collapse and expand events?
This is the sidebar:
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img th:src="#{/static/assets/dist/img/fca.jpg}" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p sec:authentication="principal.name"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li><a th:href="#{/}"> <i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a></li>
<li sec:authorize="hasRole('ROLE_ADMIN')" class="treeview"><a
href="#"> <i class="glyphicon glyphicon-cog"></i> <span>Administration</span>
<span class="label label-primary pull-right">5</span>
....
From the documentation (and I check it with debug mode) when the sidebar is collapsed the class .sidebar-collapse is added to body tag.
Thanks

At the moment I fixed the problem with this code:
divW = jQuery("#contentAreaId").width();
setInterval(function(){
var w = jQuery("#contentAreaId").width();
if (w != divW) {
acquisitionTable.columns.adjust();
divW = w;
}
},100);

Have you tried css min-width option, such as :
.dataTables_scrollHead table {
min-width: 100%;
}
also you may want to add :
table-layout: fixed;

on click generate anew tab using jquery

there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});

If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();