Develop Reference

How to hide the parents of several elements with the same class?

I am trying to use .hide() from jQuery to hide some the parents of the li's that has the same class. No success so far. I see the other things like .addClass works fine, but .hide() is not working on this one?
Can someone give me a hand?
This is my code:
add()
function add() {
var element = document.getElementById("tasks");
var name = "acb"
$(element).append(
'<div class="d-flex mt-4">' +
'<span class="col-1">' +
'<li class="not-done" onclick="done(this)">' + name + '</li>' +
'</span>' +
'<span class="col-3">' +
'<button type="button" class="btn-edit">Edit</button>' +
'</span>' +
'</div>'
)
}
$("#show-done").click(function() {
$("li.not-done").parent().parent().hide();
// $("li.done").show();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tasks">
<div class="d-flex mt-4">
<span class="col-1">
<li class="done" onclick="done(this)">xys</li>
</span>
<span class="col-3">
<button type="button" class="btn-edit">Edit</button>
</span>
</div>
</div>
<button id="show-done">show</button>

Fix HTML header and button tag not updating text

I am trying to write some code that updates a header tag and a button tag. However, when I use the method .text(); it does not work. So I looked up the proper way to do it via other stack overflow questions, and I see basically the same thing. Everyone is telling me to use .text() or .html(). So I am really confused on why it is not working. I am not sure if it has anything to do with values already in the tag.
HTML:
<div class="contents">
<div class="card text-center myCard">
<div class="card-header"></div>
<div class="card-body">
<h5 class="card-title"></h5>
<p class="card-text"></p>
<button type="button" class="btn btn-primary ttBtn"></button>
</div>
<div class="card-footer text-muted"></div>
</div>
</div>
jQuery:
$(".eBtn").on(
"click",
function(event) {
event.preventDefault();
var href = $(this).attr('href');
console.log(href);
$.get(href, function(ary2, status) {
$("#displayAppName").val(ary2.appname);
$("#appcode").val(ary2.appcode);
$("#editStatus").val(ary2.status);
if (ary2.mapstatus == "" || ary2.mapstatus == null) {
mapBool = true;
$("#mapStatus").val("");
$("#createBtn").val('Create');
$('#modalCreateBtn').attr(
'href',
'/create?currentAppcode='
+ ary2.appcode
+ "&currentAcro="
+ ary2.acronym
+ "&currentAppname="
+ ary2.appname);
console.log("Card Create: " + $(".card-title").val());
} else {
$("#mapStatus").val("Mapped");
$("#createBtn").val('Edit');
$('#modalCreateBtn').attr(
'href',
'/edit?currentAppcode='
+ ary2.appcode
+ "&currentAcro="
+ ary2.acronym);
mapBool = true;
console.log("Card Edit: " + $(".card-title").val());
}
});
console.log("Main Boolean : " + this.mapBool)
console.log("Main Boolean : " + mapBool)
if(mapBool){
$(".card-title").text("Application Mapped!");
$(".card-text").text("Continue to view application");
$(".ttBtn").text("New Mapping after");
}
$("#exampleModal").modal();
});
jQuery Change HTML:
$(".card-title").text("Application Mapped!");
$(".card-text").text("Continue to view application");
$(".ttBtn").text("Continue");

Created variable ary2. Hope this help you.
var ary2 = [];
if (ary2.mapstatus == "" || ary2.mapstatus == null) {
$("#mapStatus").val("");
$("#createBtn").val('Create');
$('#modalCreateBtn').attr(
'href',
'/create?currentAppcode=' +
ary2.code +
"&currentAcro=" +
ary2.acro +
"&currentAppname=" +
ary2.name);
$(".card-title").text("Application Mapped!");
$(".card-text").text("Continue to view application");
$(".ttBtn").html("Continue");
} else {
$("#mapStatus").val("Mapped");
$("#createBtn").val('Edit');
$('#modalCreateBtn').attr(
'href',
'/edit?currentAppcode=' +
ary2.code +
"&currentAcro=" +
ary2.acro);
}
$(document).ready(function() {
$(".card-title").text("Application Mapped!");
$(".card-text").text("Continue to view application");
$(".ttBtn").html("Continue");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="contents">
<div class="card text-center myCard">
<div class="card-header"></div>
<div class="card-body">
<h5 class="card-title">Application not mapped!</h5>
<p class="card-text">Click the "New Tier" button to begin mapping.
</p>
<button type="button" class="btn btn-primary ttBtn">New
Mapping</button>
</div>
<div class="card-footer text-muted"></div>
</div>
</div>

JQuery .on() live calculation

I have a ul list. The items are appended to the list, when the user click on a button. This part of the script is working fine and the items are appended to the ul list. But I have an issue in the second part. Each button has a value (integer). I sum the values and show the sum in a field. This is also working without errors. However, it works only when li items already are published in the ul. For dynamic li items it does not work. I need an .on() or .live() function for that?
Here are the scripts
//append to costs //
$(document).ready(function() {
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
});
$(document).on('click touchstart', '.items', function() {
$(this).remove();
});
});
//calculation addition //
$(document).ready(function() {
function totalList() {
var subTotal = 0;
jQuery("#totalsum li").each(function() {
subTotal += parseFloat(
jQuery(this).find('span').text()
.replace('$ ', '')
.replace(',', ''));
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
};
totalList();
});
And here you have the html code.
<div class="footer_div">
<div class="panel-footer">
<ul class="ul-panel" id="totalsum">
</ul>
</div>
<div class="float_left">
<span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
</div>
<div class="float_right costsli">
<span class="costs">
geschätzte Kosten
</span>
<span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
</div>
</div>
The button is for example the follows:
<button class="button_grey" value="950" name="Android">
<center>
<i class="fa fa-android fa-5x" aria-hidden="true"></i>
<h4>
Android
</h4>
</center>
</button>

extract the function totalList out of the document ready, then call it where needed..
//calculation addition //
function totalList() {
var subTotal = 0;
jQuery("#totalsum li").each(function() {
subTotal += parseFloat(
jQuery(this).find('span').text()
.replace('$ ', '')
.replace(',', ''));
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
};
//append to costs //
$(document).ready(function() {
totalList();
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
});
$(document).on('click touchstart', '.items', function() {
//$(this).remove();
totalList();//maybe here?
});
});

Changes:-
1.Call function totalList();inside $('.button_grey').click(function() { and $(document).on('click touchstart', '.items', function() {
2.Put function code outside of $(document).ready(function(){..})
$(document).ready(function() {
$('.button_grey').click(function() {
var toAdd = $(this).attr('name');
var toAdd2 = $(this).attr('value');
$('.ul-panel').append('<li class="items">' + toAdd + '<div class="float_right">CHF <span class="numbs">' + toAdd2 + '</span> <i class="fa fa-minus-circle" aria-hidden="true"></div></i></li>');
totalList();
});
$(document).on('click touchstart', '.items', function() {
$(this).remove();
totalList();
});
});
function totalList() {
var subTotal = 0;
jQuery(".numbs").each(function() {
subTotal += parseFloat(jQuery(this).text());
});
var subTotal = subTotal.toFixed(2);
$('.numbercosts').html(subTotal);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer_div">
<div class="panel-footer">
<ul class="ul-panel" id="totalsum">
</ul>
</div>
<div class="float_left">
<span class="details"><i class="fa fa-arrow-circle-up" aria-hidden="true"></i> Details</span>
</div>
<div class="float_right costsli">
<span class="costs">
geschätzte Kosten
</span>
<span class="numbercosts" id="numbercosts"></span><span class="costs"> CHF</span>
</div>
</div>
<button class="button_grey" value="950" name="Android"><center><i class="fa fa-android fa-5x" aria-hidden="true"></i><h4>Android</h4></center></button>

How to get the value of a particular input field using id in the html templates

I have two div html elements with different id and here I am using spinner. Whenever values in the spinner input changes alert box will be displayed.
HTML code
<div id="accordion2" class="panel-group" style="display: block;">
<div id="accordion2" class="panel-group">
<div id="Tea">
<div class="spinner Tea input-group ">
<input type="text" id = "servings" class="form-control input- sm" value="Tea"/>
<div class="input-group-btn-vertical">
<button class="btn Tea btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Tea btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Tea"> Tea </h4>
</div>
<div id="Coffee">
<div class="spinner Coffee input-group ">
<input type="text" id = "servings" class="form-control input-sm" value="Coffee"/>
<div class="input-group-btn-vertical">
<button class="btn Coffee btn-default">
<i class="fa fa-caret-up"></i>
</button>
<button class="btn Coffee btn-default">
<i class="fa fa-caret-down"></i>
</button>
</div>
<h4 id="energy" class="Coffee">Coffee</h4>
</div>
</div>
</div>
JQuery code
$(function(){
$('.spinner:first-of-type input').on('click', function() {
$('.spinner:first-of-type input').val(parseInt($('.spinner:first-of-type input').val(), 10) + 1);
var val = $('.spinner:first-of-type input').val();
changeValues(val);
});
$('.spinner:last-of-type input').on('click', function() {
$('.spinner input').val( parseInt($('.spinner input').val(), 10) - 1);
});
function changeValues(value){
alert($('#energy').attr('class').split(' '));
};
});
But in the alert box whenever I click the spinner up arrow only Tea is displayed.
what I expect is when the spinner is clicked from Tea div tea should be displayed and when from coffee , coffee should be displayed.Please help me out

I'm not sure I totally got what you are trying to do, but it seems to me that you want to increment and decrement number of beverage cups on up/down buttons click. For this you would better modify mark up a little (remove duplicated ids, add classes for convenience). And I may look like this then:
$(function() {
$('.spinner').on('click', '.servings', function(e) {
$(this).val(parseInt($(this).val() || 0, 10) + 1);
var val = $(this).val();
changeValues.call(e.delegateTarget, val);
})
.on('click', '.up', function(e) {
$(e.delegateTarget).find('.servings').val(function() {
return ++this.value;
});
})
.on('click', '.down', function(e) {
var $input = $(e.delegateTarget).find('.servings');
if (+$input.val() > 1) {
$input.val(function() {
return --this.value;
});
}
});
function changeValues(value) {
var type = $(this).find('.energy').data('type');
alert(type);
};
});
Demo: http://plnkr.co/edit/9vXC0RipxkzqhXrHJAKD?p=preview

try this:
$(function () {
$('.spinner').each(function () {
var $el = $(this),
$buttons = $el.find('button'),
$h4 = $el.find('h4'),
input = $el.find('input').get(0);
function showAlert() {
alert($h4.get(0).className);
}
$buttons.eq(0).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) + 1;
showAlert();
});
$buttons.eq(1).on('click', function (event) {
event.preventDefault();
input.value = (parseInt(input.value, 10) || 0) - 1;
});
});
});
JSFiddle http://jsfiddle.net/yLtn57aw/2/
Hope this helps

Semantic-UI Dynamic Dropdown

Got a problem with semantic-ui dropdown.
I've been using Semantic-Ui, and wanted to change the dropdown item dynamically.
That is, when i choose the value from the first dropdown, the second dropdown's item will change.
But the thing is, when the items are changed, the second dropdown cannot be chose,
the value won't change. The dropdown won't collapse back.
The HTML
The First Dropdown
<div id="programmetype" class="ui fluid selection dropdown">
<input type="hidden" name="programmetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="val1">Car</div>
<div class="item" data-value="val2">Tank</div>
<div class="item" data-value="val3">Plane</div>
</div>
</div>
Second Dropdown
<div id="servicetype" class="ui fluid selection dropdown">
<input type="hidden" name="servicetype">
<div class="text">Choose..</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="select">Choose..</div>
</div>
</div>
..........................
The jQuery
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Saloon</div>' +
'<div class="item" data-value="val2">Truck</div>'
);
};
if (val == "val2")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Abraham</div>' +
'<div class="item" data-value="val2">Leopard</div>' +
);
};
if (val == "val3")
{
$('#servicetype .menu').html(
'<div class="item" data-value="val1">Jet</div>' +
'<div class="item" data-value="val2">Bomber</div>' +
);
};
}
});

Found it,
I put $('#servicetype').dropdown();
after assigning the values:
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "fertility")
{
$('#servicetype').dropdown({'set value':'something'});
$('#servicetype .menu').html(
'<div class="item" data-value="acp">ACP</div>' +
'<div class="item" data-value="art">ART</div>'
);
$('#servicetype').dropdown();
};
});

A workaround approach:
function setDinamicOptions(selector, options) {
var att = "data-dinamic-opt";
$(selector).find('[' + att + ']').remove();
var html = $(selector + ' .menu').html();
for(key in options) {
html += '<div class="item" data-value="' + options[key] + '" ' + att + '>' + key + '</div>';
}
$(selector + ' .menu').html(html);
$(selector).dropdown();
}
$("#programmetype").dropdown({
onChange: function (val) {
if (val == "val1")
setDinamicOptions('#servicetype', {Saloon:'val1', Truck:'val2'});
if (val == "val2")
setDinamicOptions('#servicetype', {Abraham:'val1', Leopard:'val2'});
if (val == "val3")
setDinamicOptions('#servicetype', {Jet:'val1', Bomber:'val2'});
}
});
Try this.

If you want hover effect to open dropdown menu then you don't need to use javascript, instead you can add class simple to your parent div
this is a demo
http://jsfiddle.net/BJyQ7/30/
<div class="ui simple dropdown item">
<i class="fa fa-users"></i> Members <i class="fa fa-caret-down"></i>
<div class="menu">
<a class="item"><i class="fa fa-users"></i> Players</a>
<a class="item"><i class="fa fa-user-md"></i> Staff</a>
</div>
</div>

Another approach for setting dropdown content just in time (for example based on some dynamic criteria) is using the remoteApi, that is a particularly unfortunate name for the data binding features of the SemanticUI dropdowns.
Follow instructions here: http://semantic-ui.com/behaviors/api.html#mocking-responses