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

More
4 years 11 months ago - 4 years 11 months ago #182636 by krosser

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:

File Attachment:

File Name: limesurvey...1749.lss
File Size:23 KB



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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #182649 by tpartner
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.
More
4 years 11 months ago #182663 by krosser

tpartner wrote: Disable AJAX in the survey theme options.

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?

File Attachment:

File Name: limesurvey...4.19.lss
File Size:32 KB

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
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 years 11 months ago #182677 by tpartner
Here is an updated script that fixes that bug:

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:

File Attachment:

File Name: limesurvey...5391.lss
File Size:32 KB

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, duvemyster, krosser
The topic has been locked.
More
4 years 11 months ago #182693 by krosser
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.

I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
More
4 years 11 months ago #182777 by duvemyster
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.)
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose