- Posts: 222
- Thank you received: 10
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Combined Array with large free text comment fields
- krosser
- Offline
- Elite Member
Less
More
4 years 11 months ago - 4 years 11 months ago #182636
by krosser
Hi Tony!
Could you please test the script again, as the Next/Submit part is still not working properly. It is kinda buggy. When used in an active survey with tokens, then it does not allow both 'Resume later' link or 'Index menu' to save or change groups. Only the Next button works. Also, when you click on the Previous button to check that page, sometimes you see another column created and what was written in text boxes is lost (see the screenshot below).
I have several surveys that rely on these workarounds and it will be a disaster.
If you manage to correct that it would help a lot, since this problem occurs in all other similar scripts. For example, the list-with-comments questions in modals that you posted the last here.
I have tested in LS 3.15 & 16.
Many thanks in advance!
EDIT: I have also found that the issue occurs when there are at least two of such a question on the same page.
I have created a text survey where one of the issues happens - the Resume later and Index menu do not work unless you click on Next afterwards. But it doesn't clear the text when you then click on Previous, like in other cases. It is strange that it behaves differently.
monitoringhsd.limequery.com/681749?token=TEST&newtest=Y
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Combined Array with large free text comment fields
tpartner wrote: Okay, here is updated JavaScript for 3.x.
[EDIT]24/08/2018 - Submit function modified to fix "Save and Resume Later" bug.[/EDIT]
Code:<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify the questions var qArrayID = {QID}; var qArray = $('#question'+qArrayID); var arrayLength = $('tr.answers-list', qArray).length; var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')'); // Add some classes qArray.addClass('array-with-comments-question'); $(qComments).each(function(i) { $(this).addClass('comments-question index-'+i).css({ 'position': 'absolute', 'left': '-9999em' }); }); // Insert the comments buttons $('table.questions-list colgroup', qArray).append('<col />'); var tableWidth = $('table.questions-list:eq(0)', qArray).width(); var answerWidth = $('col.ls-col-odd:eq(0)', qArray).width(); var answerWidthPercent = (answerWidth/tableWidth)*100; var answersLength = $('col.ls-col-odd, col.ls-col-even', qArray).length; var answerWidthPercent2 = (answerWidthPercent*answersLength)/(answersLength+1) $('table.questions-list col', qArray).removeAttr('width'); $('table.questions-list col:not(.col-answers)', qArray).css('width', answerWidthPercent2+'%'); $('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto'); $('table.questions-list thead tr', qArray).append('<td />'); $('tr.answers-list', qArray).each(function(i) { $(this).append('<td class="answer-item">\ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comments-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comments</button>\ </td>'); }); // Handle comments $(qComments).each(function(i) { // Create modals $('body').append('<div class="modal comments-modal" id="comments-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\ <div class="modal-dialog" role="document">\ <div class="modal-content">\ <div class="modal-header">\ <h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\ </div>\ <div class="modal-body">\ </div>\ <div class="modal-footer">\ <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Clear</button>\ </div>\ </div>\ </div>\ </div>'); // Move textareas into modals $('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this)); // Modal button events $('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) { $('#comments-'+qArrayID+'-'+(i+1)+' textarea').val(''); }); }); // Interrupt the Next/Submit function (to put comments back in the form) $('#limesurvey').submit(function(e) { $('.comments-modal').each(function(i) { var qID = $('textarea:eq(0)', this).attr('id').split('X')[2]; $('#question'+qID+' .answer-item:eq(0)').append($('textarea:eq(0)', this)); }); }); }); </script>
Sample survey attached:
Hi Tony!
Could you please test the script again, as the Next/Submit part is still not working properly. It is kinda buggy. When used in an active survey with tokens, then it does not allow both 'Resume later' link or 'Index menu' to save or change groups. Only the Next button works. Also, when you click on the Previous button to check that page, sometimes you see another column created and what was written in text boxes is lost (see the screenshot below).
I have several surveys that rely on these workarounds and it will be a disaster.
If you manage to correct that it would help a lot, since this problem occurs in all other similar scripts. For example, the list-with-comments questions in modals that you posted the last here.
I have tested in LS 3.15 & 16.
Many thanks in advance!
EDIT: I have also found that the issue occurs when there are at least two of such a question on the same page.
I have created a text survey where one of the issues happens - the Resume later and Index menu do not work unless you click on Next afterwards. But it doesn't clear the text when you then click on Previous, like in other cases. It is strange that it behaves differently.
monitoringhsd.limequery.com/681749?token=TEST&newtest=Y
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Last edit: 4 years 11 months ago by krosser. Reason: extra details...
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
4 years 11 months ago #182649
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 Combined Array with large free text comment fields
Disable AJAX in the survey theme options.
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: DenisChenu, krosser
The topic has been locked.
- krosser
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
4 years 11 months ago #182663
by krosser
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Combined Array with large free text comment fields
Thanks, Tony! Disabling AJAX has solved the issue with creating extra copies of the column, but it didn't solve the issue with Resume later & Question Index when there are two questions with this workaround in the same question group. Please see the link to an active survey or the attached copy. Do 'Resume later' and 'Question Index' work for you?tpartner wrote: Disable AJAX in the survey theme options.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The following user(s) said Thank You: duvemyster
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10611
- Thank you received: 3690
4 years 11 months ago #182677
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 Combined Array with large free text comment fields
Here is an updated script that fixes that bug:
Sample survey attached:
Code:
<script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify the questions var qArrayID = {QID}; var qArray = $('#question'+qArrayID); var arrayLength = $('tr.answers-list', qArray).length; var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')'); // Add some classes qArray.addClass('array-with-comments-question'); $(qComments).each(function(i) { $(this).addClass('comments-question index-'+i).css({ 'position': 'absolute', 'left': '-9999em' }); }); // Insert the comments buttons $('table.questions-list colgroup', qArray).append('<col />'); var tableWidth = $('table.questions-list:eq(0)', qArray).width(); var answerWidth = $('col.ls-col-odd:eq(0)', qArray).width(); var answerWidthPercent = (answerWidth/tableWidth)*100; var answersLength = $('col.ls-col-odd, col.ls-col-even', qArray).length; var answerWidthPercent2 = (answerWidthPercent*answersLength)/(answersLength+1) $('table.questions-list col', qArray).removeAttr('width'); $('table.questions-list col:not(.col-answers)', qArray).css('width', answerWidthPercent2+'%'); $('table.questions-list col:not(.col-answers)', qArray).css('width', 'auto'); $('table.questions-list thead tr', qArray).append('<td />'); $('tr.answers-list', qArray).each(function(i) { $(this).append('<td class="answer-item">\ <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#comments-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comments</button>\ </td>'); }); // Handle comments $(qComments).each(function(i) { // Create modals $('body').append('<div class="modal comments-modal" id="comments-'+qArrayID+'-'+(i+1)+'" tabindex="-1" role="dialog">\ <div class="modal-dialog" role="document">\ <div class="modal-content">\ <div class="modal-header">\ <h5 class="modal-title">'+$('.ls-label-question', this).html()+'</h5>\ </div>\ <div class="modal-body">\ </div>\ <div class="modal-footer">\ <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Okay</button>\ <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Clear</button>\ </div>\ </div>\ </div>\ </div>'); // Move textareas into modals $('#comments-'+qArrayID+'-'+(i+1)+' .modal-body').append($('textarea', this)); // Modal button events $('#comments-'+qArrayID+'-'+(i+1)+' .modal-footer .btn-secondary').on('click', function(e) { $('#comments-'+qArrayID+'-'+(i+1)+' textarea').val(''); }); }); // Interrupt the Next/Submit function (to put comments back in the form) $('#limesurvey').submit(function(e) { $('.comments-modal[id^="comments-'+qArrayID+'-"]').each(function(i) { var qID = $('textarea:eq(0)', this).attr('id').split('X')[2]; $('#question'+qID+' .answer-item:eq(0)').append($('textarea:eq(0)', this)); }); }); }); </script>
Sample survey attached:
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: DenisChenu, duvemyster, krosser
The topic has been locked.
- krosser
- Offline
- Elite Member
Less
More
- Posts: 222
- Thank you received: 10
4 years 11 months ago #182693
by krosser
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Replied by krosser on topic Combined Array with large free text comment fields
Excellent! Many thanks. :woohoo: I can see what you have changed.
So, I have used the update to correct the other scripts in this thread too.
So, I have used the update to correct the other scripts in this thread too.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
- duvemyster
- Offline
- Senior Member
Less
More
- Posts: 60
- Thank you received: 6
4 years 11 months ago #182777
by duvemyster
Replied by duvemyster on topic Combined Array with large free text comment fields
If using the list-with-comments version with resume, previous, or index active, then two lines after "// Interrupt the Next/Submit function (to put comments back in the form)" (the last comment),
change: $('.comments-modal').each(function(i) {
to: $('.comments-modal[id^="comments-'+qArrayID+'-"]').each(function(i) {
(This is the same change that @krosser refers to in the post just before this for updating the long free text comment version.)
change: $('.comments-modal').each(function(i) {
to: $('.comments-modal[id^="comments-'+qArrayID+'-"]').each(function(i) {
(This is the same change that @krosser refers to in the post just before this for updating the long free text comment version.)
The topic has been locked.