JQuery click event occurs same thing in different div - javascript

i am trying to make a order form in which user select menu items from list and menu items add separately in order form. I am trying to do this thing by jQuery but, in this i have face many of problem. I am newbie in jquery.
Script
$(document).ready(function () {
var index = 0;
$(".addCart").on('click', function(e) {
e.preventDefault();
var menuitem = $(this).parent().parent().find('.menuName').attr("data-value"),
menuprice = $(this).parent().parent().find('.menuPrice').attr('data-value');
index++;
var fieldHTML ='<span class="addMenu">\n'
+'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
+'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
+'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
+'</span>';
var fieldHTML2 ='<li id="cartItem_'+index+'" class="page-header">\n'
+'<div class="row">\n'
+'<div class="">\n'
+'<i class="fa fa-dot-circle-o"> '+menuitem+' </i>\n'
+'</div>\n'
+'<div class="col-sm-9" id="">\n'
+'<span>\n'
+'<button class="btn-sm btn btn-success increment" id="increase"><i class="fa fa-plus"></i></button>\n'
+'<input type="text" value="1" readonly name="quantity" class="quantity">\n'
+'<button class="btn-sm btn btn-success decrement" id="decrease"><i class="fa fa-minus"></i></button>\n'
+'<span style="color:grey;"> x <i class="fa fa-inr per_price"> '+menuprice+' </i></span>\n'
+'</span>\n'
+'</div>\n'
+'<div class="col-sm-3">\n'
+'<span style="color:grey;"><i class="fa fa-inr sub_price"> '+menuprice+' </i></span>\n'
+'</div>\n'
+'</div>\n'
+'</li>';
$(this).parent().html(fieldHTML);
$("#cart").append(fieldHTML2);
function getTotal() {
$('.subtotal').show();
var sum = 0;
$('.sub_price').each(function () {
var menuPrice = Number($(this).text());
// add only if the value is number
if(!isNaN(menuprice) && menuprice.length!=0) {
sum = sum + menuPrice;
}
});
$('#sum').html(sum.toFixed(2));
}
getTotal();
$(".increment").click(function () {
var $n = $(this).parent().find(".quantity");
if($n.val() !=10) {
$n.val(Number($n.val())+1);
var qty = $('[name="quantity"]').val();
var subPrice = parseInt(qty) * parseFloat(menuprice);
$('.sub_price').text(subPrice);
getTotal();
}
});
$(".decrement").click(function() {
var $n = $(this).parent().find(".quantity");
if($n.val() !=1) {
$n.val(Number($n.val())-1);
var qty = $('[name="quantity"]').val();
var subPrice = parseInt(qty) * parseFloat(menuprice);
$('.sub_price').text(subPrice);
getTotal();
} else {
$(".addMenu").remove();
$("#cart").remove();
$(".AddMenu").html('<button class="btn btn-success addCart">ADD</button>');
$('.subtotal').hide();
}
});
});
});
JSP
<div class="col-md-7">
<ul id="tabs">
<li class="active">Breakfast</li>
<li>Lunch</li>
<li>Dinner</li>
<li>Choose your menu</li>
</ul>
<ul id="tab">
<li class="active">
<h2>Breakfast</h2>
<p></p>
</li>
<li>
<h2>Lunch</h2>
</li>
<li>
<h2>Dinner</h2>
</li>
<li>
<h2>Menu List</h2>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-9">
<div class="col-sm-2">
<i class="fa fa-dot-circle-o"></i>
</div>
<div class="col-sm-6">
<p><b class="menuName" data-value="${menu.menuItem}"><c:out value="${menu.menuItem}"/></b></p>
</div>
<div class="col-sm-2">
<i class="fa fa-inr menuPrice" data-value="${menu.price}"> <c:out value="${menu.price}"/></i>
</div>
</div>
<div class="col-sm-3 AddMenu">
<button class="btn btn-success addCart">ADD</button>
</div>
</div>
</div>
<div class="row">
</div>
</li>
</ul>
</div>
<div class="col-md-5" id="vendorInfo">
<h4 class="border-bottom">Your Order</h4>
<ul id="cart">
</ul>
<div class="subtotal" style="display: none">
<div class="col-sm-10">
<p style="color:grey; font-weight: bold;">Subtotal</p>
</div>
<div class="col-sm-2">
<span class="fa fa-inr" style="color:grey; font-weight: bold;" id="sum"> </span>
</div>
</div>
</div>
Form Image
Problem
1. First, increment and decrement (+ -) work only one div. when click + or - , it not increase or decrease corresponding item in right div of order.
2. When i add any menu item first time, it add and calculate total
correctly, but second time when add other item and click on +, then second item price is multiply by first item quantity.
3. Subtotal of current item placed at other item's subtotal.
4. I want that when any individual item quantity is 1 and then click on
- , it remove from cart and ADD button placed at menu list again, but actually when i click on -, all cart item remove and ADD button is placed in whole menu list.
So, please solve my issue and tell me what thing i did wrong.
Thanks!

Related

my when running the eventlistener, my code executes the ${input.value} instead of text from the input section, what could be wrong here

HTML Code indicating the classes and id of the respective elements.
<div class="input-group mb-3" >
<input type="text" class="form-control" id="input-item" value="">
<div class="input-group-preppend">
<button type="button" class="btn btn-success" id="add-item" >Add</button>
<button type="button" class="btn btn-info" id="delete">Delete</button>
</div>
</div>
<div id="display-item">
<div class="item">
<!--<p>New list items appear here!</p>
<div class="item-btn">
<i class="fa-regular fa-pen-to-square"></i>
<i class="fa-solid fa-square-xmark"></i>
</div>-->
</div>
</div>
JS Code showing what should be happen when i key in a word inside the input section and click on add, it shows ${input.value} instead
let input = document.querySelector('#input-item');
let add = document.querySelector('#add-item');
let display = document.querySelector('#display-item');
add.addEventListener('click', () => {
if (input.value.trim() !=0) {
let newItem= document.createElement('div');
newItem.classList.add('item')
newItem.innerHTML = '<p> ${input.value} </p> <div class="item-btn"> <i class="fa-
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>'
display.appendChild(newItem);
input.value= '';
} else {
alert('please add an item!')
}
});
this is the js code
Use
`
instead of
'
newItem.innerHTML = `<p> ${input.value} </p> <div class="item-btn"> <i class="fa-
regular fa-pen-to-square"></i> <i class="fa-solid fa-square-xmark"></i> </div>`

Reset where list items are moved to in an input field

It's midnight and this may not come across properly but I'll try..
I have two lists. One list of to-do items and the other of finished items.
I have an input field and button that adds items to the to-do list when clicked. - That all works fine.
I have a button that will move all items in the to-do list to the finished list. - That all works fine BUT when I do that and then type a new item to add it to the to-do list it now all gets added to the finished list.
I know that's where I'm now moving it to but I thought a return false would work but alas.
$ (function (){
$("#stillToDo").sortable({
connectWith: "#finished"
});
$("#finished").sortable({
connectWith: "#stillToDo"
});
$("#newItemBtn").click(function(){
let newInput = $("#newItem").val();
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
})
$("#newItem").keypress(function(event){
let newInput = $("#newItem").val();
let keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '13'){
$("#stillToDo").append("<li>" + newInput + "</li>");
$("#newItem").val("");
$("#lastUpdated").text("Last updated " + Date());
}
});
$("#allFinished").click (function(){
$("#finished").append($("#stillToDo"))
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sideBar">
<h2>D-B-To-Do</h2>
<div id="searchBar" class="input-group col">
<input class="form-control py-2" type="search" placeholder="Search your items " id="searchInput">
<span class="input-group-append">
<button class="btn btn-outline-secondary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
<div class="days">
<h3>Monday</h3><hr>
</div>
<div class="days">
<h3>Tuesday</h3><hr>
</div>
<div class="days">
<h3>Wednesday</h3><hr>
</div>
<div class="days">
<h3>Thursday</h3><hr>
</div>
<div class="days">
<h3>Friday</h3><hr>
</div>
<div class="days">
<h3>Saturday</h3><hr>
</div>
<div class="days">
<h3>Sunday</h3><hr>
</div>
</div>
<div id="dayInfo" class="container col-6 row align-items-center dayInfo ">
<div class="card">
<img id="mondayImg" class="card-img-top" >
<div class="card-body">
<h3 class="card-title">Monday</h3>
<div id="subTitle" class="row">
<div class="col">
<h5>Still to do</h5>
<button id="allFinished" class="btn btn-success">Move all to finished</button><hr>
<ul id="stillToDo">
<li>test1</li>
</ul>
</div>
<div class="col">
<h5>Finished</h5><button id="allFinished" class="btn btn-danger">Remove finished</button><hr>
<ul id="finished">
<li>test2</li>
</ul>
</div>
</div>
<div id="newItemWrapper">
<input id="newItem" placeholder="Add a new item"><br>
<h6 id="newItemBtn" class="btn btn-success">Add new item</h6>
<p class="card-text"><small id="lastUpdated" class="text-muted">Last updated </small></p>
</div>
</div>
</div>
</div>
you are actually appending the full '#stillToDo ul' to the '#finished' that's why this weird behavior you are facing. . . just use this $("#finished").append($("#stillToDo").children()); everything will be ok. . .
$("#allFinished").click (function(){
$("#finished").append($("#stillToDo").children());
});
hope you get it and helped you.
For anyone wondering mindnight is not the best time to try and solve a problem...
Rather than moving the whole list over to the finished pile I just move the existing list items... Works perfectly now!

Search bar with dropdown options and function call

I am trying to have a search bar with 2 options (as dropdown list) and ONLY if user selects S1 it should call a highligthme () function and should display .
but if user selects S2 it should not call this function and my code is calling this function on both selections from drop down list ?
Below is my code. Please guide what am i doing wrong?
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown" role="menu" >
<li id="S1"><a href="#" >search 1</a></li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20" >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button></span>
<span class="result-count" ></span>
</div>
CSS being used is:
/* Style to create scroll bar in dropdown */
.scrollable-dropdown{
height: auto;
max-height:320px; /* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">
</script>
Ok you missing the event listeners on your buttons clicks .
Another think I changed was to give the elements ID's so we can add events to them .
I also used they CSS libraries that come with bootstrap
In order to get the popup to display we have to add the
show
class to the element
Here is the working code in the snippet It shows the popup and runs a function called highlight if S1 is clicked ...
I trust this helps
//first thing is to get the action button click event
var dropdown = document.getElementById('dropdown');
dropdown.addEventListener("click", display);
function display(e) {
var foo = document.getElementById('foo');
if (foo.classList.contains('show')){
foo.classList.remove('show');
}
else{
foo.classList.add('show');
}
}
// now to run your highlight me function
var s1 = document.getElementById('S1');
s1.addEventListener("click", highligthme)
function highligthme() {
console.log('this does whatever hilightme does ')
foo.classList.remove('show');
}
.scrollable-dropdown {
height: auto;
max-height: 320px;
/* Increase / Decrease value as per your need */
overflow-x: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id='dropdown'>
<span id="search_concept">ACTION</span>
</button>
<ul class="dropdown-menu scrollable-dropdown " id='foo' role="menu ">
<li id="S1">search 1</li>
<li id="S2">search 2</li>
</ul>
</div>
<input type="hidden" name="search_param" id="search_param">
<input type="text" class="form-control" name="Search" id="txtBoxSearchKey" placeholder="Select Action from list " size="20">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="btnSearch" class="btnSearch"
onclick="orderSelector(document.getElementById('txtBoxSearchKey').value,
document.getElementById('search_param').textContent)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
<span class="result-count"></span>
</div>

Change class name based on text mentioned in the box in Jquery

i am trying to change the current class name prefix.
Here is how my html looks like:
<div class="add_multi_category_block">
<div class="form-group">
<div class="col-md-2">
<a id="add_category" class="control-label add_category">Add multiple category</a>
</div>
<div class="col-md-10">
</div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category0 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group main_category">
<div class="col-md-1 rowCountNumber" style="text-align: right;">1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="main_category[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="add_sub_category main_category1 btn btn-circle green-sharp btn-sm" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm nav-item tooltips"><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.0</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
<div class="form-group sub_category_1">
<div class="col-md-2 rowCountNumber" style="text-align: right;">1.1</div>
<div class="col-md-2"><input type="text" class="form-control col-md-3" name="sub_category_[]" id="" value="" placeholder=""></div>
<div class="col-md-1"><a class="btn green-sharp btn-circle btn-sm add_sub_category add_sub_category_1" data-placement="top" data-original-title="Add Sub Category" title="Add Sub Category"><i class="fa fa-plus"></i></a></div>
<div class="col-md-1"><a class="remove_category btn btn-circle red-haze btn-sm "><i class="fa fa-times"></i></a></div>
</div>
</div>
Here is how it looks like when its get arranged in HTML with CSS, check below screenshot:
Now the problem is, i can have N level of childs here. Here i just want to do is, if i remove "0" column, then it should update the below column from "1" to "0" and sub-sequent child's should be
0
0.0
0.0.0
0.0.1
0.1
and so on...with the below number as well. So for the time being i used this below code to remove all the child under one parent.
Here is how it looks like.
$(document).on('click', '.remove_category', function(){
var parentRowCount = $(this).closest('.form-group').find('.rowCountNumber').html();
var subCategory = parentRowCount.replace(/[ .]/g, "_");
$(this).closest('.form-group').remove();
$("*[class*='sub_category_"+subCategory+"']").remove();
var i = 0;
$('.main_category').each(function(){
$(this).find('.rowCountNumber').html(i); /*----------This will change the number of outer columns but not of the childs -------*/
i++;
});
});
Is there any way to rename all the child with all sub level child at the same time?
For your understanding i am adding one more screenshot of show you how complexity increases here.
Thank you!
You just need to do another loop of all the sub-level elements and change the numbers. Below is the relevant code change.
$('.main_category').each(function(i,v){ // added "i" for index value
var previousNumber = $(this).find('.rowCountNumber').html(); // gets you the old number
var subClassName = 'sub_category_'+ previousNumber; // get the possible sub element class names
$(this).find('.rowCountNumber').html(i);
$('.add_multi_category_block [class="'+ subClassName +'"]').each(function(subIndex,elem){
$(elem).removeClass(subClassName).addClass('sub_category_' + i);
$(elem).find('.rowCountNumber').html( i + '.' + subIndex );
});
//i++; not required as the default callback provides you the index value.
});
Note: I have also changed certain code for better performance, Other changes which you can consider is
instead of $("*[class*='sub_category_"+subCategory+"']").remove(); use
$(".add_multi_category_block [class='sub_category_"+subCategory+"']").remove(); This will limit jquery to search only within the specified parent div .add_multi_category_block.

Check box is not shown as unchecked

I tried the following in my Angular app :
$(document).on('click touchend', '.dropdown-menu', function(e) {
console.log("Inside....click on");
e.stopPropagation();
console.log("stop..prop");
});
and still my checkbox is not showing unchecked mark even if the ng-model value is set to false properly. What might be the reason?
MY HTML:
function clearAll() {
for (var i = 0; i < vm.list.length; i++) {
if (vm.list[i].flag === true) {
vm.list[i].flag = false;
vm.listFilterCount -= (vm.list[i].value.length + 3);
}
}
vm.listFilterS = '';
vm.count= ' ';
vm.include= [];
vm.list= [];
}
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 borderAtRight"
<!-- Dropdown and Menu -->
<div class="btn-group topFilterCtrl filterDropdn" dropdown dropdown-append-to-body id="ddlStatus">
<div id="btn-append-to-body" type="button" class="btn btn-primary panelTextFont14 noBorder" dropdown-toggle> Status
<span class="caret caretSpan"></span>
</div>
<ul class="dropdown-menu dropDownLabel" role="menu" aria-labelledby="btn-append-to-body" ng-show="!vm.showthis">
<div class="customScroll">
<li role="menuitem" class="changeColorOnHover" ng-repeat="optionThis in vm.List track by $index" ng-show="list.value != null">
<a href="#">
<div class="checkbox" id="{index}" ng-show="this.value != null" ng-click="vm.applyFilterForResultCount()" ng-change="vm.getCount(this)" ng-model="this.flag">
<label>
<input type="checkbox" ng-click="vm.clickStatusCheckBox(this);$event.stopPropagation();" ng-show="this.value != null" />
{{this.value}}
</label>
</div>
</a>
</li>
</div>
<!--Clear div-->
<li role="menuitem" class="btn btn-default buttonli" ng-click="vm.clearAll()">
<a href="#">
<p>
<span class="clearAllBtn">Clear</span>
<span class="dropDownBtnItem"> – All </span>
</p>
</a>
</li>
</ul>
</div>
Screenshot of problem:

Categories