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

More

7 years 8 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>

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

7 years 8 months ago - 7 years 8 months 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: 7 years 8 months ago by tpartner.

The topic has been locked.

TSpeirs
Topic Author
Offline
New Member

More

7 years 8 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.

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

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Dynamic sub-header insert

Lime-years ahead

Legal

About Us

Open Source