Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Dynamic sub-header insert

More
9 years 1 month ago #157451 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>
The topic has been locked.
More
9 years 1 month ago - 9 years 1 month ago #157464 by tpartner
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.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 9 years 1 month ago by tpartner.
The topic has been locked.
More
9 years 1 month 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.
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.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose