- Posts: 2
- Thank you received: 0
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
- Topic Author
- Offline
- New Member
Less
More
7 years 8 months ago - 7 years 8 months ago #139716
by anishshah97
How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5 was created 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 8 months ago by anishshah97. Reason: Grammar mistakes
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
7 years 8 months ago #139717
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 How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5
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
- Topic Author
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
7 years 8 months ago #139764
by anishshah97
Replied by anishshah97 on topic How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5
Thank you! It works now!
The topic has been locked.
- Brimfulof
- Offline
- New Member
Less
More
- Posts: 6
- Thank you received: 0
7 years 8 months ago #140096
by Brimfulof
Replied by Brimfulof on topic How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5
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 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)
Attachments:
The topic has been locked.
- egrange
- Offline
- New Member
Less
More
- Posts: 2
- Thank you received: 0
7 years 3 months ago #147033
by egrange
I too cannot find an Array (Multi Flexible Text) type question, only Array (Texts). Scratching my head here . . .
Replied by egrange on topic How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
7 years 3 months ago #147034
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 How to add dynamic rows to an Array (Multi Flexible) in LimeSurvey 2.5
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.