Totality Error when adding the same item twice

Totality Error when adding the same item twice - javascript

Error in Adding the totality of items
Im working in on an assignment given by our professor to practice Javascript.
Currently, im having a problem finding whats wrong with the formula ive entered.
Ive debugged it in chrome and it showed me these results:
The sum is correct when i add two separate items together 1 time.
the sum is tripled when i add the same item twice:
every code was performing well until it goes to Line 17 in prelim.js where it shows the output.
Heres the screenshot of the Output:
(pardon if its in links, the site tells me i cant show pics because i dont have that much reputation yet :) )
This is the sample program.
also the code:
var total=0;
function add (val) {
var itemName = document.getElementById('item' + val).innerHTML
var price = document.getElementById('price' + val).innerHTML
var subtotal = document.getElementById('subtotal' + val).innerHTML
price = price.replace('P ', '');
price = parseFloat(price);
var value = parseFloat(subtotal) + price;
document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);
//totality
total+=value;
document.getElementById('totality').innerHTML = total.toFixed(2);
}
function subtract (val) {
//get values from list ids
var itemName = document.getElementById('item' + val).innerHTML
var price = document.getElementById('price' + val).innerHTML
var subtotal = document.getElementById('subtotal' + val).innerHTML
//convert price id to float 0.2 value
price = price.replace('P ', '');
price = parseFloat(price);
var value = parseFloat(subtotal);
//error trapping to prevent negative value
total -= value;
value= value - price;
if (value < 0){
return false
}
//output
document.getElementById('subtotal' + val).innerHTML = value.toFixed(2);
document.getElementById('totality').innerHTML = total.toFixed(2);
}
//summary of purchases
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PRELIM POS</title>
<style>
body>div {
display: flex;
flex-direction: column;
width: 65%;
margin: 0 auto;
}
li {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: .6em 0;
}
li>div {
width: 25%;
}
li>div:first-child {
width: 40%;
}
.list0 {
font-weight: bold;
}
.container {
border-width: medium;
border-style: solid;
border-color: grey;
border-spacing: 20rem;
}
</style>
</head>
<body>
<div class="container">
<li class="list0">
<div id="item0">Line Item</div>
<div id="price0">Price</div>
<div id="quantity0">Quantity</div>
<div id="subtotal0">Subtotal</div>
</li>
<li class="list1">
<div id="item1">Korean Bibimbap</div>
<div id="price1">P 115.00</div>
<div id="quantity1">
<button onclick="add(1)">+</button>
<button onclick="subtract(1)">-</button>
</div>
<div id="subtotal1">0.00</div>
</li>
<li class="list2">
<div id="item2">Italian Ala king</div>
<div id="price2">P 115.00</div>
<div id="quantity2">
<button onclick="add(2)">+</button>
<button onclick="subtract(2)">-</button>
</div>
<div id="subtotal2">0.00</div>
</li>
<li class="list3">
<div id="item3">Krushers</div>
<div id="price3">P 80.00</div>
<div id="quantity3">
<button onclick="add(3)">+</button>
<button onclick="subtract(3)">-</button>
</div>
<div id="subtotal3">0.00</div>
</li>
<li class="list4">
<div id="item4">Spanish Salpicao</div>
<div id="price4">P 115.00</div>
<div id="quantity4">
<button onclick="add(4)">+</button>
<button onclick="subtract(4)">-</button>
</div>
<div id="subtotal4">0.00</div>
</li>
<li class="list5">
<div id="item5">Zinger</div>
<div id="price5">P 95.00</div>
<div id="quantity5">
<button onclick="add(5)">+</button>
<button onclick="subtract(5)">-</button>
</div>
<div id="subtotal5">0.00</div>
</li>
<li class="list6">
<div id="item6">California Maki Twister</div>
<div id="price6">P 85.00</div>
<div id="quantity6">
<button onclick="add(6)">+</button>
<button onclick="subtract(6)">-</button>
</div>
<div id="subtotal6">0.00</div>
</li>
<li class="list7">
<div id="item7">Hot n' Cheesy Chicken</div>
<div id="price7">P 99.00</div>
<div id="quantity7">
<button onclick="add(7)">+</button>
<button onclick="subtract(7)">-</button>
</div>
<div id="subtotal7">0.00</div>
</li>
<li class="list8">
<div id="item8">Flavor Shots</div>
<div id="price8">P 66.00</div>
<div id="quantity8">
<button onclick="add(8)">+</button>
<button onclick="subtract(8)">-</button>
</div>
<div id="subtotal8">0.00</div>
</li>
<li class="list9">
<div id="item9">Crispy Fries</div>
<div id="price9">P 55.00</div>
<div id="quantity9">
<button onclick="add(9)">+</button>
<button onclick="subtract(9)">-</button>
</div>
<div id="subtotal9">0.00</div>
</li>
<li class="list10">
<div id="item10">Chizza</div>
<div id="price10">P 100.00</div>
<div id="quantity10">
<button onclick="add(10)">+</button>
<button onclick="subtract(10)">-</button>
</div>
<div id="subtotal10">0.00</div>
</li>
<li class="list11">
<div id="item11">Famous Bowl</div>
<div id="price11">P 115.00</div>
<div id="quantity11">
<button onclick="add(11)">+</button>
<button onclick="subtract(11)">-</button>
</div>
<div id="subtotal11">0.00</div>
</li>
<li class="list12">
<div id="item12">Regular Bucket Meal</div>
<div id="price12">P 570.00</div>
<div id="quantity12">
<button onclick="add(12)">+</button>
<button onclick="subtract(12)">-</button>
</div>
<div id="subtotal12">0.00</div>
</li>
<li class="list13">
<div id="item13">Rice</div>
<div id="price13">P 25.00</div>
<div id="quantity13">
<button onclick="add(13)">+</button>
<button onclick="subtract(13)">-</button>
</div>
<div id="subtotal13">0.00</div>
</li>
<li class="list14">
<div id="item14">2pc Chicken Meal</div>
<div id="price14">P 155.00</div>
<div id="quantity14">
<button onclick="add(14)">+</button>
<button onclick="subtract(14)">-</button>
</div>
<div id="subtotal14">0.00</div>
</li>
<li class="list15">
<div id="item15">Coleslaw</div>
<div id="price15">P 45.00</div>
<div id="quantity15">
<button onclick="add(15)">+</button>
<button onclick="subtract(15)">-</button>
</div>
<div id="subtotal15">0.00</div>
</li>
<!-- totality -->
</div>
<div class="container1">
<h3>Summary:</h3> <br>
<p>
</p>
<h3>Total: </h3>
<div id="totality">0.00</div>
</div>
<script src="../prelim.js"></script>
</body>
</html>

To fix the adding and subtracting of the price to should calculate the subTotal but only add the price to the total.
You could update your add and subtract functions to:
function add (val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) + price;
var totality = parseFloat(totalityElm.innerHTML) + price;
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function subtract (val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) - price;
var totality = parseFloat(totalityElm.innerHTML) - price;
if (subTotal < 0){
return false
}
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function add(val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) + price;
var totality = parseFloat(totalityElm.innerHTML) + price;
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
function subtract(val) {
var priceElm = document.getElementById('price' + val);
var subtotalElm = document.getElementById('subtotal' + val);
var totalityElm = document.getElementById('totality');
var price = parseFloat(priceElm.innerHTML.replace('P ', ''));
var subTotal = parseFloat(subtotalElm.innerHTML) - price;
var totality = parseFloat(totalityElm.innerHTML) - price;
if (subTotal < 0) {
return false
}
subtotalElm.innerHTML = subTotal.toFixed(2);
totalityElm.innerHTML = totality.toFixed(2);
}
body>div {
display: flex;
flex-direction: column;
width: 65%;
margin: 0 auto;
}
li {
list-style-type: none;
display: flex;
justify-content: space-between;
padding: .6em 0;
}
li>div {
width: 25%;
}
li>div:first-child {
width: 40%;
}
.list0 {
font-weight: bold;
}
.container {
border-width: medium;
border-style: solid;
border-color: grey;
border-spacing: 20rem;
}
<div class="container">
<li class="list0">
<div id="item0">Line Item</div>
<div id="price0">Price</div>
<div id="quantity0">Quantity</div>
<div id="subtotal0">Subtotal</div>
</li>
<li class="list1">
<div id="item1">Korean Bibimbap</div>
<div id="price1">P 115.00</div>
<div id="quantity1">
<button onclick="add(1)">+</button>
<button onclick="subtract(1)">-</button>
</div>
<div id="subtotal1">0.00</div>
</li>
<li class="list2">
<div id="item2">Italian Ala king</div>
<div id="price2">P 115.00</div>
<div id="quantity2">
<button onclick="add(2)">+</button>
<button onclick="subtract(2)">-</button>
</div>
<div id="subtotal2">0.00</div>
</li>
<li class="list3">
<div id="item3">Krushers</div>
<div id="price3">P 80.00</div>
<div id="quantity3">
<button onclick="add(3)">+</button>
<button onclick="subtract(3)">-</button>
</div>
<div id="subtotal3">0.00</div>
</li>
<li class="list4">
<div id="item4">Spanish Salpicao</div>
<div id="price4">P 115.00</div>
<div id="quantity4">
<button onclick="add(4)">+</button>
<button onclick="subtract(4)">-</button>
</div>
<div id="subtotal4">0.00</div>
</li>
<li class="list5">
<div id="item5">Zinger</div>
<div id="price5">P 95.00</div>
<div id="quantity5">
<button onclick="add(5)">+</button>
<button onclick="subtract(5)">-</button>
</div>
<div id="subtotal5">0.00</div>
</li>
<li class="list6">
<div id="item6">California Maki Twister</div>
<div id="price6">P 85.00</div>
<div id="quantity6">
<button onclick="add(6)">+</button>
<button onclick="subtract(6)">-</button>
</div>
<div id="subtotal6">0.00</div>
</li>
<li class="list7">
<div id="item7">Hot n' Cheesy Chicken</div>
<div id="price7">P 99.00</div>
<div id="quantity7">
<button onclick="add(7)">+</button>
<button onclick="subtract(7)">-</button>
</div>
<div id="subtotal7">0.00</div>
</li>
<li class="list8">
<div id="item8">Flavor Shots</div>
<div id="price8">P 66.00</div>
<div id="quantity8">
<button onclick="add(8)">+</button>
<button onclick="subtract(8)">-</button>
</div>
<div id="subtotal8">0.00</div>
</li>
<li class="list9">
<div id="item9">Crispy Fries</div>
<div id="price9">P 55.00</div>
<div id="quantity9">
<button onclick="add(9)">+</button>
<button onclick="subtract(9)">-</button>
</div>
<div id="subtotal9">0.00</div>
</li>
<li class="list10">
<div id="item10">Chizza</div>
<div id="price10">P 100.00</div>
<div id="quantity10">
<button onclick="add(10)">+</button>
<button onclick="subtract(10)">-</button>
</div>
<div id="subtotal10">0.00</div>
</li>
<li class="list11">
<div id="item11">Famous Bowl</div>
<div id="price11">P 115.00</div>
<div id="quantity11">
<button onclick="add(11)">+</button>
<button onclick="subtract(11)">-</button>
</div>
<div id="subtotal11">0.00</div>
</li>
<li class="list12">
<div id="item12">Regular Bucket Meal</div>
<div id="price12">P 570.00</div>
<div id="quantity12">
<button onclick="add(12)">+</button>
<button onclick="subtract(12)">-</button>
</div>
<div id="subtotal12">0.00</div>
</li>
<li class="list13">
<div id="item13">Rice</div>
<div id="price13">P 25.00</div>
<div id="quantity13">
<button onclick="add(13)">+</button>
<button onclick="subtract(13)">-</button>
</div>
<div id="subtotal13">0.00</div>
</li>
<li class="list14">
<div id="item14">2pc Chicken Meal</div>
<div id="price14">P 155.00</div>
<div id="quantity14">
<button onclick="add(14)">+</button>
<button onclick="subtract(14)">-</button>
</div>
<div id="subtotal14">0.00</div>
</li>
<li class="list15">
<div id="item15">Coleslaw</div>
<div id="price15">P 45.00</div>
<div id="quantity15">
<button onclick="add(15)">+</button>
<button onclick="subtract(15)">-</button>
</div>
<div id="subtotal15">0.00</div>
</li>
<!-- totality -->
</div>
<div class="container1">
<h3>Summary:</h3> <br>
<p>
</p>
<h3>Total: </h3>
<div id="totality">0.00</div>
</div>

Related

Display no results message for input filtering a list of cards

I have an input field which is filtering a list of cards.
I can't seem to figure out how to display a message when all the div's are assigned the class display-none. Is their a way to check if any of the div's inside a parent div contain a class? Maybe I am approaching this incorrectly. Thanks for your help!
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
let cards = cardContainer.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
let noResults = document.getElementById("no-results");
let title = cards[i].querySelector(".card-content div.card-title");
if (title.innerText.toUpperCase().indexOf(input) > -1) {
cards[i].classList.remove("display-none");
cards[i].classList.add("displaying");
} else {
cards[i].classList.add("display-none");
cards[i].classList.remove("displaying");
checkDisplay();
}
}
function checkDisplay() {
let noResults = document.getElementById("no-results-message");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("displaying")) {
console.log("something");
} else {
console.log("no cards are displaying");
}
}
}
}
.display-none {
display: none;
}
.displaying {
display: block;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

Changing display only with .display-none in css works more clearly
function mySearch() {
const input = document.getElementById("cardSearch").value.toUpperCase();
const cardContainer = document.getElementById("cards");
const cards = document.querySelectorAll(".card");
[...cards].map((card) => {
const noResults = document.getElementById("no-results");
const title = card
.querySelector(".card-content div.card-title")
.innerText.toUpperCase();
title.includes(input)
? card.classList.remove("display-none")
: card.classList.add("display-none");
checkDisplay();
});
function checkDisplay() {
const noResults = document.getElementById("no-results");
const result = [...cards].filter((card) =>
card.classList.contains("display-none")
);
cards.length === result.length
? noResults.classList.remove("display-none")
: noResults.classList.add("display-none");
for (let i = 0; i < cards.length; i++) {
if (cards[i].classList.contains("display-none")) {
console.log("no cards are displaying");
} else {
console.log("something");
}
}
}
}
.display-none {
display: none;
}
<div class="search-form" style="margin: 1.2em 0 1.2em 0">
<input onsearch="mySearch()" type="search" id="cardSearch" class="card-search" placeholder="Search for a service..." onkeyup="mySearch()">
</div>
<div class="card-container" id="cards">
<div class="no-results-message display-none" id="no-results">There are no results.</div>
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113953');">
<br>
</div>
<div class="card-content">
<div class="card-title">Abandoned Vehicle Complaint</div>
<div class="card-body">Report abandoned vehicles in unincorporated Pierce County.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i class="fa fa-chevron-down" style="font-size: 12px;" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Vehicle on Private Property</li>
<li>Vehicle on Public Property with a license plate</li>
<li>Vehicle on County roadway</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
<!-- -- end of container ---->
<div class="card">
<div class="card-image" style="background-image: url('/ImageRepository/Document?documentId=113954');">
<br>
</div>
<div class="card-content">
<div class="card-title">Adopt-a-road Pick Up Request</div>
<div class="card-body">Request bag pick up or sign up for the adopt a road program.</div>
<div class="link-list row">
<!-- -- begin accordian ---->
<div class="accordion-content">
<div class="accordion-item">
<header class="item-header">
<h4 class="item-question">Select an Option</h4>
<div class="item-icon"><i style="font-size: 12px;" class="fa fa-chevron-down" aria-hidden="true"></i></div>
</header>
<div class="item-content">
<p class="item-answer">
<br>
</p>
<ul>
<li>Existing approved participant pick up</li>
<li>Apply for the adopt-a-road program</li>
</ul>
<p>
<br>
</p>
</div>
</div>
</div>
<!-- -- End accordian ---->
</div>
</div>
</div>
</div>

How to create multi-filter gallery like woocommerce/ecommerce product filter

I need a multifilter gallery like woocommerce/ecommerce product filter
here is three type filter dropdown COLOR, SIZE and SHAPE
for example If I will select color: red and green, size: small and shape: round
So it should filter which boxes have following classes red+small+round and which boxes have following classes green+small+round
and I need to show selected filter name in filter name line
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button color" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
<li class="multifilter-gallery-button color" data-filter="green">
<input type="checkbox" value="on">
green
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button size" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button size" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="nav-item dropdown">
shape
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button shape" data-filter="square">
<input type="checkbox">
square
</li>
<li class="multifilter-gallery-button shape" data-filter="round">
<input type="checkbox">
round
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<p class="shape-name"> shape: (here will show the selected shape name)</p>
<p class="color-name"> color: (here will show the selected color name)</p>
<p class="size-name"> Size: (here will show the selected Size name)</p>
<div class="row mt-5">
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class="bg-danger m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">Red Small square</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class="bg-success m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">green medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class="bg-danger m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">Red medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class="bg-success m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
// venue filter script
$(".multifilter-gallery-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
$(this).addClass("active");
$(".multifilter-gallery-button").not(this).removeClass('active').find('input[type="checkbox"]').attr('checked',false);
$('.multifilter-gallery-box').show('1000');
}
else
{
$('.multifilter-gallery-button.active[data-filter="all"]').removeClass('active');
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).find('input[type="checkbox"]').attr('checked',false);
}else{
$(this).addClass("active");
$(this).find('input[type="checkbox"]').attr('checked',true);
}
if($('.multifilter-gallery-button.active').length){
var classes = '';
$('.multifilter-gallery-button.active').each(function(index, el) {
classes += '.'+$(this).attr('data-filter');
});
$(".multifilter-gallery-box").not(classes).hide('3000');
$('.multifilter-gallery-box').filter(classes).show('3000');
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
$('ul.not-close-dropdown').on('click', function (event) {
event.stopPropagation();
});
///////////
})
})(jQuery);
</script>

hope it will solve your problem. works perfectly.
remove your js code, and include this one.
(function ($) {
$(document).ready(function() {
$('.multifilter-gallery-button').click(function(){
var value = $(this).data('filter');
if(value == 'all'){
$('.multifilter-gallery-button').removeClass('active');
$('.multifilter-gallery-button input[type="checkbox"]').prop('checked', false);
$(this).addClass('active');
$('.multifilter-gallery-box').show();
$('.size-name').html('Size : '+'All');
$('.color-name').html('Color : '+'All');
$('.shape-name').html('Shape : '+'All');
}else{
$('.multifilter-gallery-button[data-filter="all"]').removeClass('active');
$('.multifilter-gallery-box').hide();
if($(this).hasClass('active')){
$(this).removeClass('active');
$(this).find('input[type="checkbox"]').prop('checked', false);
}else{
$(this).addClass('active');
$(this).find('input[type="checkbox"]').prop('checked', true);
}
var colors = $('.multifilter-gallery-button.color.active');
var sizes = $('.multifilter-gallery-button.size.active');
var shapes = $('.multifilter-gallery-button.shape.active');
var colorsArray = $.map( colors, function( val, i ) {
return $(val).data('filter');
});
var sizesArray = $.map( sizes, function( val, i ) {
return $(val).data('filter');
});
var shapesArray = $.map( shapes, function( val, i ) {
return $(val).data('filter');
});
var combinations = [];
if(colorsArray.length > 0){
var colorsTexts = $.map( colors, function( val, i ) {
return $(val).text();
});
$('.color-name').html('Color : '+colorsTexts.join(', '));
combinations = colorsArray;
}else{
$('.color-name').html('Color : '+'No color selected');
}
if(sizesArray.length > 0){
var sizesTexts = $.map( sizes, function( val, i ) {
return $(val).text();
});
$('.size-name').html('Size : '+sizesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
$.each($(sizesArray), function(ii, sz){
var combination = [c, sz];
combinations.push(combination);
});
});
}else{
combinations = sizesArray;
}
}else{
$('.size-name').html('Size : '+'No size selected');
}
if(shapesArray.length > 0){
var shapesTexts = $.map( shapes, function( val, i ) {
return $(val).text();
});
$('.shape-name').html('Shape : '+shapesTexts.join(', '));
if(combinations.length > 0){
var tempCombinations = combinations;
combinations = [];
$.each($(tempCombinations), function(i, c){
if($.isArray(c)){
$.each($(shapesArray), function(ii, s){
var combination = $.merge([s], c);
combinations.push(combination);
});
}else{
$.each($(shapesArray), function(ii, s){
var combination = [c, s];
combinations.push(combination);
});
}
});
}else{
combinations = shapesArray;
}
}else{
$('.shape-name').html('Shape : '+'No shapes selected');
}
//show boxes
if(combinations.length > 0){
$.each($(combinations), function(i, val){
if($.isArray(val)){
var classes = val.join('.');
$('.multifilter-gallery-box'+'.'+classes).show();
}else{
$('.multifilter-gallery-box'+'.'+val).show();
}
});
}else{
$('.multifilter-gallery-button[data-filter="all"]').click();
}
}
});
})
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="multifilter-gallery-wrap">
<div class="row">
<div class="col-sm-12">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<ul class="multifilter-gallery-nav nav">
<li class="nav-item dropdown">
Color
<ul class="dropdown-menu not-close-dropdown" data-display="static">
<li class="multifilter-gallery-button color" data-filter="red">
<input type="checkbox" value="on">
Red
</li>
<li class="multifilter-gallery-button color" data-filter="green">
<input type="checkbox" value="on">
green
</li>
</ul>
</li>
<li class="nav-item dropdown">
Size
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button size" data-filter="small">
<input type="checkbox">
Small
</li>
<li class="multifilter-gallery-button size" data-filter="medium">
<input type="checkbox">
Medium
</li>
</ul>
</li>
<li class="nav-item dropdown">
shape
<ul class="dropdown-menu not-close-dropdown">
<li class="multifilter-gallery-button shape" data-filter="square">
<input type="checkbox">
square
</li>
<li class="multifilter-gallery-button shape" data-filter="round">
<input type="checkbox">
round
</li>
</ul>
</li>
<li class="multifilter-gallery-button clear btn btn-secondary" data-filter="all">Reset</li>
</ul>
</nav>
<p class="shape-name"> shape: (here will show the selected shape name)</p>
<p class="color-name"> color: (here will show the selected color name)</p>
<p class="size-name"> Size: (here will show the selected Size name)</p>
<div class="row mt-5">
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red small square">
<div class="bg-danger m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">Red Small square</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green medium round">
<div class="bg-success m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">green medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box red medium round ">
<div class="bg-danger m-2" style="height: 200px; width: 200px;">
<h2 class="text-white">Red medium round</h2>
</div>
</div>
<div class="col-sm-4 col-md-4 col-lg-3 multifilter-gallery-box green small square ">
<div class="bg-success m-2" style="height: 180px; width: 180px;">
<h2 class="text-white">green Small square</h2>
</div>
</div>
</div>
<!--end portfolio grid -->
</div>
</div>
</div>
</div>

Active all data id and # when Onclick

Problem going wrong is when i Onclick for "c-1" btn in div=mark-container, the same id will be active in the same time,but the another button which also is "c-1" in the div = second-mark , wouldn't active together,how to make" it to be active together?
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1').removeClass('active');
$(".c-1-details").removeClass('active');
$(this).addClass('active');
$("[id='" + tab + "']").addClass('active');
});
.c-1-details {
display: none;
}
.c-1-details.active {
display: block;
}
.active {
color: green;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<button class="c-1 active" data-id="tab-1">
<p>for 1 btn</p>
</button>
<button class="c-1" data-id="tab-2">
<p>for 2 btn</p>
</button>
<div class="c-1-details active" id="tab-1">
<p>for 1 details</p>
</div>
<div class="c-1-details" id="tab-2">
<p>for 2 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<button class="c-1 active" data-id="tab-1">current btn 1</button>
<button class="c-1" data-id="tab-2">current btn2</button>
</ul>
<div class="c-1-details active" id="tab-1">
display content 1
</div>
<div class="c-1-details" id="tab-2">
display content 2
</div>
</div>

As mentioned in the comments id should be unique to an element. Common elements can always be indicated with same class. The code below is self-explanatory.
$('.c-1').click(function() {
var tab = $(this).attr('data-id');
$('.c-1,.c-1-details').removeClass('active');
$('.' + tab + ', .details-' + tab).addClass('active');
});
.c-1-details {
display: none;
}
.c-1-details.active {
display: block;
}
.active {
color: green;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mark-container">
<button class="c-1 tab-1 active" data-id="tab-1">
<p>for 1 btn</p>
</button>
<button class="c-1 tab-2" data-id="tab-2">
<p>for 2 btn</p>
</button>
<div class="c-1-details details-tab-1 active" data-id="tab-1">
<p>for 1 details</p>
</div>
<div class="c-1-details details-tab-2" data-id="tab-2">
<p>for 2 details</p>
</div>
</div>
<div class="second-mark">
<ul>
<button class="c-1 tab-1 active" data-id="tab-1">current btn 1</button>
<button class="c-1 tab-2" data-id="tab-2">current btn2</button>
</ul>
<div class="c-1-details details-tab-1 active" data-id="tab-1">
display content 1
</div>
<div class="c-1-details details-tab-2 " data-id="tab-2">
display content 2
</div>
</div>

Simple sort DIV by name, and number

I want to sort my div using vanilla JS by name and number. Before i sorting only list, and this is not a problem, but here i have a problem how to do this.
Maybe need create object, and save all value to him, and then sorting object?
Now i trying loop or items, but i can't get item-price or item-name in 'item'
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName(){
var items = document.querySelectorAll('.item');
}
function sortingByPrice(){
var items = document.querySelectorAll('.item');
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

Using flexbox for this could be useful cuz you can rearrange them with order, and it will save you a lot of re-rendering and moving bit's and pieces
Doe the flex layout will make it behave a little differently. So you might have to fix the css a bit.
Also the tab index might not be what you expect if you have inputs and what not.
var sortByNameBtn = document.getElementById('sortByName');
var sortByPriceBtn = document.getElementById('sortByPrice');
function sortingByName() {
var items = document.querySelectorAll('.item');
// get all items as an array and call the sort method
Array.from(items).sort(function(a, b) {
// get the text content
a = a.querySelector('.item-name').innerText.toLowerCase()
b = b.querySelector('.item-name').innerText.toLowerCase()
return (a > b) - (a < b)
}).forEach(function(n, i) {
n.style.order = i
})
}
function sortingByPrice(){
var items = document.querySelectorAll('.item')
Array.from(items).sort(function(a, b) {
// using ~~ to cast the value to a number instead of a string
a = ~~a.querySelector('.item-price').innerText
b = ~~b.querySelector('.item-price').innerText
return a - b
}).forEach(function(n, i) {
n.style.order = i
})
}
sortByNameBtn.addEventListener('click', sortingByName);
sortByPriceBtn.addEventListener('click', sortingByPrice);
.items {
display: flex;
}
.item {
background: #eee;
padding: 10px;
margin-bottom: 10px;
font-size: 20px;
display: inline-block;
border: 1px solid black;
}
<div class="items">
<div class="item">
<div class="item-price">12321</div>
<div class="item-name">Car</div>
</div>
<div class="item">
<div class="item-price">123</div>
<div class="item-name">Table</div>
</div>
<div class="item">
<div class="item-price">88</div>
<div class="item-name">Toys</div>
</div>
<div class="item">
<div class="item-price">1223</div>
<div class="item-name">Window</div>
</div>
<div class="item">
<div class="item-price">19</div>
<div class="item-name">Bad</div>
</div>
<div class="item">
<div class="item-price">50</div>
<div class="item-name">Mouse</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">iPhone</div>
</div>
<div class="item">
<div class="item-price">100</div>
<div class="item-name">Mobile</div>
</div>
<div class="item">
<div class="item-price">12</div>
<div class="item-name">Cake</div>
</div>
<div class="item">
<div class="item-price">500</div>
<div class="item-name">Laptop</div>
</div>
</div>
<p>
<button id="sortByName">Sort by name</button>
</p>
<p>
<button id="sortByPrice">
Sort By price
</button>
</p>

Bootstrap Wizard next tab on image click and capture value

I have a form with Twitter Bootstrap Wizard and I have several images that when I select one, I must store locally the value and go to the next tab (o._nextTab).
When I click the image it should go to the next tab, but currently is not working.
This is the idea:
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
There will be several images, I want to click on the image and go to the next tab, or at least select the image and then when I click next get the value.
I'm using pyjade to create the templates so if theres any idea there or using javascript it will be welcome.
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><img src="static/assets/img/business-bars-graphic.png" class="img-responsive"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="static/assets/img/business-chart.png" class="img-responsive"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="static/assets/img/business-financial-chart (1).png" class="img-responsive"/>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>

I have added onclick="seltab(this); to each image, which on click goes to respective tab and also captures what is clicked.
(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function() {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({
'nextSelector': '.chartOption'
});
}
p._handleTabShow = function(tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._nextTab = function(wizard) {
$('.nextT').click(function() {
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
function seltab(obj) {
var elem = obj.getAttribute('datahref')
var click_img = obj.firstChild.getAttribute('src')
var justifiedElems = document.getElementsByClassName('nav-justified')[0].getElementsByTagName("li");
for (var i = 0; i < justifiedElems.length; i++) {
if (justifiedElems[i].firstChild.getAttribute('href') == '#' + elem) {
justifiedElems[i].firstChild.click()
}
}
console.log("You Clicked " + click_img + " " + elem)
}
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="//vinceg.github.io/twitter-bootstrap-wizard/prettify.css">
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/bootstrap/js/bootstrap.min.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<script src="//vinceg.github.io/twitter-bootstrap-wizard/prettify.js"></script>
<form role="form" id="chartwizard" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step"></span><span class="title">Chart Type</span>
</li>
<li><span class="step"></span><span class="title">Data Source</span>
</li>
<li><span class="step"></span><span class="title">Data</span>
</li>
<li><span class="step"></span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane">
<div align="center">
tab2
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
<div id="tab3" class="tab-pane">
<div align="center">
tab3
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
<div id="tab4" class="tab-pane">
<div align="center">
tab4
<img height="100px" width="100px" src="http://placehold.it/200x150" class="img-responsive" /></div>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
Here I assume three image corresponds to three tabs

The following will save the selections made (and advance to the next tab). Selections are stored in an object by tab index.
It saves the element ID of elements that have the class saveAndMoveNext. This class is also what triggers the "save this and move to the next tab".
When running it is best to click on the "Full Page" link. I'm not familiar with pyjade, but I have tried to keep it as close to how it was written in the question:
// shim to execute code as written
var p = {};
var chosenSelections = {}; // stores each selection by tab #
//Chart Wizard form
p._initChartWizard = function() {
var o = this;
var $chartwizard = $('#chartwizard'); // cache
$chartwizard.bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $chartwizard);
}
});
// set up selection saving and moving to next tab
$('#chartwizard').find(".saveAndMoveNext").click(function() {
o._saveAndChangeTab($chartwizard, this)
});
}
p._handleTabShow = function(tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._saveAndChangeTab = function(wizard, el) {
var currentTab = wizard.bootstrapWizard('currentIndex');
chosenSelections[currentTab] = el.id;
console.log("Selection saved by tab index:",chosenSelections);
wizard.bootstrapWizard('next'); // move to next tab
}
//window.boostbox = window.boostbox || {};
//window.boostbox.sdm = new sdm;
//}(jQuery)); // pass in (jQuery):
// A shim to execute code as written
$(document).ready(function() {
p._initChartWizard();
});
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://vinceg.github.io/twitter-bootstrap-wizard/jquery.bootstrap.wizard.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image1" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image2" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<a href="javascript:void(0);"><img id="image3" class="saveAndMoveNext" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgdmlld0JveD0iMCAwIDE0MCAxNDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzE0MHgxNDAKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xNWFmZGQyMTE5YSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE1YWZkZDIxMTlhIj48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjE0MCIgZmlsbD0iI0VFRUVFRSIvPjxnPjx0ZXh0IHg9IjQzLjUiIHk9Ijc0LjgiPjE0MHgxNDA8L3RleHQ+PC9nPjwvZz48L3N2Zz4="
class="img-responsive" /></a>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane">
<br/>
<br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane">
<br/>
<br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane">
<br/>
<br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>

There are two problems in your code.
The class name nexT in <div class="box-body chartOption nexT"> should be nextT as you write this in your js: $('.nextT').click(function(){
The wizard is not a function, so you can't call it like wizard('next');. You can take advantage of its nextSelector(recommended) or write $(".next:not(.last)").click(); instead.
After fixing these problems, your code should be like this:
<body>
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexTT">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body">
<img src="img/head.png" class="img-responsive" />
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>
<script>
(function ($) {
"use strict";
var sdm = function () {
var o = this;
$(document).ready(function () {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function () {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
console.log(this);
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({
'nextSelector': '.chartOption'
});
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({
width: percent + '%'
});
$('.form-wizard-horizontal').find('.progress').css({
'width': percentWidth
});
}
p._nextTab = function (wizard) {
$('.nexTT').click(function () {
$(".next:not(.last)").click();
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
</script>
</body>
Refer to http://vinceg.github.io/twitter-bootstrap-wizard/

(function($) {
"use strict";
var sdm = function() {
var o = this;
$(document).ready(function() {
o.initialize();
});
};
var p = sdm.prototype;
p.initialize = function() {
this._initChartWizard();
};
//Chart Wizard form
p._initChartWizard = function () {
var o = this;
$('#chartwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $('#chartwizard'));
o._nextTab(o);
}
});
$('#chartwizard').bootstrapWizard({ 'nextSelector': '.chartOption' });
$('img').on('click', function() {
var step = $(this).attr('data-step');
$('#chartwizard').bootstrapWizard('show', step);
});
}
p._handleTabShow = function (tab, navigation, index, wizard) {
var total = navigation.find('li').length;
var current = index + 0;
var percent = (current / (total - 1)) * 100;
var percentWidth = 100 - (100 / total) + '%';
navigation.find('li').removeClass('done');
navigation.find('li.active').prevAll().addClass('done');
wizard.find('.progress-bar').css({ width: percent + '%' });
$('.form-wizard-horizontal').find('.progress').css({ 'width': percentWidth });
}
p._nextTab = function(wizard) {
$('.nextT').click(function(){
wizard('next');
});
}
window.boostbox = window.boostbox || {};
window.boostbox.sdm = new sdm;
}(jQuery)); // pass in (jQuery):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="chartwizard" class="form-wizard form-wizard-horizontal">
<form role="form" novalidate="novalidate" class="form-horizontal form-bordered">
<div class="form-wizard-nav">
<div class="progress">
<div class="progress-bar progress-bar-primary"></div>
</div>
<ul class="nav nav-justified">
<li class="active"><span class="step">1</span><span class="title">Chart Type</span>
</li>
<li><span class="step">2</span><span class="title">Data Source</span>
</li>
<li><span class="step">3</span><span class="title">Data</span>
</li>
<li><span class="step">4</span><span class="title">Chart Options</span>
</li>
</ul>
</div>
<div class="tab-content">
<div id="tab1" class="tab-pane active">
<div class="row">
<div class="col-sm-3">
<div class="box">
<div class="box-body chartOption nexT"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=1&w=50&h=50" class="img-responsive" data-step="1"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=2&w=51&h=50" class="img-responsive" data-step="2"/>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="box">
<div class="box-body"><img src="https://placeholdit.imgix.net/~text?txtsize=20&txt=3&w=52&h=50" class="img-responsive" data-step="3"/>
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane"><br/><br/>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab-pane"><br/><br/>
<p>Tab 3</p>
</div>
<div id="tab4" class="tab-pane"><br/><br/>
<p>Tab 4</p>
</div>
</div>
<div class="pager wizard">
<li class="previous first">First
</li>
<li class="previous">Previous
</li>
<li class="next last">Last
</li>
<li class="next">Next
</li>
</div>
</form>
</div>
You may simply find the index of the image on click using $(this).index() and then call the $('#wizard').bootstrapWizard('show', index);
For more flexibility, you may add a data-step atribute to the img and specify the step you want to go to. For example <img src="image-source" data-step="2" />. Then on click get the value of this attribute and pass it to this call $('#rootwizard').bootstrapWizard('show', value);
You can do this by attaching a click handler to the images when you initialize the wizard
p._initChartWizard = function() {
var o = this;
var $chartwizard = $('#chartwizard'); // cache
$chartwizard.bootstrapWizard({
onTabShow: function(tab, navigation, index) {
o._handleTabShow(tab, navigation, index, $chartwizard);
}
});
// set up selection saving and moving to next tab
$('#chartwizard').find(".saveAndMoveNext").click(function() {
o._saveAndChangeTab($chartwizard, this)
});
$('img').on('click', function() {
var step = $(this).attr('data-step');
$chartwizard.bootstrapWizard('show', step);
});
}
Alternatively, you may get the wizards current index on click and show the next one
$('img').on('click', function(){
var index = $('#chartwizard').bootstrapWizard('currentIndex'),
totalTabs = $('#chartwizard').bootstrapWizard('navigationLength');
if(index === (totalTabs - 1)) {
index = 0;
} else {
index += 1;
}
$('#chartwizard').bootstrapWizard('show', index);
});
OR simply call next on wizard
$('img').on('click', function(){
$('#chartwizard').bootstrapWizard('next');
})

We Keep Coding

JavaScript is the programming language of the Web.

Totality Error when adding the same item twice - javascript

Related

Display no results message for input filtering a list of cards

How to create multi-filter gallery like woocommerce/ecommerce product filter

Active all data id and # when Onclick

Simple sort DIV by name, and number

Bootstrap Wizard next tab on image click and capture value

Categories

Resources