Welcome to the LimeSurvey Community Forum

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

dynamic rows in array (javascript)

  • JoséphineB.
  • JoséphineB.'s Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 11 months ago #214895 by JoséphineB.
dynamic rows in array (javascript) was created by JoséphineB.
Hello,
I have an issue with an array question. I would like the participant to be able to add a new row (and remove it) in the board.
I've screenshot the question, so you can see. The problem is that I have no idea how to code. The button in the screenshot doesn't work.
I have tried this manual.limesurvey.org/Workarounds:_Manip...ipt#Expandable_Array
and this manual.limesurvey.org/Workarounds:_Manip...ble_Text.29_question
But it does not seem to work for my question. Please tell me what am I doing wrong.
Thank you ! :)


 
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Online
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago #214897 by Joffm
Replied by Joffm on topic dynamic rows in array (javascript)
Hi,

Please tell me what am I doing wrong

How can we know that if you do not show us what you did?

So, please attach the lss export of the relevant questions.

And please, mention the LimeSurvey version you are using.

Joffm

 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • JoséphineB.
  • JoséphineB.'s Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 11 months ago #214898 by JoséphineB.
Replied by JoséphineB. on topic dynamic rows in array (javascript)
Sorry, I am quite new to all of this. I'm using version 3.25.18+210316
And here is the question.
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Online
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago #214902 by Joffm
Replied by Joffm on topic dynamic rows in array (javascript)
Hi, Josephine,
1. we always ask for a LSS export, neither LSG nor LSQ.
Reason: LSG and LSQ exports are language sensitive. So to be able to import such a question or group we have to create a new survey with hopefully the same base language as the export.
Therefore: LSS.

Now your problem.

1. I don't see any kjavascript in your question.
2. What for is the drop-down in the subquestions? This will not be stored in the database.

Well, I will show you something.
 

There are two javascript snippets included.
The first do add the drop-downs.
If you would like to have more (in column 3 or 4) you see where they are added.
And also you see that I coded the X-scale "X001", "X002", ...
In my opinion it is less confusing than to see in the database something like "Q1_SQ002_SQ004" (what was row, what was column?)
Code:
<script type="text/javascript" charset="utf-8">
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
    // Add a question class
    thisQuestion.addClass('custom-array');
 
    // Column-specific classes
    $('table.subquestion-list tr', thisQuestion).each(function(i) {
      $('th, td', this).each(function(i) {
        $(this).addClass('column-'+i);
      });
    });
 
 
    // Insert selects
    $('.answer-item.answer_cell_X001', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">Mère</option>\
  <option value="2">Pére</option>\
  <option value="3">Soeur</option>\
  <option value="4">Frère</option>\
</select>');
    $('.answer-item.answer_cell_X002', thisQuestion).addClass('with-select').append('<select class="inserted-select form-control list-question-select">\
  <option value="">...</option>\
  <option value="1">masculin</option>\
  <option value="2">femelle</option>\
  <option value="3">autre chose </option>\
</select>');
 
    // Listeners
    $('.inserted-select', thisQuestion).on('change', function(i) {
      if($(this).val() != '') {
        $(this).closest('.answer-item').find('input:text').val($('option:selected', this).val()).trigger('change');
      }
      else {
        $(this).closest('.answer-item').find('input:text').val('').trigger('change');
      }
    });
 
  // Returning to page
    $('.with-select input:text', thisQuestion).each(function(i) {
      var thisCell = $(this).closest('.answer-item');
      var inputText = $.trim($(this).val());
      $('select.inserted-select', thisCell).val(inputText);
    });
 
    // Clean-up styles
    $('select.inserted-select', thisQuestion).css({
      'max-width': '100%'
    });
    $('.with-select input:text', thisQuestion).css({
      'position': 'absolute',
      'left': '-9999em'
    });
  });
</script>

The second do add the button to create these "dynamic" rows
Code:
<script>
$(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 = '[+] ajouter';
            var removeContent = '[-] supprimer ';
 
            // Create the Add and Remove elements &amp; insert them
            var el1 = document.createElement('div');
            el1.setAttribute('id','addButton'+qID);
            el1.setAttribute('class','btn btn-primary');
            document.body.appendChild(el1);
            var el2 = document.createElement('div');
            el2.setAttribute('id','removeButton'+qID);
            el2.setAttribute('class','btn btn-primary');
            document.body.appendChild(el2);
 
            // Move them to after the array
            $( 'div#addButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).parent());
            $( 'div#removeButton'+qID ).appendTo($( '#question' + qID + ' table.ls-answers' ).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',
                'width':'auto',
                'cursor':'pointer',
                'float':'left'
            });
 
            $( 'div#removeButton'+qID ).css({
                'margin':'10px 0 0 10px',
                'padding':'1px',
                'text-align':'center',
                '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.ls-answers tr.subquestion-list';
                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.ls-answers tr.subquestion-list';
                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.ls-answers 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 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({QID});
 
});
 
</script>


And here the survey.
I added a second group with this my proposal.
 

File Attachment:

File Name: limesurvey...2712.lss
File Size:34 KB


Best regards

Joffm
 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • JoséphineB.
  • JoséphineB.'s Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 11 months ago #214923 by JoséphineB.
Replied by JoséphineB. on topic dynamic rows in array (javascript)
This is awesome ! Thank you very much.

I still have one problem : where does this code go ? I wrote this directly in the subquestions (like the screenshot - that's where it was in the first place), but I see you didn't. And I don't know where you put it.
I'm sorry, this is probably a stupid question: like I said, I just started this.

Thanks for your help again !
The topic has been locked.
  • Joffm
  • Joffm's Avatar
  • Online
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 11 months ago #214926 by Joffm
Replied by Joffm on topic dynamic rows in array (javascript)
Hi,
as you might have read here
[url] manual.limesurvey.org/Workarounds:_Manip...tc..29_in_LimeSurvey [/url]

To use JavaScript within LimeSurvey, the XSS filter must be turned off and the code inserted in the source of a question or a group description.


You put it into the question text in source code mode.

Joffm



 

Volunteers are not paid.
Not because they are worthless, but because they are priceless
The topic has been locked.
  • JoséphineB.
  • JoséphineB.'s Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 11 months ago #214964 by JoséphineB.
Replied by JoséphineB. on topic dynamic rows in array (javascript)
Thank you ! It works now !

Thank you so much.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose