Spring, Thymeleaf and asynchronous data loading

Spring, Thymeleaf and asynchronous data loading - javascript

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);
}
});
}

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

How can i loop over an array to get jquery properties?

I have some fields that I want to hide if they are null. I am able to do this with:
if (json[0].incendio_edificio == null) {
$("#dIncendio_edificio").parent().parent().hide();
}
if (json[0].hvct_edificio == null) {
$("#dHvct_edificio").parent().parent().hide();
}
if (json[0].granizo_edificio == null) {
$("#dGranizo_edificio").parent().parent().hide();
}
What I want to do is put the fields inside a matrix and do the conditional inside a loop, like this:
const campos_poliza = [
[json[0].incendio_edificio, $("#dIncendio_edificio")],
[json[0].hvct_edificio, $("#dHvct_edificio")],
[json[0].granizo_edificio, $("#dGranizo_edificio")],
];
for (var x in campos_poliza){
if (x[0] == null) {
x[1].parent().parent().hide();
}
}
This doesn´t give any errors but it keeps showing null fields. How can I achieve this?
The html is:
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">Incendio Edificio:</span>
</div>
<div class="col s9">
<span id="dIncendio_edificio"></span>
</div>
</div>
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">HVCT Edificio:</span>
</div>
<div class="col s9">
<span id="dHvct_edificio"></span>
</div>
</div>
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">Granizo Edificio:</span>
</div>
<div class="col s9">
<span id="dGranizo_edificio"></span>
</div>
</div>

When you use for (var x in campos_poliza) , x is the index of array, which is 0, 1, 2...
This might be what you need:
for (var x of campos_poliza) {
if (x[0] == null) {
x[1].parent().parent().hide();
}
}
Or
campos_poliza.forEach(x => {
if (x[0] == null) {
x[1].parent().parent().hide();
}
});

Why not toggle if existing
const obj = [{ incendio_edificio:null, hvct_edificio : "not null", granizo_edificio : null }]
Object.entries(obj[0]).forEach(([key,val]) => {
const sel = `#d${key.slice(0,1).toUpperCase()}${key.slice(1)}`;
console.log(key,val,sel)
const $elem = $(sel)
if ($elem) $elem.closest(".row").toggle(val!=null)
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">Incendio Edificio:</span>
</div>
<div class="col s9">
<span id="dIncendio_edificio"></span>
</div>
</div>
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">HVCT Edificio:</span>
</div>
<div class="col s9">
<span id="dHvct_edificio"></span>
</div>
</div>
<div class="row">
<div class="col s3">
<span class="text-bold text-blue">Granizo Edificio:</span>
</div>
<div class="col s9">
<span id="dGranizo_edificio"></span>
</div>
</div>

Combine two filters with javascript

Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:

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>

Highcharts and HighMaps are overLapping

I am using highChart and highMap with div's created as slides.We are using jquery cycle 2 for the slide effect.
After certain time, the charts are overlapping in Mozilla. But in Chrome hidden slides chart disappears,but legend are present.
Image Link is given below.
https://www.facebook.com/photo.php?fbid=709625395825970&set=a.709625732492603.1073741832.100003355489549&type=1&theater
Sample Code:
jsp code:
<div id="cycle-slideshow" style="width: 100%;">
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for map
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for piechart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
</div>
code for slider:
function getslider(){
$('#cycle-slideshow').cycle({
timeout: 90000,
slides: '> div',
fx:'fade'
});
$( '#cycle-slideshow' ).on( 'cycle-after', function( event, opts ) {
console.log("lastRunTime "+lastRunTime);
console.log("timedifference "+((lastRunTime-event.timeStamp)/1000));
lastRunTime=event.timeStamp;
});
}
code for piechart:
function getShareOfVoice() {
$.ajax({
type:"POST",
dataType:"json",
url:'<s:url value="XXXXXX',
data:{sampledata : sampledate},
cache: false,
async:"false",
success:function(data) {
console.log("in success for share of voice");
var vals = JSON.parse(JSON.stringify(data));
if(vals.data.length>0){
var dataArray = vals.data;
var overallseries = [];
overallShareOfVoiceOptions.chart.renderTo = divid;
for ( var pos = 0; pos < dataArray.length; pos++) {
var d = dataArray[pos];
var dd = {};
var legend_icon = " ";
if (d.pic != null
&& typeof d.pic !== "undefined"
&& d.pic.length > 0) {
legend_icon = '<img style="width: 45px; height: 30px" src="'+d.pic+'" >';
} else {
legend_icon = d.name;
}
dd.color = d.cssStyle;
dd.y = d.count;
dd.name = legend_icon;
overallseries.push(dd);
}
overallShareOfVoiceOptions.series[0].data = overallseries;
if (overallseries.length > 0) {
var shareOfVoiceOverallGraph = new Highcharts.Chart(
overallShareOfVoiceOptions);
}
if (draw !== true) {
progressbar(divid);
}
setTimeout(function() {
getShareOfVoice();
}, 5 * 60 * 1000);
}
},error:function(data){
setTimeout(function() {
getShareOfVoice();
}, 2 * 60 * 1000);
}
});
}
code for highMap:
function getRegionChart() {
$.ajax({
type:"POST",
url:'XXXXXXXXXXXXXXXX',
dataType:'json',
data : {sampledata : sampledata},
success : function(data){
var regions = JSON.parse(JSON.stringify(data));
if(regions.length > 0){
$('#' + divid).highcharts('Map',{
title : {
text : null
},
subtitle : {
text : null
},
mapNavigation : {
enabled : false,
buttonOptions : {
verticalAlign : 'bottom'
}
},
legend : {
align : 'left',
layout : 'vertical',
verticalAlign : 'middle',
y : 10,
floating : true,
borderWidth : 0,
backgroundColor : 'white',
},
colorAxis : {
min : 0,
minColor : '#cccc00',
maxColor : '#666600'
},
navigation : {
menuItemStyle : {
fontSize : '10px'
},
buttonOptions : {
enabled : false
}
},
credits : {
enabled : false
},
series : [ {
data : regions,
mapData : Highcharts.maps['countries/in/custom/in-all-disputed'],
joinBy : 'hc-key',
name : 'State',
states : {
hover : {
color : '#BADA55'
}
},
dataLabels : {
enabled : true,
formatter : function() {
if(!(this.point.options["show"]))
return;
return this.point.value+ "%";
}
}
} ]
});
setTimeout(function() {
getRegionChart();
}, 5*60 *1000);
}
},error : function(data) {
setTimeout(function() {
getRegionChart();
},2*60 * 1000);
}
});
}

Develop Reference

JavaScript is the programming language of the Web.

Spring, Thymeleaf and asynchronous data loading - javascript

Related

Get text content of all parent divs

How can i loop over an array to get jquery properties?

Combine two filters with javascript

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

Highcharts and HighMaps are overLapping

Categories

Resources