Develop Reference

The code is jumping to an uncalled function

I have this code where I can fill different amounts ir order. I can create more inputs in order to create more amounts to calculate them. But for some reason, when I press enter in one of them in order to create another input/entry, it goes to the Reset function, which erases every field. It shouldn't call the reset function on the key press.
var intId = 0;
var maindiv = $("#maindiv");
var divpeso ="";
var inputnumber ="";
var fieldname = "";
var removeButton = "";
function anadir_input() {
// var lastField = $("#container div:last");
intId = intId + 1;
divpeso = $("<div class=\"input-group mb-3\" id=\"divpeso" + intId + "\"/>");
inputnumber = $("<input id=\"peso" + intId + "\" type=\"number\" class=\"form-control\" name=\"peso" + intId + "\" maxlength=\"5\" size=\"5\" step=\".01\" />");
fieldname = $("<div class=\"input-group-append\"><span class=\"input-group-text\">Peso" + intId + "</span></div>");
removeButton = $("<input type=\"button\" class=\"btn btn-outline-danger\" value=\"Quitar\" />");
removeButton.click(function () {
$(this).parent().remove();
});
inputnumber.keypress(function (e) {
if (e.which == 13) {
console.log("enter apretado");
}
});
divpeso.append(inputnumber);
divpeso.append(fieldname);
divpeso.append(removeButton);
$("#container").append(divpeso);
};
$(document).ready(function () {
$("#anadir").click(function () {
anadir_input();
});
$("#reset").click(function () {
console.log("reset");
$('[id*=divresultado]:visible').each(function () {
$(this).remove();
});
$('[id^=peso]:visible').each(function () {
$(this).val('');
});
$('[id^=divpeso]:visible').each(function () {
$(this).remove();
});
intId = 0;
});
$("#resultado").click(function () {
var pesosordenados = [];
var capacidad = Number($("#capacidad").val());
var pesos = [];
capacidad = $("#capacidad").val();
$('[id*=divresultado]:visible').each(function () {
$(this).remove();
});
$('[id^=peso]:visible').each(function () {
if ($(this).val() != 0 || $(this).val() != null || $(this).val() != undefined)
pesos.push($(this).val());
pesosordenados = pesos.sort(function (a, b) {
return b - a
});
});
var contenedores = [];
var sobrepesos = [];
//algoritmo para rellenar los contenedores con los distintos pesos.
while (pesosordenados.length > 0) {
var unidadcontenedor = [];
var pesosnousados = [];
var restcapacidad = Number(capacidad);
for (var i = 0; i < pesosordenados.length; i++) {
if (Number(pesosordenados[i]) > capacidad) { //si el peso es mas grande que la capacidad del contenedor
sobrepesos.push(Number(pesosordenados[i]));
} else {
if (Number(pesosordenados[i]) <= restcapacidad && restcapacidad >= pesosordenados[pesosordenados.length - 1]) {
unidadcontenedor.push(Number(pesosordenados[i]));
restcapacidad = restcapacidad - Number(pesosordenados[i]);
} else {
pesosnousados.push(pesosordenados[i]);
}
}
}
contenedores.push(unidadcontenedor);
pesosordenados = pesosnousados;
}
for (var m = 0; m < contenedores.length; m++) {
var divresultado = $("<div id=\"divresultado\" class=\"calculadora\"></div>");
var titulo = $("<h5 class=\"card-title\">Contenedor " + (Number(m) + 1) + "</h5>");
var contpesorelleno = $("<h5 class=\"card-title\">Peso cargado: " + contenedores[m].reduce((a, n) => (a + Number(n)), 0) + "</h5>");
var contpesolibre = $("<h5 class=\"card-title\">Peso libre: " + (Number(capacidad) - Number(contenedores[m].reduce((a, n) => (a + Number(n)), 0))) + "</h5>");
divresultado.append(titulo);
divresultado.append(contpesorelleno);
divresultado.append(contpesolibre);
for (var n = 0; n < contenedores[m].length; n++) {
var resultfield = $("<div class=\"input-group-append\"><span class=\"input-group-text\">" + contenedores[m][n] + "</span></div>");
divresultado.append(resultfield);
}
maindiv.append(divresultado);
}
//para sumar toda una array: arrayloquesea.reduce((a, n) => (a + Number(n)), 0)
});
});
You have the JSFiddle here.
Steps to reproduce:
-Press the green button "Añadir peso".
-Click on the created input field and press enter.
Another input field is created but also reset function erases them all.
EDIT:
I solved the issue with type="reset" in the html and also with e.preventDefault(); in the keypress function in the js. However, it does not show the div maindiv.append(divresultado); with the results.

Everything is fine just type="reset" is missing in reset button.
<button type="reset" id="reset" class="btn btn-danger cincuw">Reset</button>

No, it's not reseting, you are not providing the input value to begin with, your js $("#anadir").click() function should look like this:
$("#anadir").click(function () {
anadir_input($('input[name="capacidad"]').val());
});
and anadir_input function should put the passed input value:
function anadir_input(inputValue) {
// var lastField = $("#container div:last");
intId = intId + 1;
divpeso = $("<div class=\"input-group mb-3\" id=\"divpeso" + intId + "\"/>");
inputnumber = $("<input id=\"peso" + intId + "\" type=\"number\" class=\"form-control\" name=\"peso" + intId + "\" maxlength=\"5\" size=\"5\" step=\".01\" value='"+inputValue+"' />");
fieldname = $("<div class=\"input-group-append\"><span class=\"input-group-text\">Peso" + intId + "</span></div>");
removeButton = $("<input type=\"button\" class=\"btn btn-outline-danger\" value=\"Quitar\" />");
removeButton.click(function () {
$(this).parent().remove();
});
inputnumber.keypress(function (e) {
if (e.which == 13) {
console.log("enter apretado");
}
});
divpeso.append(inputnumber);
divpeso.append(fieldname);
divpeso.append(removeButton);
$("#container").append(divpeso);
};
I have changed your fiddle to see the output difference: https://jsfiddle.net/z4sgnr28/
I hope it makes sense

Tooltipster not showing on initial hover

I am using tooltipster for th3 first time.
https://github.com/iamceege/tooltipster
I have this code
$('body').on('mouseenter', '.doreming-task', function(e) {
var documentWidth = $(document).width();
var documentHeight = $(document).height();
var currentID = $(this).attr("event_id");
var atr = scheduler.getEvent(currentID);
var taskTitle = atr.text;
var taskDesc = atr.description;
var taskstartDuration = atr.start_date;
var taskendDuration = atr.end_date;
var taskdatetimeduration = scheduler.templates.tooltip_date_format(taskstartDuration).split(" ")[1] + " " + scheduler.templates.tooltip_date_format(taskstartDuration).split(" ")[2] + " - " +
scheduler.templates.tooltip_date_format(taskendDuration).split(" ")[1] + " " + scheduler.templates.tooltip_date_format(taskendDuration).split(" ")[2];
var taskAssign = atr.person;
var taskProject = atr.project_id;
var taskGroup = atr.management_id;
var taskLocation = atr.work_location_name;
var taskContent = atr.work_category;
var contents_name = "";
var management_name = "";
$.each(workContentsHolder, function(key, val) {
if (taskContent == val['id']) {
contents_name = val['name'];
return false;
} else {
contents_name = " ";
}
});
$.each(departmentHolder, function(key, val) {
if (taskGroup == val['id']) {
management_name = val['name'];
return false;
} else {
management_name = " ";
}
});
$("#task-title-holder").text(taskTitle);
$("#task-duration").text(taskdatetimeduration);
$("#task-description-holder").text(taskDesc);
$("#task-assign-holder").text(taskAssign);
$("#task-project-holder").text(taskProject);
$("#task-group-holder").text(management_name);
$("#work-content-holder").text(contents_name);
$("#work-location-holder").text(taskLocation);
$(this).tooltipster({
animation: "fade",
delay: 100,
trigger: 'hover',
content: $('#tooltip_content'),
arrow: false,
contentAsHTML: true,
repositionOnScroll: true,
trackTooltip: true,
contentCloning: true,
theme: 'tooltipster-shadow',
multiple: false,
})
});
Basically, I just get the "event_id", get all the details, append in the HTML holder and put it on the content, it is working fine but it is always on the second hover
Any help and assistance will be appeciated

Is there a way to have multiple inline configured ckeditors with single toolbar DOM element

An inline configured ckeditor has its toolbar attached to document body. Unless the user didn't focus the editor the toolbar is hidden. If we have multiple inline editors on same page, there will be the same number toolbar DOM elements attached to the body - each one with specific identifier. My question is, if there is a way to have a single toolbar DOM element for multiple inline ckeditors? I know (and I'm using in different context) the shared space plugin which does that, but the drawback is that one should provide an element to which the single toolabar would be attached. That's OK, but it is static and stays at the place where it's placed in the DOM order and I'd like it to be repositioned next to the currently focused editor.
Seems like I either have to use the default inline behavior or to use the shared space plugin and to reposition the single toolbar instance myself.
Any ideas on this issue or something I'm missing?

No, every CKEditor creates its own toolbar. But you can create your own plugin for this which is actually just displaying the toolbar of the active element. I have created one have a look. You do require to configure the your editor config too.
CKEDITOR.plugins.add('grouplabel', {
init : function(editor) {
function getCorrespondingName(no) {
var tempNo = 0;
for (var i = 0; i < editor.config.toolbar.length; i++) {
if (editor.config.toolbar[i].groupName != undefined) {
if (tempNo == no) {
return i;
}
tempNo++;
}
}
}
function toggleGroupDisplay(evt) {
if (evt.data.isMinimized) {
resetAllAbsolute();
$(this).find(".absoluteToolCont").toggleClass("displayNone");
} else {
$('.' + evt.data.grpID).each(function() {
toggleGroupDisplayInd(this)
});
}
}
function resetAllAbsolute() {
$(".absoluteToolCont").addClass("displayNone");
}
function toggleGroupDisplayInd(obj) {
var idM = $("#" + obj.id).parent().attr("id");
$("#" + idM + "> span").toggleClass("displayNone");
$("#" + idM).toggleClass("toggleMargin");
$("#groupLabel_" + idM).toggleClass("toggleMargin");
$("#groupLabelArrowBtn_" + idM).toggleClass("groupLabelArrowDown");
}
var openContainerArray = [ "CHARACTER", "TEXT ALIGN" ];
function createMainGroups() {
for (var j = 0; j < editor.toolbox.toolbars.length; j++) {
var grpId = editor.toolbox.toolbars[j].id;
var conNo = getCorrespondingName(j);
var isGroup = editor.config.toolbar[conNo].groupNR;
if (!isGroup) {
createMainGroup(conNo, grpId);
}
}
}
function createMainGroup(conNo, grpId) {
// console.log(conNo, grpId)
var name = editor.config.toolbar[conNo].groupName[0];
var className = editor.toolbar[conNo].name;
var name = editor.config.toolbar[conNo].groupName[0];
var elementDiv = groupLabelElementDiv(grpId, className);
var textDiv = "<div class='textGroupLabel'></div>";
var arrowDiv = "<div id='groupLabelArrowBtn_" + grpId
+ "' class='groupLabelArrowUp'></div>";
$("#" + grpId).addClass("editorGroup transitionType");
if (editor.config.showIconOnly) {
detachAndMakeAbsolute(grpId);
}
$("#" + grpId).prepend(elementDiv);
$("#groupLabel_" + grpId).append(textDiv);
if (!editor.config.showIconOnly) {
$("#groupLabel_" + grpId).append(arrowDiv);
}
addNameOrIcon(editor, name, grpId);
$(" #groupLabel_" + grpId).unbind("click").bind("click", {
grpID : "groupLabel_" + className,
isMinimized : editor.config.showIconOnly
}, toggleGroupDisplay);
var bool = false;
if (!editor.config.showIconOnly) {
for (var k = 0; k < openContainerArray.length; k++) {
if (name == openContainerArray[k]) {
bool = true;
}
}
}
showGroup(bool, grpId);
}
function detachAndMakeAbsolute(grpId) {
var divId = "absoluteToolCont_" + grpId
var absoluteDiv = "<div class='displayFlexAbsolute"
+ " absoluteToolCont' id='" + divId + "'></div>";
$("#" + grpId).prepend(absoluteDiv);
var detachedDiv = $("#" + grpId + "> span").detach();
// console.log(detachedDiv)
detachedDiv.appendTo("#" + divId);
resetAllAbsolute();
}
function showGroup(bool, grpId) {
if (!bool) {
$("#" + grpId + "> span").toggleClass("displayNone");
$("#" + grpId).toggleClass("toggleMargin");
$("#groupLabel_" + grpId).toggleClass("toggleMargin");
$("#groupLabelArrowBtn_" + grpId).toggleClass(
"groupLabelArrowDown");
}
}
function addNameOrIcon(editor, name, grpId) {
var groupName = $("#groupLabel_" + grpId + ">.textGroupLabel");
var divId = "absoluteToolCont_" + grpId
if (!editor.config.showIconOnly) {
groupName.text(name);
} else {
var clsName = name.replace(/ /g, '');
var detachedDiv = $("#" + divId).detach();
$("#groupLabel_" + grpId).prepend(detachedDiv);
groupName.html("<div class='iconToolbar " + clsName
+ "'></div>");
var overFlowRObj = "#cke_" + editor.name + " .cke_inner "
+ ".cke_top";
$(overFlowRObj).addClass("cke_top_overflow");
}
}
function groupLabelElementDiv(grpId, className) {
var elementDiv = "<div id='groupLabel_" + grpId
+ "' class='groupLabel transitionType groupLabel_"
+ className + "'></div>";
return elementDiv;
}
function createSubGroup() {
var loopVar = 0;
var divEle = '<div class="subGrpLabel textGroupLabel">' + "Font"
+ '</div>';
/*
* for (var k = 0; k < editor.toolbar.length; k++) { if
* (editor.toolbar[k] != "/") { for (var l = 0; l <
* editor.toolbar[k].items.length; l++) { if
* (editor.toolbar[k].items[l].type == "separator") { //
* console.log("sep") // $(editor.toolbar[k].items[l]).text("name"); } } } }
*/
}
editor.on('destroy', function() {
/* alert(this.name) */
var undoName = "undoRedoCont" + editor.name;
$("#" + undoName).remove();
});
editor.on('instanceReady', function() {
// console.log(previewSeen);
$("#universalPreloader").addClass("displayNone");
createMainGroups();
createSubGroup();
focusEvent();
undoRedoButtonSeprator();
});
function undoRedoButtonSeprator() {
var undoRedoContEle = "<div class='urcEle' id='undoRedoCont"
+ editor.name + "'></div>";
$("#undoRedoContSetParent").append(undoRedoContEle);
var ele = $("#" + editor.ui.instances.Undo._.id).detach();
$("#undoRedoCont" + editor.name).append(ele);
$(ele).addClass("cke_button_75px");
ele = $("#" + editor.ui.instances.Redo._.id).detach();
$("#undoRedoCont" + editor.name).append(ele);
$(ele).addClass("cke_button_75px");
$("#undoRedoCont" + editor.name).addClass("displayNone");
}
function focusEvent() {
var editorObj = /* parent. */$("#cke_wordcount_" + editor.name);
editorObj.addClass("displayFlexRelative").addClass("displayNone")
.addClass("vertical-align-middle").addClass(" flexHCenter")
.css("width", "160px");
var undoRedoCont = /* parent. */$("#undoRedoCont" + editor.name);
undoRedoCont.addClass("displayNone");
editor.on('focus', function(e) {
onFoucs(e);
});
editor.on('blur', function(e) {
onBlur(e);
});
}
function onBlur(e) {
var editorObj = /* parent. */$("#cke_wordcount_" + e.editor.name);
editorObj.addClass("displayNone");
$("#undoRedoCont" + editor.name).addClass("displayNone");
$("#dummyUNDOREDO").removeClass("displayNone");
resetAllAbsolute();
/*
* if (e.editor.config.customInline) {
* $("#toolbarEditorInline").addClass("displayNone"); }
*/
}
function onFoucs(e) {
var editorObj = /* parent. */$("#cke_wordcount_" + e.editor.name)
editorObj.removeClass("displayNone");
$("#undoRedoCont" + editor.name).removeClass("displayNone");
$("#dummyUNDOREDO").addClass("displayNone");
/*
* if (e.editor.config.customInline) {
* $("#toolbarEditorInline").removeClass("displayNone"); }
*/
}
CKEDITOR.document.appendStyleSheet(CKEDITOR.plugins
.getPath('grouplabel')
+ 'css/style.css');
}
});

localstorage multiple values

Alright, so i have textbox where I enter grades, and then they're saved in localstorage and i can see them under my textbox. But if I want to add more text boxes in which i can add more grades, and they will be saved in localstorage but they will be in another array or something how i can do that? I will be grateful for any help.
$(document).ready(function () {
var i = 0;
for (i = 0; i < localStorage.length; i++) {
var gradeID = "grade-" + i;
$('#gradeList').append("<b id='" + gradeID + "'>" + localStorage.getItem(gradeID) + "</b>, ");
}
$('#clear').click(function () {
localStorage.clear();
});
$('#gradeEntryForm').submit(function () {
if ($('#gradeInput').val() !== "") {
var gradeID = "grade-" + i;
var gradeMessage = $('#gradeInput').val();
localStorage.setItem(gradeID, gradeMessage);
$('#gradeList').append("<b class='task' id='" + gradeID + "'>" + gradeMessage + "</b>, ");
var grade = $('#' + gradeID);
task.slideDown();
$('#gradeInput').val("");
i++;
}
return false;
});
$('#gradeList').on("click", "b", function (event) {
self = $(this);
gradeID = self.attr('id');
localStorage.removeItem(gradeID);
self.remove();
});
});
DEMO

You can set dynamic id to your LocalStorage keys which you can relate to your generated TextBoxes
Something like below
localStorage['grade_' + some_id] = value;

You could use the following example:
document.getElementById("addGrade").onclick = function() {
var gradeCell = document.getElementById("gradeCell");
var input = document.createElement("input");
input.type = "number";
var br = document.createElement("br");
gradeCell.appendChild(input);
gradeCell.appendChild(br);
}
EXAMPLE

Problems with remove timestamps in JQuery

When I double click the card the dialog pops up, and it is then possible to create comments. So far so good. When creating the comments it is possible to delete it.
The issue is, that the timestamps can't be removed. The way I'm trying to remove the timestamps is by this line: $('.labelStyle').remove();
I want to be able to remove the timestamps, like the others elements but how?
Live Demo
JQuery: "click" handler
$('#divComments').on('click', '.delete', function (e) {
var uniqueval = $(this).attr("for")
var NameOfDataValue = $('label[for=' + uniqueval + ']').text();
$('img[for=' + uniqueval + ']').remove();
$('label[for=' + uniqueval + ']').remove();
$('p[for=' + uniqueval + ']').remove();
$('.labelStyle').remove();
var arr = $('#divComments').data('comments');
var theIndex = -1;
for (var i = 0; i < arr.length; i++) {
if (arr[i].commentString== NameOfDataValue) {
theIndex = i;
break;
}
}
if (theIndex == -1) {
alert("Error");
}
else {
$('#divComments').data("comments").splice(theIndex, 1);
}
});
JQuery: Add comment function
function addComment(commentString) {
var container = $('#divComments');
var inputs = container.find('label');
var id = inputs.length + 1;
var data1 = {
commentString: commentString
};
var div = $('<div />', { class: 'CommentStyle' });
$('<label />', {
id: 'comment' + id,
for: 'comment' + id,
text: commentString
}).on('change', function () {
data1.commentString = $(this).text();
}).appendTo(div);
$('<br/>').appendTo(div);
var $Image = $('<img />',
{
"src": "/Pages/Images/alert.png",
"class": "CommentImage",
"for": "comment" + id
}).appendTo(container);
var d = new Date();
var $fulaDate = $('<div>' + d.getDate()
+ "-" + monthNames[d.getMonth()]
+ "-" + d.getFullYear()
+ "//" + d.getHours()
+ ":" + d.getMinutes()
+ '</div>').addClass('labelStyle').append(' ~').appendTo(div);
var $edit = $('<p />', {
class: 'edit',
for: 'comment' + id,
text: 'Edit'
}).append(' ~').appendTo(div);
var $delete = $('<p />', {
class: 'delete',
for: 'comment' + id,
text: 'Delete'
}).appendTo(div);
div.appendTo(container).focus();
container.data('comments').push(data1);
}

You could do:
$(this).parent().find('.labelStyle').remove();
This will select the parent of the clicked button (.CommentStyle) then find the .labelStyle and remove it.