Develop Reference

Multiple div height columns on row using JQuery

What approach can I take when I want to include multiple classes within a JQuery same height script?
I currently have four different divs classed as '.row-16' and it works perfectly, but how can I add more groups to this specific script?
I want to include .row-1 .row-2 etc..
Sorry for the confusion, but this is ultimately what I'm trying to achieve.
.row-1 has four columns that will all be the same height size depending on highest.
.row-2 will be separate from row-1 and will have it's own equal height columns.
Updated JSFiddle: http://jsfiddle.net/fLr9th4y/3/ - Working example on Row-11
Here is the code:
$(document).ready(function(){
$('.container').each(function(){
var highestBox = 0;
$(this).find('.row-16').each(function(){
if($(this).height() > highestBox){
highestBox = $(this).height();
}
})
$(this).find('.row-16').height(highestBox);
});
});
The above script currently aligns all four of my columns with the correct height, I just want to add more class groups.

Why not adding a new class, specifically for the elements that should have their height changed and target that? BTW, here is a similar script that I used a couple of years ago for such occasions.
(function ($, window, document, undefined) {
/**
* Equalize the height of the given items.
* #type {*|jQuery}
* #return mixed
* #param options
* Example: $('.item1, .item2').equalHeight({ container: '.container' });
*/
$.fn.equalHeight = function (options) {
var items, settings;
items = this;
settings = $.extend({
container: ''
}, options);
if (settings.container) {
// If a container is set, apply setHeight() for all containers.
$(settings.container).each(function () {
var thisC = $(this),
getItems = [];
$.each(items, function (index, value) {
getItems.push(thisC.find(value));
});
return setHeight(getItems);
});
} else {
// Otherwise we assume that the items exist only once in a page
// and we apply setHeight() to their first (and unique) instance.
return setHeight(this);
}
// Set the height of all items equal to the highest item.
function setHeight(getItems) {
var itemsH = [];
$(getItems).each(function () {
itemsH.push($(this).outerHeight());
});
var maxH = Math.max.apply(Math, itemsH);
$(getItems).each(function () {
return $(this).css('height', maxH);
});
}
}
})(jQuery, window, document);
(Demo)
Of course, I don't need it anymore, thanks to flexbox.

This should select each class that starts with "row", then get each unique one and then get the max height for each class and set all those to the max of the largest.
Per the question update, using the question and fiddle for possible answer using a given "row-" begins with, which does not seem to be in the fiddle but is in the question.
var myselector = 'row-';
function getRowMax(row) {
var heights = $(row).map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, heights);
return maxHeight;
}
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
function getrow(value, index, self) {
return value.startsWith(myselector);
}
$(function() {
var rows = $('.container').find("[class^='" + myselector + "']");
var classListAll = [];
rows.each(function(item) {
var classes = item.attr('class').split(/\s+/);
classListAll.concat(classes);
});
// var classListAll = rows.attr('class').split(/\s+/);
var classList = classListAll.filter(onlyUnique).filter(getrow);
$.each(classList, function(index, item) {
var sel = '.' + item;
var m = getRowMax(sel);
$(sel).height(m);
});
});
.heading {
background-color: #00C6D7;
}
.sub-heading {
background-color: white;
border-bottom: 1px solid lightgray;
}
h4,
h6 {
margin-bottom: 0px;
}
.container {
box-shadow: 0 1px 3px rgba(77, 72, 69, 0.2), 0 6px 10px rgba(77, 72, 69, 0.15);
}
.row>.col-md-12>span {
font-size: smaller;
}
.col-md-4>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-3>.row {
padding-top: .6rem!important;
padding-bottom: .6rem!important;
}
.col-md-2 {
display: flex;
justify-content: center;
align-items: center;
}
.col-md-9 {
padding: 0px!important;
}
.bl {
border-left: 1px solid lightgray;
}
.bb {
border-bottom: 1px solid #00C6D7;
}
.bg-white {
background-color: white;
}
.mainText {
font-style: italic;
color: #00C6D7;
}
.bg-fhdark {
background-color: #5E6A71;
}
.title {
color: #A2AD00;
}
.blank {
background: transparent!important;
}
.slick-prev,
.slick-next {
background: black!important;
}
.r1 {
color: black;
}
/* BootStrap 4 Classes */
.py-5 {
padding-bottom: 3rem!important;
padding-top: 3rem!important;
}
.py-2 {
padding-bottom: .5rem!important;
padding-top: .5rem!important;
}
.text-white {
color: #fff!important;
}
.text-left {
text-align: left!important;
}
.text-uppercase {
text-transform: uppercase!important;
}
.font-weight-bold {
font-weight: 700!important;
}
.small {
font-size: 80%;
font-weight: 400;
}
.row {
display: flex;
flex-wrap: wrap;
}
/* ----- */
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" />
<body>
<div class="py-5">
<div class="container">
<div class="row">
<div class="col-md-10 text-white text-left py-2 heading">
<h4 class="text-uppercase font-weight-bold">Core Competencies</h4>
<span class="small">Our goal was to develop a set of core competencies that are consistent across the agency amd reflect growth as a priority.
</span>
</div>
<div class="col-md-2 col-md-2 text-center py-2 heading">
<img src="" />
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="row r1">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Client</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Client Focus, Strategic Counsel and Consultancy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Integrated Strategy and Account Management</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Creativity and Innovation</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Talent</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Manage Full Talent LifeCycle</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Professional Development/Developing and Empowering</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Self-Leadership</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Business Development and Growth</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Strategy</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>Prospecting</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>New Business Pitch Preparation, Participation and Leadership</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Organic Growth</span>
</div>
</div>
<div class="row py-1 bg-fhdark">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
<span>Finance and Operations</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>Financial Management of Accounts (Account Profitability, Realization, Budgets) TEST TEST TEST TEST TEST TEST TEST</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>Staffing and Resource Planning</span>
</div>
</div>
</div>
<div class="col-md-9">
<section class="regular slider">
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Junior</h6>
<span>Valued Colleague and Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Mid</h6>
<span>Trusted Colleague; Proven and Creative Practitioner</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
<div class="col-md-4 bl">
<div class="row r1">
<div class="col-md-12">
<h6 class="text-uppercase font-weight-bold title">Senior</h6>
<span>Trusted Client Advisor and Partner; Proven Agency Leader</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>1</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>2</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>3</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>4</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>5</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>6</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>7</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>8</span>
</div>
</div>
<div class="row bb">
<div class="col-md-12">
<span>9</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>10</span>
</div>
</div>
<div class="row bg-fhdark">
<div class="col-md-12">
<div class="col-md-12 text-left text-uppercase font-weight-bold text-white">
</div>
</div>
</div>
<div class="row bb">
<div class="col-md-12 row-11">
<span>11</span>
</div>
</div>
<div class="row">
<div class="col-md-12">
<span>12</span>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript">
$(function() {
$(".regular").slick({
dots: false,
infinite: false,
slidesToShow: 2,
slidesToScroll: 1,
});
});
</script>
</body>

Easy:
$(document).ready(function() {
$('.container').each(function() {
var highestBox16 = 0;
var highestBox1 = 0;
var highestBox2 = 0;
var highestBox3 = 0;
//var highestBox..
$(this).find('.row-16,.row-1,.row-2,.row-3').each(function() {
if($(this).hasClass('row-16')){
if ($(this).height() > highestBox16) {
highestBox16 = $(this).height();
}
}
if($(this).hasClass('row-1')){
if ($(this).height() > highestBox1) {
highestBox1 = $(this).height();
}
}
if($(this).hasClass('row-2')){
if ($(this).height() > highestBox2) {
highestBox2 = $(this).height();
}
}
if($(this).hasClass('row-3')){
if ($(this).height() > highestBox3) {
highestBox3 = $(this).height();
}
}
})
$('.row-16,.row-1,.row-2,.row-3').height(highestBox);
});
});

How can I show/hide extra divs depending on data value set?

I have some JavaScript (Jquery) that will show a set amount of div's depending on the data arbitrate in the html.
If attribute set to 3 it will show 3 div's and clicking 'show more' will show all div's
It needs to do this for multiple sections, each with their own data attribute and only show or hide the divs that belong to the section clicked.
My current problem is that all sections are being shown on click and then vanishing as soon as they appear.
The desired effect is to have each section hide and show based on the click individually.
var INF = window.INF || {};
INF.sectorPageStrengths = (function(window, $, namespace) {
'use strict';
//variables
var _sectorPageStrengths = $('.sectorpage-strengths'),
_elements = 0,
// methods
init,
_bindShowMore, _bindShowLess,
_adjustHeigt, _checkElemnt, equalHeight;
_checkElemnt = function($element) {
var _vp = INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1:nth-child(n+' + (count + 1) + ')').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
};
_bindShowMore = function(container) {
// if data-items, data-infinite is defined, used it
var _showMore = $('.view-all-sectors-btn');
_showMore.on('click', function() {
$('.sectorpage-strengths .container > .row + .row >.marg1:nth-child(n+' + (_elements + 1) + ')').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
});
};
_bindShowLess = function() {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function() {
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top - 35
}, 700);
});
};
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(_sectorPageStrengths);
_bindShowLess();
$(window).on('load', function() {
equalHeight();
});
}
});
$("#loadPDFComponentModal").on('hidden.bs.modal', function() {
$("#hiddenIframe").html("");
});
};
return {
init: init
};
}(this, jQuery, 'INF'));
jQuery(INF.sectorPageStrengths.init());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1" style="display: none;">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container" style="height: 140px;">
<h3>heading</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

You are listening all the 'view more' button click in your code. so it causing problem.
Update code
code should handle individual container. The file changes are,
_checkElemnt = function($element) {
var _vp = 0;//INF.global.device.viewportN;
if (_vp === 0) {
var count = $element.data('desktop');
$element.find('.marg1').hide();
if ($element.find('.marg1').length >= (count + 1)) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = count;
} else if (_vp === 1) {
$element.find('.marg1:nth-child(n+5)').hide();
if ($element.find('.marg1').length > 4) {
$element.find('.view-all-sectors-btn-container').show();
} else {
$element.find('.view-all-sectors-btn-container').hide();
}
_elements = 4;
} else {
$element.find('.marg1:nth-child(n+4)').hide();
_elements = 3;
}
$element.find('.marg1').slice(0,count).each(function(index, ele){
$(ele).attr('data-display', true).show();
});
};
and
_bindShowMore = function(container) {
var _showMore = $(container).find('.view-all-sectors-btn');
_showMore.on('click', function(element) {
var isAllVisible = $(this).closest('.sectorpage-strengths').hasClass('showLess');
$(this).closest('.container').find('.row + .row >.marg1:not([data-display])').slideToggle();
$(this).parents('.sectorpage-strengths').toggleClass('showLess');
$(this).text(isAllVisible ?'view more' : 'view less');
if(isAllVisible){
console.log('isAllVisible', isAllVisible); // you handle some other action here if required
}
});
};
and
init = function() {
var EachView = jQuery('.sectorpage-strengths');
EachView.each(function(index, element) {
if (_sectorPageStrengths.length > 0) {
_checkElemnt($(element));
_bindShowMore(element);
// _bindShowLess(); this behaviour handled in bindShowMore itself
$(window).on('load', function() {
equalHeight();
});
}
});
i hope this will help you.

Here I bypass your code to just provide the simplest answer to the actual issue. I will leave it to you to work that in your code.
NOTE If you choose to not use a class you can do .toggle(true); instead of .toggleClass('hidden', true);
I used a class to simplify the original HTML.
$('.sectorpage-strengths').on('click', '.view-all-sectors-btn', function(event) {
var sect = $(event.delegateTarget);
var sectCount = sect.data('desktop');
var strengths = sect.find('.sectorpage-strengths-list').find('.marg1');
strengths.toggleClass('hidden', false);
var showCount = $(this).hasClass('less') ? strengths.length - 1 : sectCount - 1;
strengths.slice(0, showCount).toggleClass('hidden', true);
$(this).toggleClass('hidden', true);
$(this).siblings('.view-all-sectors-btn').toggleClass('hidden', false);
});
.sectorpage-strengths .marg1 {
border: solid lime 1px;
}
.yellow-container {
height: 140px;
background-color: #FFFFE0;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main1</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading1 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>
<section class="sectorpage-strengths" data-desktop="1">
<div class="container">
<div class="row">
<h2>heading main2</h2>
</div>
<div class="row sectorpage-strengths-list">
<div class=" marg1">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 1</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
<div class=" marg1 hidden">
<div class="sectorpage-strengths-list-item">
<div class="main-container">
<div class="yellow-container">
<h3>heading2 2</h3>
</div>
</div>
<div class="text-description">
text
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">View more<br><i class="informa-icon glyphicon glyphicon-plus-sign"></i></span>
<span class="center-block view-all-sectors-btn text-center less hidden" role="button">View less<br><i class="informa-icon glyphicon glyphicon-minus-sign"></i></span>
</div>
</div>
</section>

Script for tabs with progress bar

I wrote some script for fancy tabs with progress bar.
It is works but I got a problem: I use delay to make progress bar running and when you click to 1 then 3, 4 or any other tab and the back to 1 - got problems: progress bar breaks and leaves coloured parts.
var numberold = -1;
function check(number) {
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can try this
Now I am tired and dont know how to fix this.
I need a idea how to change algorithm or find unique solution for this.
Can somebody help?

You need to prevent any animation until the previous animation is done.
I added two vars finished1 & finished2 which will be true only when all animations are done
And if the function check(number) is activated while they are false .. the function must wait till they become true
Just like a traffic signal ;)
See the edited JavaScript
var numberold = -1;
var finished1 = true;
var finished2 = true;
function check(number) {
if(!finished1 || !finished2) {
window.setTimeout(function(){ check(number) }, 100);
return;
}
var name = "year" + number;
var nameold = "year" + numberold;
var nametab = "tab" + number;
var nametabold = "tab" + numberold;
var circlename = "circle" + number;
var circlenameold = "circle" + numberold;
if (numberold === -1) {
numberold = number;
} else {
finished1 = false;
finished2 = false;
//if (numberold != number) {
document.getElementById(nameold).style.color = '#D7D7D7';
document.getElementById(nametabold).style.visibility = 'hidden';
document.getElementById(nametabold).style.opacity = '0';
// if new tab later then old
if (number > numberold) {
var u = numberold;
var i = numberold;
(function() {
if (i < number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '100%';
setTimeout(arguments.callee, 300);
i++;
} else {
finished1 = true;
}
})();
(function() {
if (u <= number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#DBA741';
setTimeout(arguments.callee, 300);
u++;
} else {
finished2 = true;
}
})();
}
// if new tab earlier then old
else {
var u = numberold;
var i = numberold-1;
(function() {
if (i >= number) {
var linename = "line" + i;
document.getElementById(linename).style.width = '0%';
setTimeout(arguments.callee, 300);
i--;
} else {
finished1 = true;
}
})();
(function() {
if (u > number) {
var circlenameold = "circle" + u;
document.getElementById(circlenameold).style.backgroundColor = '#D7D7D7';
setTimeout(arguments.callee, 300);
u--;
} else {
finished2 = true;
}
})();
//}
}
}
// style the active tab
document.getElementById(circlename).style.backgroundColor = '#DBA741';
document.getElementById(name).style.color = '#DBA741';
document.getElementById(nametab).style.visibility = 'visible';
document.getElementById(nametab).style.opacity = '1';
numberold = number;
}
check(0);
.year {
color: #D7D7D7;
width: 14.28%;
float: left;
padding-top: 20px;
padding-bottom: 20px;
cursor: pointer;
}
.years {
margin-left: 10px;
color: #D7D7D7;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
user-select: none;
}
.step {
width: 14.28%;
float: left;
position: relative;
}
.line {
height: 5px;
background-color: #D7D7D7;
width: 100%;
margin-left: 50%;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.line-done {
width: 0%;
height: 100%;
background-color: #DBA741;
-webkit-transition: width .3s ease;
-o-transition: width .3s ease;
transition: width .3s ease;
}
.circle-base {
width: 10px;
height: 10px;
position: absolute;
bottom: -3%;
left: 50%;
background-color: #D7D7D7;
border-radius: 100%;
}
.column {
width: 20%;
float: left;
padding: 5px;
}
.block {
box-shadow: 0px 1px 5px 1px #D7D7D7;
padding: 5px;
}
.title {
color: #DBA741;
}
.tab-base {
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.5s;
}
.progress-body {
height: 5px;
width: 88%;
margin: 10px auto;
overflow: hidden;
background-color: #f5f5f5;
border-radius: 4px;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}
.col-xs-12 {
width: 100%;
float:left;
}
}
<div class="col-xs-10 col-xs-offset-1 text-center hidden-xs hidden-sm">
<div class="row">
<div class="col-xs-12" style="padding-bottom: 20px;">
<div class="row">
<div class="step">
<div class="years" onclick="check(0)" id="year0">
1964 - 1971
</div>
<div id="circle0" class="circle-base"></div>
<div class="line">
<div id="line0" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(1)" id="year1">
1964 - 1971
</div>
<div id="circle1" class="circle-base"></div>
<div class="line">
<div id="line1" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(2)" id="year2">
1964 - 1971
</div>
<div id="circle2" class="circle-base"></div>
<div class="line">
<div id="line2" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(3)" id="year3">
1964 - 1971
</div>
<div id="circle3" class="circle-base"></div>
<div class="line">
<div id="line3" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(4)" id="year4">
1964 - 1971
</div>
<div id="circle4" class="circle-base"></div>
<div class="line">
<div id="line4" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(5)" id="year5">
1964 - 1971
</div>
<div id="circle5" class="circle-base"></div>
<div class="line">
<div id="line5" class="line-done"></div>
</div>
</div>
<div class="step">
<div class="years" onclick="check(6)" id="year6">
1964 - 1971
</div>
<div id="circle6" class="circle-base" style="bottom: -12%;"></div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="row">
<div id="tab0" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab1" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab2" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab3" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab4" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab5" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
<div id="tab6" class="tab-base col-xs-10 col-xs-offset-1">
<div class="row">
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
<div class="column">
<div class="block equal-height">
<div class="title">
title
</div>
<div class="text">
test
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Spring, Thymeleaf and asynchronous data loading

Im right now facing a huge problem because i have a fragment containing a list with very big amount of data. What i do until now is the following:
When the user clicks a button I perform a javascript post like this:
function loadEvaluations() {
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$("#portal_container").html(data);
},
error : function(data) {
$("#portal_container").html(data);
}
});
}
In the Spring backend i select the data from the database, put it inside the model and return the fragment:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
This is getting presented in the fragment like the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
The Problem
Loading the data this way is a very bad user experience because the loading takes round about 10 seconds and the ui freezes and the user is not able to do something. He stays on the old page, has to wait 10 seconds and after that gets "navigated" to the new fragment.
What i need
I need a thymeleaf/spring solution to load the data asynchronously. So i want the user to see the new page immediatley after he clicked the link and is then getting presented some kind of loading animation while the data is gathered from the server. When the server is done the view should get updated automatically.
Is that possible?

You can have two separate controllers so that when the button is clicked on the other page it just calls the url to display the page:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION)
public String page(Model mode, HttpServletRequest request){
model.addAttribute(ReturnKeys.TIME, new Date());
model.addAttribute(ReturnKeys.ENTRIES, new ArrayList<>());
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, "");
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
then when the page loads you can have an onload function in the body tag or somewhere in the page that calls your javascript function and display an animation image somewhere in the page and hide it when the ajax call returns thus:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body onload="loadEvaluations()">
<img src="animation-image.jpg" style="display:none" id="animationImage"/>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
then your javascript can do:
function loadEvaluations() {
$('#animationImage').show();
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
},
error : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
}
});
}

How to show dynamic data in a Lightbox

I am using FancyBox lightbox from "http://fancyapps.com/fancybox/"
I want to show a "dynamic table" generating at runtime, in this Lightbox.
Please find the code of Table which will be generation at runtime on click of any <div class="bin">
<div class="vault overflowHidden">
<div class="floatLeft">
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S1</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 pkgs
</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
<div class="bin" data-cols="7" data-rows="4">
<div class="number">S4</div>
<div class="type">7x4</div>
<div class="description">Est. capacity: 72.8 packages</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S5</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S6</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 packages
</div>
</div>
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S8</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
</div>
<div class="floatRight">
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S2</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
<div class="loader">
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L1</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L2</div>
<div class="type">50.5-77.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L3</div>
<div class="type">93.6-119</div>
</div>
<div class="lot repack" data-cols="8" data-rows="1">
<div class="number">L4</div>
<div class="type">Repack</div>
</div>
<div class="lot removed">
<div class="number">L5</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L6</div>
<div class="type">93.6-119</div>
</div>
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L7</div>
<div class="type">42-50.5</div>
</div>
<div class="lot removed">
<div class="number">L8</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L9</div>
<div class="type">50.5-77.5</div>
</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S7</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S9</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
</div>
</div>
Here is the Table which will be generating on click of any above DIV:-
<div class="beanStructure overflowHidden">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Jquery for generating Table :-
<script>
function generateTable(rows, cols) {
$('table.container').add
$('table.container').each(function () {
for (i = 0; i < rows; i++) {
$(this).hide().append('<tr>').fadeIn(100);;
}
});
$('table.container tr').each(function () {
for (j = 0; j < cols; j++) {
$(this).hide().append('<td></td>').fadeIn(100);;
}
});
}
$(function() {
$('.bin, .lot').click(function() {
var repack = '';
if ($(this).hasClass('repack')) {
repack = ' repack';
}
var myRows = $(this).attr('data-rows');
var myCols = $(this).attr('data-cols');
$("table.container").html('');
$("div.tableContainer").removeClass().addClass('tableContainer bin-' + myCols + 'x' + myRows + repack + '');
generateTable(myRows, myCols);
//$('.beanStructure div').hide();
//$('.beanStructure div.bin-' + $(this).children('.type').html() + '').show();
});
});
</script>
Code for Calling Lightbox:-
<script>
//Lightbox Function
$(document).ready(function () {
$(".various").fancybox({
maxWidth: 1000,
maxHeight: 800,
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
</script>
Please let me know if you need any other information.
Thank You

Thanks Guys for looking into it! I got the solution!!
All I did is:-
I gave <a class="various" href="#inline"> tag outside each
<div class="bin">... </div></a>
Ex:-
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
And give id="inline" to the div inside which dynamic table is generating:-
<div class="beanStructure overflowHidden" id="inline">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Thanks once again