Develop Reference

How to display a new screen value when button is clicked in javascript

I am trying to create a page to add a new user when click into a value on menu bar like an Add option that allows users to input a name, an office number, and a phone number
Here is my code:
let menu = ["View", "Add", "Verify", "Update", "Delete"];
let list = document.getElementById("menuList");
menu.forEach((item) => {
let li = document.createElement("li");
li.innerText = item;
list.appendChild(li);
});
let users = [
{ name: "Jan", id: "1", number: "111-111-111" },
{ name: "Juan", id: "2", number: "222-222-222" },
{ name: "Margie", id: "3", number: "333-333-333" },
{ name: "Sara", id: "4", number: "444-444-444" },
{ name: "Tyrell", id: "5", number: "555-555-555" },
];
var div = "<div class='infor'>";
for (var i = 0; i < users.length; i++) {
div += "<div class='user-informations'>";
div += "<p>" + users[i].name + "</p>";
div += "<p>" + users[i].id + "</p>";
div += "<p>" + users[i].number + "</p>";
div += "</div>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;
<div class="contact-container">
<div class="navbar">
<ul id="menuList">
<img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png"/>
</ul>
</div>
<div class="users" id="usersList">
</div>
</div>
my project:

Paying no attention to style or good software engineering practices:
let usersList = document.getElementById("usersList"),
addPage = document.getElementById("addPage");
const users = [
{ name: "Jan", id: "1", number: "111-111-111" },
{ name: "Juan", id: "2", number: "222-222-222" },
{ name: "Margie", id: "3", number: "333-333-333" },
{ name: "Sara", id: "4", number: "444-444-444" },
{ name: "Tyrell", id: "5", number: "555-555-555" },
];
function showUsers() {
usersList.innerHTML = "";
usersList.style.display = "inline";
addPage.style.display = "none";
users.forEach(u => {
const newUser = document.createElement("p");
newUser.innerHTML = `${u.id} ${u.name}<br/>${u.number}`;
usersList.appendChild(newUser);
})
}
function addOn() {
usersList.style.display = "none";
addPage.style.display = "inline";
}
function addUser() {
const id = document.getElementById("id").value;
const name = document.getElementById("name").value;
const number = document.getElementById("number").value;
users.unshift({ name: name, id: id, number: number});
showUsers();
}
showUsers();
.navbar { vertical-align: top; padding-right: 1rem; border-right:solid 1px red }
<div class="contact-container">
<table>
<tr>
<td class="navbar">
<ul id="menuList" style="cursor:pointer">
<img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
<li onclick="showUsers()">View</li>
<li onclick="addOn()">Add</li>
<li>...</li>
</ul>
</td>
<td>
<div class="users" id="usersList"></div>
<div id="addPage" style="display:none">
Id: <input id="id" size="1"/> Name: <input id="name" /><br/>
Number: <input id="number" /><br/>
<button onclick="addUser()">Add</button>
</div>
</td>
</tr>
</table>
</div>
It is not necessary to generate the menu list dynamically unless the menu is really dynamic.
Ask if you need explanation on any of the stuff above.

Dynamic menu with jQuery json data

I have tried this but it doesn't work. I'm trying to make Dynamic Menu from jQuery json data. I have insert preview below.
I'm working on fully custom UI, so I plan not to use jQuery.UI.
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
},{
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]};
var getMenuItem = function (itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: itemData.link,
class: 'submenu-title',
}));
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
$.each(itemData.sub, function () {
subList.append(subMenuItem(this));
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function () {
$menu.append(
getMenuItem(this)
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>
Below is the output I needed.
<li class="has-children" id="ID">
<a id="ID-links" href="links">Women Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>
<li class="has-children" id="ID">
<a id="ID-links" href="links">Men Clothing</a>
<ul class="cd-secondary-dropdown is-hidden">
<li class="go-back"><a>Back</a></li>
<li class="has-icon"><a class="submenu">submenu 1</a></li>
<li class="has-icon"><a class="submenu">submenu 2</a></li>
<li class="has-icon"><a class="submenu">submenu 3</a></li>
<li class="has-icon"><a class="submenu">submenu 4</a></li>
<li class="has-icon"><a class="submenu">submenu 5</a></li>
</ul>
</li>

You were not using $.each function as you were supposed. you are passing this as args to your function. this will undefined in the function getMenuItem
In you $.each function you need to have args as index and data. Index return the number of each key in you JSON & data is the one you need to pass to your function.
Also in your cd-secondary-dropdown you need to add ul only once and not in $.each.
I have fixed up your code and is exactly working as you wanted in your output above.
Run snippet below to see it working.
var data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
}, {
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]
};
var getMenuItem = function(itemData) {
var item = $("<li>", {
class: 'has-children',
id: itemData.id
}).append(
$("<a>", {
href: itemData.link,
html: itemData.name,
id: itemData.id + '-links',
}));
if (itemData.sub) {
//Add UL once only
var subList = $("<ul>", {
class: 'secondary-dropdown',
});
//Append go back
var goBack = $("<li>", {}).append(
$("<a>", {
href: '',
html: 'Go back',
class: 'go-back',
}));
//Append go back
subList.append(goBack);
$.each(itemData.sub, function(index, data) {
//Sub menu
var subMenuItem = $("<li>", {
class: 'has-icon'
}).append(
$("<a>", {
href: data.link,
html: data.name,
class: 'submenu-title',
}));
subList.append(subMenuItem);
});
item.append(subList);
}
return item;
};
var $menu = $("#Menu");
$.each(data.menu, function(index, data) {
$menu.append(getMenuItem(data));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="Menu"></ul>

is this what you are trying to do? if yes, this is a way of doing it without jQuery
let data = {
menu: [{
name: 'Women Cloth',
link: '0',
sub: null
},{
name: 'Men Cloth',
link: '1',
sub: [{
name: 'Arsenal',
link: '0-0',
sub: null
}, {
name: 'Liverpool',
link: '0-1',
sub: null
}, {
name: 'Manchester United',
link: '0-2',
sub: null
}]
}]};
const MENU_COMPONENT = document.querySelector('#Menu');
for (const field in data.menu) {
const LI= document.createElement('li');
LI.setAttribute('class', 'has-children');
MENU_COMPONENT.appendChild(LI);
const LINK = document.createElement('a');
LINK.setAttribute('href', data.menu[field].link);
LINK.innerText = data.menu[field].name;
LI.appendChild(LINK);
const UL = document.createElement('ul');
UL.setAttribute('class', 'cd-secondary-dropdown is-hidden');
LI.appendChild(UL);
let SUBLEVEL_DATA = data.menu[field].sub;
for (const sub in SUBLEVEL_DATA) {
const SECOND_LEVEL_LI = document.createElement('li');
SECOND_LEVEL_LI.setAttribute('class', 'has-icon');
UL.appendChild(SECOND_LEVEL_LI);
const SECOND_LEVEL_LINK = document.createElement('a');
SECOND_LEVEL_LINK.setAttribute('href', SUBLEVEL_DATA[sub].link);
SECOND_LEVEL_LINK.className = 'submenu';
SECOND_LEVEL_LINK.innerText = SUBLEVEL_DATA[sub].name;
SECOND_LEVEL_LI.appendChild(SECOND_LEVEL_LINK);
}
}
<ul id="Menu"></ul>

VueJs recursive infinite v-for loop

I'm trying to achieve a hierarchy tree where I have a user list and for each of them I set a "senior", so it defines who the senior is. This is how I'm trying to solve the problem:
This is what I'm doing:
data(){
return{
users: [{
id: 1,
fname: 'Joe',
lname: 'Smith',
title: 'Super-Senior',
senior_id: 0,
}, {
id: 2,
fname: 'Bill',
lname: 'Simons',
title: 'Junior-1',
senior_id: 0,
}];
}
},
methods: {
juniors(senior) {
return this.users.filter((user) =>
user.senior_id == senior.id
);
}
}
Then the component tree:
<ul>
<li v-for="chief in juniors(snr_chief)">
<div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
</div>
<ul>
<li v-for="second in juniors(chief)">
<div class="child mx-1">{{second.lname}} {{second.fname}}<br /> <small>{{second.title}}</small>
</div>
<ul>
<li v-for="third in juniors(second)">
<div class="child mx-1">{{third.lname}} {{third.fname}}<br /> <small>{{third.title}}</small>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This works perfectly, but of course goes as far as 3 levels down.
I actually don't know how many levels deep the user may go.
So the idea is to have a recursive component but I don't know how to implement it. Something like:
<ul>
<li v-for="chief in juniors(snr_chief)">
<div class="child mx-1">{{chief.lname}} {{chief.fname}}<br /> <small>{{chief.title}}</small>
</div>
<Repeater :juniors="snr_chief" :self="chief" />
</li>
</ul>

function listToTree(data, options) {
options = options || {};
var ID_KEY = options.idKey || 'Id';
var PARENT_KEY = options.parentKey || 'ParentId';
var CHILDREN_KEY = options.childrenKey || 'Items';
var item, id, parentId;
var map = {};
for(var i = 0; i < data.length; i++ ) { // make cache
if(data[i][ID_KEY]){
map[data[i][ID_KEY]] = data[i];
data[i][CHILDREN_KEY] = [];
}
}
for (var i = 0; i < data.length; i++) {
if(data[i][PARENT_KEY]) { // is a child
if(map[data[i][PARENT_KEY]]) // for dirty data
{
map[data[i][PARENT_KEY]][CHILDREN_KEY].push(data[i]); // add child to parent
data.splice( i, 1 ); // remove from root
i--; // iterator correction
} else {
data[i][PARENT_KEY] = 0; // clean dirty data
}
}
};
return data;
}
Vue.component('menu-tree', {
props: ['item'],
template: '<ul class="c-tree"><li>{{item.MenuName}}<menu-tree v-for="y in item.Items" v-bind:item="y"></menu-tree></li></ul>'
})
var app = new Vue({
el:"#app",
data:{
items:[{
Id: 1,
MenuName: "Menu 1",
ParentId: null
},
{
Id: 2,
MenuName: "Menu 2",
ParentId: null
},
{
Id: 3,
MenuName: "Menu 3",
ParentId: null
},
{
Id: 4,
MenuName: "Sub Menu 1 - 1",
ParentId: 1
},
{
Id: 5,
MenuName: "Sub Menu 1 - 2",
ParentId: 1
},
{
Id: 6,
MenuName: "Sub Menu 1 - 1 - 1",
ParentId: 4
},
{
Id: 7,
MenuName: "Sub Menu 1 - 1 - 1 - 1",
ParentId: 6
}],
heirarchyItems: []
},
created: function(){
this.heirarchyItems = listToTree(this.items);
}
});
.c-tree{
list-style: none;
}
.c-tree > li {
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<menu-tree v-for="hItem in heirarchyItems" v-bind:item="hItem"></menu-tree>
</div>

Observable Array and foreach Lists

I have this code:
<select multiple="multiple" data-bind="options:markerResults, optionsText: function(item) {
return item.name +' '+ item.formatted_address
}">
</select>
And it works. But, This code:
<ul data-bind="foreach: markerResults">
<li>
<stong><span data-bind:"text: name"></span></strong>
<span data-bind:"text: formatted_address"></span>
<span data-bind:"text: rating"></span>
</li>
</ul>
Doesn't. How can I make the code above work?
Thank you!
more code:
for (var j = 0; j < allResults.length; j++) {
createMarker(allResults[j]);
allResults.push(results);
console.log(allResults);
}
}

here is the fiddle http://jsfiddle.net/LkqTU/32252/
function model() {
var self = this;
this.text = ko.observable('hello');
this.markerResults = ko.observableArray([
{ name: "Bungle", formatted_address: "1 My Way", rating: 'A' },
{ name: "George", formatted_address: "2 My Way", rating: 'B' },
{ name: "Zippy", formatted_address: "3 My Way", rating: 'C' }
]);
}
var mymodel = new model();
$(document).ready(function() {
ko.applyBindings(mymodel);
});
here is the html
<ul data-bind="foreach: markerResults">
<li>
<strong><span data-bind="text: name"></span></strong>
<strong><span data-bind="text: formatted_address"></span></strong>
<strong><span data-bind="text: rating"></span></strong>
</li>
</ul>

how to get jquery select drop-down multiple value?

My multiselect dropdown as below
<div class="col-sm-3 text-left form-group form-group000 form-horizontal" >
<span class="btn-block dropdown-checkbox-example dropdown-checkbox dropdown btn-gray"> </span>
</div>
Jquery code like:
<script src="js/bootstrap-dropdown-checkbox.js"></script>
function list(want, checked) {
var result = [];
for (var i = 0; i < size; i++) {
result.push({
id: i,
label: 'Item #' + i,
isChecked: checked === undefined ? !!(Math.round(Math.random() * 1)) : checked
});
}
return result;
}
var widget, alt;
var tab = [
{ id: "1", label: "Buy.", isChecked: false },
{ id: "2", label: "Sale", isChecked: false },
{ id: "3", label: "Rent", isChecked: false }
];
$('.dropdown-checkbox-example').dropdownCheckbox({
data: tab,
autosearch: true,
title: "My Dropdown Checkbox",
hideHeader: false,
showNbSelected: true,
templateButton: '<a class="dropdown-checkbox-toggle btn-block btn btn-default pad-space4" style=" text-decoration:none;" data-toggle="dropdown" href="#"><span style="color:#000">I want to</span> <span class="dropdown-checkbox-nbselected"></span><b class="caret"></b>'
});
My Issue is I want add selected value in database. so how to get dropdown selected value in Request.?