Develop Reference

Create second or next <li> under default <li> after reload page | jQuery, LocalStorage

I try to create LocalStorage data for My Folder Creation .
HTML :
This is my default li. I call it All audience folder's
<!-- Result goes here -->
<ul class="nav">
<li>
<div class="zf-folder" style="width: 232px;">
<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_1i5w">
<div class="_icon-col">
</div>
</div>
All Audiences<span class="hyperspan" style="position:absolute; width:100%; height:100%; left:0; top:0;"></span>
</div>
</div>
</div>
</div>
</li>
</ul>
jQuery :
var count = 1;
$(".submitButton").click(function() {
let label = count++;
// make a function that returns the DOM with updated count
function getNewList(foldername) {
var addFolder = '<li>' +
'<div class="zf-folder" style="width: 232px;">' +
'<div class="_tabFolder _itemPosition" style="height: 50px;border-bottom:1px groove; user-select: none;">' +
'<div class="_sideFolder"></div>' +
'<div class="_iconText" style="width: 215px">' +
'<div class="ellipsis">' +
'<div class="_iconFolder">' +
'<div class="_icon-col">' +
'</div>' +
'</div>' +
'<a href="#folder' + label +
'" data-toggle="tab" style="text-decoration: none;">' +
foldername + '<span class="hyperspan" style="width:100%; height:100%; left:0; top:0;"></span></a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</li>';
return addFolder;
}
var inputan = $("#input_nameFolder").val();
// update the result array
var result = JSON.parse(localStorage.getItem("folderList"));
if (result == null) {
result = [];
}
let newfolderHTML = getNewList(inputan);
result.push({
folder: newfolderHTML
});
// save the new result array
localStorage.setItem("folderList", JSON.stringify(result));
// append the new li
$(".nav").append(newfolderHTML); // i want include myDiv
//clear input
$("#input_nameFolder").val('');
});
// on init fill the ul
var result = JSON.parse(localStorage.getItem("folderList"));
if (result != null) {
//get the nav reference in DOM
let nav = $(".nav");
//clear the html contents
nav.html('');
for (var i = 0; i < result.length; i++) {
var item = result[i];
$(".nav").append(item.folder);
}
}
How to adding new <li> tag under my default li (all audience)
after reload page/click run jsfiddle when user input a new value?
You can see after adding an input and reload web / jsfiddle, new input folder's (second li) overwrite all audience (first li).
JSFiddle

you just have to save the initial element upon initialization, see:
// on init fill the ul
var result = JSON.parse(localStorage.getItem("folderList"));
if (result != null) {
//get the nav reference in DOM
let nav = $(".nav");
//clear the html contents
nav.html('');
for (var i = 0; i < result.length; i++) {
var item = result[i];
$(".nav").append(item.folder);
}
} else {
//Save the "All Audiences" content upon empty folderList
let initialElement = [];
initialElement.push({
folder: $('ul.nav').html()
});
localStorage.setItem("folderList", JSON.stringify(initialElement));
}
See: JSFiddle

adding and removing multiple form field

Hi I am sharing my code below. Can anyone help me for small changes.While creating new box the add button is at fixed position.I need make it dynamic.
$(document).ready(
function () {
var max_fields = 6;
var wrapper = $(".items");
var add_button = $(".add-more");
var x = 1;
$(add_button)
.click(
function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper)
.append(
'<div class="row add-more1"><div class="col-sm-11"><div class="col-sm-4"><form role="form"><div class="form-group">'
+ '<select class="full-width form-control"><option value="AK">- Select -</option><option value="AK">Name</option>'
+ '<option value="HI">Email</option><option value="AK">Contact No.</option><option value="HI">Assigned To</option>'
+ '<option value="AK">Next Action From</option><option value="HI">Next Action To</option><option value="AK">Status</option></select>'
+ '</div></form></div>'
+ '<div class="col-sm-4"><form role="form"><div class="form-group">'
+ '<select class="full-width form-control"><option value="AK">- Select -</option><option value="AK">=</option>'
+ '<option value="HI">></option><option value="AK">>=</option><option value="HI"><</option><option value="AK"><=</option>'
+ '<option value="HI">like</option></select>'
+ '</div></form></div>'
+ '<div class="col-sm-4"><form role="form"><div class="form-group">'
+ '<input type="text" class="form-control input-sm" name="name" placeholder="Enter value"/>'
+ '</div></form></div></div>'
+ '<span class="remove_field"><i class="fa fa-times"></i></span></div>');
}
});
$(wrapper).on("click", ".remove_field",
function (e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});

please add css maybe its work :
.remove_field{
position: absolute;
right: 0;
}

Javascript: Different background color for different div's

I have some troubles with javascript app to manage meetings. I have three levels of importance: 'Important', 'Medium', 'No important' and I want change background-color for them. 'Important' - red color, 'Medium' - yellow and 'No important'-green. I try to hold in content variable string from html and then compare this value with if,else if statement, but it still doesn't work. Do you have some advices?
main.js
function fetchMeetings(){
var meetings = JSON.parse(localStorage.getItem('meetings'));
var meetingsResults = document.getElementById('meetingsResults');
// Build output
meetingsResults.innerHTML = '';
for(var i = 0; i < meetings.length; i++){
var date = meetings[i].date;
var person = meetings[i].person;
var purpose = meetings[i].purpose;
var warning = meetings[i].warning;
meetingsResults.innerHTML += '<div class="mettingDiv">'+
'<h3>'+date+'</h3>'+
'<h3>'+person+'</h3>' +
'<h3>'+purpose+'</h3>'+
'<h3 class="importance">'+warning+'</h3>'+
' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</div>';
}
var content= document.getElementsByClassName("importance").innerHTML;
if(content == 'Important'){
$('.mettingDiv').css('background-color', '#c00100');
}
else if(content == 'Medium'){
$('.mettingDiv').css('background-color', '#fbff30');
}
else if(content == 'No important'){
$('.mettingDiv').css('background-color', '#85ff63');
}
}
github
live app
Ok, I tried to add additional class name to div element, but class name is still the same, code:
meetingsResults.innerHTML += '<div id="div1" class="mettingDiv">'+
'<h3>'+date+'</h3>'+
'<h3>'+person+'</h3>' +
'<h3>'+purpose+'</h3>'+
'<h3 class="importance">'+warning+'</h3>'+
' <a onclick="deleteMeeting(\''+purpose+'\')" class="btn btn-danger" href="#">Delete</a> ' +
'</div>';
}
var content= document.getElementsByClassName("importance").innerHTML;
var d = document.getElementById("div1");
if(content == 'Important'){
d.className += " important";
}

Try this
meetingsResults.innerHTML += '<div class="mettingDiv ' + warning + '">'+ ...
this will result in <div class="mettingDiv Important"..., <div class="mettingDiv No important" ... and then add CSS
.Important { background-color: #c00100; }
.Medium { background-color: #fbff30; }
.No.important { background-color: #85ff63; }

How to insert fields using jQuery?

I'm trying to realise this code in the snippet, for the moment I'm working only on the button Label, so when I click on this button, it adds a small formular that allows to creat this a label in the right side by clicking on OK. However, even if I click on OK nothing happens, normally a label should appear with the name inserted in the textfield "label".
Does anyone know where is the problem? Thank you in advance.
$(function(){
$('button').click(function(){
var typeButton = $(this).text();
if(typeButton=='Label'){
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel+' '+elementTexte+' '+elementButton;
var elementDiv = '<div id="formule">'+elementSpan+'</div>'
$(elementDiv).insertAfter('hr');
};
if(typeButton=='OK'){
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>'+elementNom+'</span>';
$('#formule').remove();
$('#gauche').append('elementSpan');
};
});
});
body {
margin: 0;
}
#gauche {
float: left;
width: 70%;
height: 1000px;
background-color: #EFECCA;
}
#droite {
background-color: #CEFFF8;
height: 1000px;
padding : 10px;
padding-left: 71%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="gauche">
</div>
<div id="droite">
Utilisez ces boutons pour créer votre formulaire<br><br>
<button>Label</button>
<button>Zone de texte</button>
<button>Bouton</button>
</div>

you need to delegate dynamically added elements using on event handler attachment with the document.
$(document).on('click', 'button', function () {
var typeButton = $(this).text();
if (typeButton == 'Label') {
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
var elementDiv = '<div id="formule">' + elementSpan + '</div>'
$(elementDiv).insertAfter('hr');
};
if (typeButton == 'OK') {
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>' + elementNom + '</span>';
$('#formule').remove();
$('#gauche').append(elementSpan);
};
});

It's because the button that gets generated to the DOM (OK) doesn't have an event listener attached to it, so it has nothing to do when being pressed. $('button').click() doesn't get updated any time the DOM changes, so you have to do it yourself.
$(function() {
function listenToButtons() {
$('button').off().on('click', function() {
var typeButton = $(this).text();
if (typeButton == 'Label') {
$('hr').remove();
$('#formule').remove();
$('#droite').append('<hr>');
var elementLabel = 'Texte du label';
var elementTexte = '<input type="text" name="label"/>';
var elementButton = '<button>OK</button>';
var elementSpan = elementLabel + ' ' + elementTexte + ' ' + elementButton;
var elementDiv = '<div id="formule">' + elementSpan + '</div>'
$(elementDiv).insertAfter('hr');
listenToButtons();
};
if (typeButton == 'OK') {
$('hr').remove();
var elementNom = $('input[name=label]').val();
var elementSpan = '<span>' + elementNom + '</span>';
$('#formule').remove();
$('#gauche').append('elementSpan');
};
});
}
listenToButtons();
});

jScrollPane doesn't scroll to bottom after content update

I have a chat window with a jScrollPane. The problem is that when I submit a message it doesn't scroll down to the last word/line I wrote, it's always a line behind.
$('body').delegate('#private-form', 'submit', function() {
var sendMessage = $(this).find('input.private-message').val();
if (!empty(sendMessage)) {
socket.emit('send private message', {
'message': sendMessage,
'username': $(this).find('input.send-to').val()
});
$(this).find('input.private-message').val('');
var data = '' +
'<div class="person">' +
'<img src="img/avatar.png" alt="">' +
'<div class="details">' +
'<div class="chat">' +
'<p>' + sendMessage + '</p>' +
'</div>' +
'<div class="chat-view">' +
'<p>10 min ago</p>' +
'</div>' +
'</div>' +
'</div>';
var settings = {
showArrows: false,
autoReinitialise: true,
};
var pane = $('.chat-single');
pane.jScrollPane(settings);
var contentPane = pane.data('jsp').getContentPane();
contentPane.append(
data
);
pane.data('jsp').scrollToBottom();
}
return false;
});
Markup:
<div class="chatters">
<div class="chat-single">
</div>
</div>
Styles:
.chatters {
padding: 10px 0;
height: 75%;
width: auto;
max-width: 390px;
}
.chat-single{
height:100%
}

After appending the data, call reinitialise on pane.data('jsp') before scrolling to the bottom.
contentPane.append(
data
);
pane.data('jsp').reinitialise();
pane.data('jsp').scrollToBottom();
Also, if you're using autoReinitialise be sure to provide a reasonable autoReinitialiseDelay since by default it does this re-initialisation twice per sencond (every 500ms).