- Posts: 12
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Dynamic sub-header insert
- TSpeirs
- Topic Author
- Offline
- New Member
Less
More
6 years 7 months ago #157451
by TSpeirs
Dynamic sub-header insert was created by TSpeirs
Hello everyone,
I've found a script on this forum which works just fine for me. The survey question I want to use it on has an array filter to another question. Because of the filter process, some of the sub-headers won't be necessary since not one single item from its category has been selected.
As you can see, the categories range from 1-7 (Germany) 8-11 (Belgium) etc.
Is there any way to dynamically insert the sub-header based on the range of answers given before?
Thanks a lot
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings
var subHeading1 = 'Germany';
var subHeading2 = 'Belgium';
var subHeading3 = 'Denmark';
var subHeading4 = 'Estonia';
var subHeading5 = 'Finland';
var subHeading6 = 'France';
var subHeading7 = 'Greece';
var subHeading8 = 'Irland';
var subHeading9 = 'Italy';
var subHeading10 = 'Hungary';
var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
// Insert the new rows
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
$('tr.answers-list:eq(7)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
$('tr.answers-list:eq(11)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
$('tr.answers-list:eq(16)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading4+'</th></tr>');
$('tr.answers-list:eq(20)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading5+'</th></tr>');
$('tr.answers-list:eq(24)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading6+'</th></tr>');
$('tr.answers-list:eq(28)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading7+'</th></tr>');
$('tr.answers-list:eq(31)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading8+'</th></tr>');
$('tr.answers-list:eq(34)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading9+'</th></tr>');
$('tr.answers-list:eq(39)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading10+'</th></tr>');
// Fix up the row classes
var rowClass = 1;
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1
}
else {
rowClass++;
$(this).removeClass('array1 array2')
if(rowClass % 2 == 0) {
$(this).addClass('array2');
}
else {
$(this).addClass('array1');
}
}
});
});
</script>
I've found a script on this forum which works just fine for me. The survey question I want to use it on has an array filter to another question. Because of the filter process, some of the sub-headers won't be necessary since not one single item from its category has been selected.
As you can see, the categories range from 1-7 (Germany) 8-11 (Belgium) etc.
Is there any way to dynamically insert the sub-header based on the range of answers given before?
Thanks a lot
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Identify this question
var thisQuestion = $('#question{QID}');
// Define the sub-heading text strings
var subHeading1 = 'Germany';
var subHeading2 = 'Belgium';
var subHeading3 = 'Denmark';
var subHeading4 = 'Estonia';
var subHeading5 = 'Finland';
var subHeading6 = 'France';
var subHeading7 = 'Greece';
var subHeading8 = 'Irland';
var subHeading9 = 'Italy';
var subHeading10 = 'Hungary';
var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length;
// Insert the new rows
$('tr.answers-list:eq(0)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading1+'</th></tr>');
$('tr.answers-list:eq(7)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading2+'</th></tr>');
$('tr.answers-list:eq(11)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading3+'</th></tr>');
$('tr.answers-list:eq(16)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading4+'</th></tr>');
$('tr.answers-list:eq(20)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading5+'</th></tr>');
$('tr.answers-list:eq(24)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading6+'</th></tr>');
$('tr.answers-list:eq(28)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading7+'</th></tr>');
$('tr.answers-list:eq(31)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading8+'</th></tr>');
$('tr.answers-list:eq(34)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading9+'</th></tr>');
$('tr.answers-list:eq(39)', thisQuestion).before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+subHeading10+'</th></tr>');
// Fix up the row classes
var rowClass = 1;
$('table.subquestions-list tbody tr', thisQuestion).each(function(i) {
if($(this).hasClass('sub-header-row')) {
rowClass = 1
}
else {
rowClass++;
$(this).removeClass('array1 array2')
if(rowClass % 2 == 0) {
$(this).addClass('array2');
}
else {
$(this).addClass('array1');
}
}
});
});
</script>
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10613
- Thank you received: 3691
6 years 7 months ago - 6 years 7 months ago #157464
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Dynamic sub-header insert
Unfortunately, I'm not able to offer code this week (responding from phone) but...
Assuming the filtering question is on a previous page, the solution would be to, as you insert the headers, test for visibility of the following row and add a CSS display style accordingly.
Assuming the filtering question is on a previous page, the solution would be to, as you insert the headers, test for visibility of the following row and add a CSS display style accordingly.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 6 years 7 months ago by tpartner.
The topic has been locked.
- TSpeirs
- Topic Author
- Offline
- New Member
Less
More
- Posts: 12
- Thank you received: 0
6 years 7 months ago #157644
by TSpeirs
Replied by TSpeirs on topic Dynamic sub-header insert
Thanks a lot for your answer and sorry for reaching you that late.
Your hint was very useful but in the end, a friend of mine and we came up with a different solution. We basically going to check if the visible rows of the answer list contain an ID with a certain STRING.
We hope that this going to help someone in the future.
Your hint was very useful but in the end, a friend of mine and we came up with a different solution. We basically going to check if the visible rows of the answer list contain an ID with a certain STRING.
We hope that this going to help someone in the future.
Code:
<script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length; var found = { 'de0': false, 'be0': false, 'bg0': false, 'dk0': false, 'ee0': false, }; var position = { 'de0': '0', 'be0': '7', 'bg0': '11', 'dk0': '16', 'ee0': '21', } var name = { 'de0': 'Germany', 'be0': 'Belgium', 'bg0': 'Bulgaria', 'dk0': 'Denmark', 'ee0': 'Estonia', } var find = [ 'de0', 'be0', 'bg0', 'dk0', 'ee0' ]; $('tr.answers-list:visible').each(function(){ var identifier = $(this).attr('id'); $.each(find, function(index, value){ if(identifier.indexOf(value) !== -1) { found[value] = true; } }); }); var found_keys = Object.keys(found); console.log(found_keys); $.each(found_keys, function(index, value){ if(found[value]) { $('tr.answers-list:eq(' + position[value] + ')').before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+name[value]+'</th></tr>'); } }); var rowClass = 1; $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { if($(this).hasClass('sub-header-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { // Identify this question var thisQuestion = $('#question{QID}'); var columnsLength = $('tr.answers-list:eq(0) > *', thisQuestion).length; var found = { 'de0': false, 'be0': false, 'bg0': false, 'dk0': false, 'ee0': false, }; var position = { 'de0': '0', 'be0': '7', 'bg0': '11', 'dk0': '16', 'ee0': '21', } var name = { 'de0': 'Germany', 'be0': 'Belgium', 'bg0': 'Bulgaria', 'dk0': 'Denmark', 'ee0': 'Estonia', } var find = [ 'de0', 'be0', 'bg0', 'dk0', 'ee0' ]; $('tr.answers-list:visible').each(function(){ var identifier = $(this).attr('id'); $.each(find, function(index, value){ if(identifier.indexOf(value) !== -1) { found[value] = true; } }); }); var found_keys = Object.keys(found); console.log(found_keys); $.each(found_keys, function(index, value){ if(found[value]) { $('tr.answers-list:eq(' + position[value] + ')').before('<tr class="sub-header-row"><th colspan="'+columnsLength+'">'+name[value]+'</th></tr>'); } }); var rowClass = 1; $('table.subquestions-list tbody tr', thisQuestion).each(function(i) { if($(this).hasClass('sub-header-row')) { rowClass = 1 } else { rowClass++; $(this).removeClass('array1 array2') if(rowClass % 2 == 0) { $(this).addClass('array2'); } else { $(this).addClass('array1'); } } }); }); </script>
The topic has been locked.