Welcome to the LimeSurvey Community Forum

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

How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5

  • anishshah97
  • anishshah97's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 7 months ago - 7 years 7 months ago #139716 by anishshah97
So below i added code to template.js for one of my questions. You can click the [+] to add the row and the [-] shows up so its evident the code runs, but no rows are actually added or removed. How do I fix this (i am using limesurvey 2.5)? Thank you!
Code:
$(document).ready(function() {
 
        // A function to add or remove rows of an Array (Multi Flexible)(Text) question
        function varLengthArray(qID) { 
      /* from http://docs.limesurvey.org/tiki-index.php?page=Workarounds%3A+Manipulating+a+survey+at+runtime+using+Javascript&structure=English+Instructions+for+LimeSurvey#Variable_Length_Array_Multi_Flexible_Text_question
      */ 
 
            if ($('#question'+qID+'').length > 0) {
 
                // The HTML content of the Add/Remove elements - modify as you wish
                var addContent = '[+]';
                var removeContent = '[-]';
 
                // Create the Add and Remove elements & insert them
                var el1 = document.createElement('div');
                el1.setAttribute('id','addButton'+qID);
                document.body.appendChild(el1);
                var el2 = document.createElement('div');
                el2.setAttribute('id','removeButton'+qID);
                document.body.appendChild(el2);
                // Move them to after the array
                $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
                $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.question' ).parent());
                // Insert their HTML
                $( 'div#addButton'+qID ).html( addContent );
                $( 'div#removeButton'+qID ).html( removeContent );
                // Style the elements - you can modify here if you wish
                $( 'div#addButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
                $( 'div#removeButton'+qID ).css({
                    'margin':'10px 0 0 10px',
                    'padding':'1px',
                    'text-align':'center',
                    'font-weight':'bold',
                    'width':'auto',
                    'cursor':'pointer',
                    'float':'left'
                });
 
                // Initially hide the Remove element
                $( 'div#removeButton'+qID ).hide();
 
                // Call the functions below when clicked
                $( 'div#addButton'+qID ).click(function (event) {
                    addRow(qID);
                });
                $( 'div#removeButton'+qID ).click(function (event) {
                    removeRow(qID);
                });
 
                // Function to add a row, also shows the Remove element and hides the 
                //Add element if all rows are shown
                function addRow(qID) {
                    var arrayRow = '#question' + qID + ' table.question tbody';
                    var rowCount = $( arrayRow ).size() - 1;
                    $( arrayRow + '[name="hidden"]:first' ).attr('name', 'visible').show();
                    $( 'div#removeButton'+qID ).show();
                    if ( $( arrayRow + ':eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
                        $( 'div#addButton'+qID ).hide();
                    }
                }
                // Function to remove a row, also clears the contents of the removed row, 
                // shows the Add element if the last row is hidden and hides the Remove 
                // element if only the first row is shown
                function removeRow(qID) {
                    var arrayRow = '#question' + qID + ' table.question tbody';
                    var rowCount = $( arrayRow ).size() - 1;
                    $( arrayRow + '[name="visible"]:last input[type="text"]' ).val('');
                    $( arrayRow + '[name="visible"]:last' ).attr('name', 'hidden').hide();
                    $( 'div#addButton'+qID ).show();
                    if ( $( arrayRow + ':eq(1)' ).attr('name') == 'hidden' )  {
                        $( 'div#removeButton'+qID ).hide();
                    }
                }
 
                // Just some initialization stuff
                var arrayRow = '#question' + qID + ' table.question tbody';
                var rowCount = '';
 
                // Initially hide all except first row or any rows with populated inputs
                $( arrayRow ).each(function(i) {
                    if ( i > 0 ) {
                        // We also need to give the hidden rows a name cause IE doesn't 
                        // recognize jQuery :visible selector consistently
                        $( this ).attr('name', 'hidden').hide();
                        $('input[type=text]', this).each(function(i) {
                            if ($(this).attr('value') !== '') {
                                $(this).parents('tbody:eq(0)').attr('name', 'visible').show();
                                $( 'div#removeButton'+qID ).show();
                            }
                        });
                        rowCount = i;
                    }
                });
            }
        }
 
        // Call the function with a question ID
        varLengthArray(17);
    });
Last edit: 7 years 7 months ago by anishshah97. Reason: Grammar mistakes
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 7 months ago #139717 by tpartner
Try this - it could probably be cleaned up a little more but I don't have time.

Code:
  $(document).ready(function() {
 
    // A function to add or remove rows of an Array (Multi Flexible)(Text) question
    function varLengthArray(qID) { 
 
      if ($('#question'+qID+'').length > 0) {
 
        // The HTML content of the Add/Remove elements - modify as you wish
        var addContent = '[+]';
        var removeContent = '[-]';
 
        // Insert the controls
        $('#question'+qID+' table.subquestion-list' ).after('<div id="addButton'+qID+'">'+addContent+'</div><div id="removeButton'+qID+'" style="display:none;">'+removeContent+'</div>');
 
        // Style the controls - you can modify here if you wish
        $( 'div#addButton'+qID ).css({
          'margin':'10px 0 0 10px',
          'padding':'1px',
          'text-align':'center',
          'font-weight':'bold',
          'width':'auto',
          'cursor':'pointer',
          'float':'left'
        });
        $( 'div#removeButton'+qID ).css({
          'margin':'10px 0 0 10px',
          'padding':'1px',
          'text-align':'center',
          'font-weight':'bold',
          'width':'auto',
          'cursor':'pointer',
          'float':'left'
        });
 
        // Call the functions below when clicked
        $( 'div#addButton'+qID ).click(function (event) {
          addRow(qID);
        });
        $( 'div#removeButton'+qID ).click(function (event) {
          removeRow(qID);
        });
 
        // Function to add a row, also shows the Remove element and hides the 
        //Add element if all rows are shown
        function addRow(qID) {
          $('#question'+qID+' tr.subquestion-list[name="hidden"]:first' ).attr('name', 'visible').show();
          $( 'div#removeButton'+qID ).show();
          if ($('#question'+qID+' tr.subquestion-list:eq(' + rowCount + ')' ).attr('name') == 'visible' )  {
            $( 'div#addButton'+qID ).hide();
          }
        }
        // Function to remove a row, also clears the contents of the removed row, 
        // shows the Add element if the last row is hidden and hides the Remove 
        // element if only the first row is shown
        function removeRow(qID) {
          $('#question'+qID+' tr.subquestion-list[name="visible"]:last input[type="text"]' ).val('');
          $('#question'+qID+' tr.subquestion-list[name="visible"]:last' ).attr('name', 'hidden').hide();
          $( 'div#addButton'+qID ).show();
          if ($('#question'+qID+' tr.subquestion-list:eq(1)').attr('name') == 'hidden' )  {
            $( 'div#removeButton'+qID ).hide();
          }
        }
 
        // Some initialization stuff
        var arrayRow = $('#question'+qID+' tr.subquestion-list');
        var rowCount = '';
 
        // Initially hide all except first row or any rows with populated inputs
        $( arrayRow ).each(function(i) {
          if ( i > 0 ) {
            // We also need to give the hidden rows a name cause older IE doesn't 
            // recognize jQuery :visible selector consistently
            $( this ).attr('name', 'hidden').hide();
            $('input[type=text]', this).each(function(i) {
              if ($(this).attr('value') !== '') {
                $(this).closest('tr.subquestion-list').attr('name', 'visible').show();
                $( 'div#removeButton'+qID ).show();
              }
            });
            rowCount = i;
          }
        });
      }
    }
 
    // Call the function with a question ID
    varLengthArray(17);
  });

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • anishshah97
  • anishshah97's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
7 years 7 months ago #139764 by anishshah97
Thank you! It works now!
The topic has been locked.
More
7 years 7 months ago #140096 by Brimfulof
I've tried to use this script in an Array (Texts) question, but it doesn't seem to do anything.

I can't see how to select Array (Multi Flexible) it doesn't appear in my dropdown of question types.

Any idea what I might be doing wrong? (.lss file attached)
The topic has been locked.
More
7 years 2 months ago #147033 by egrange

Brimfulof wrote: I've tried to use this script in an Array (Texts) question, but it doesn't seem to do anything.

I can't see how to select Array (Multi Flexible) it doesn't appear in my dropdown of question types.

Any idea what I might be doing wrong? (.lss file attached)


I too cannot find an Array (Multi Flexible Text) type question, only Array (Texts). Scratching my head here . . .
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Away
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
7 years 2 months ago #147034 by tpartner
Array (Texts) is the correct question type for that workaround.

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose