Welcome to the LimeSurvey Community Forum

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

Combining upload with Arrays

  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 8 months ago #172225 by krosser
Replied by krosser on topic Combining upload with Arrays
Cool! Thanks, Tony.

I see that the code breaks the text fields relocation part when executed simultaneously. I thought two scripts can be run together. I'm going to try to include your text field script into the modals alongside file upload - basically moving two into one modal.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 8 months ago #172228 by krosser
Replied by krosser on topic Combining upload with Arrays
Is it possible to make them run simultaneously?

So far I could combine your two codes (from here and for the long text fields), adding two modals.


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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
    var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
 
    // Add some classes COMMENTS
    qArray.addClass('array-with-comments-question');
    $(qComments).each(function(i) {
      $(this).addClass('comments-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
 
    // Add some classes UPLOADS
    qArray.addClass('array-with-uploads-question');
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-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">WebLink</button>\
              </td>');
    });
 
 
    // Insert the "Upload" 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="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });
 
 
    // Loop through the upload questions
    $(qUploads).each(function(i) {
      // Create a modal
      $('body').append('<div class="modal upload-modal" id="upload-'+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>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move this question into the modal
      $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
      $(this).css({
        'position': 'relative',
        'left': 'auto'
      });
    });
 
 
 
// 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 upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal').each(function(i) {
        $('.upload-files', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('.group-container').append($('.upload-files', this));
      });
    });  
 
 
    // Interrupt the Next/Submit function (to put comments back in the form)
    $('#ls-button-submit').on('click', 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>

File Attachment:

File Name: limesurvey...2637.lss
File Size:41 KB
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #172237 by tpartner
Replied by tpartner on topic Combining upload with Arrays
Do you want the "Weblink" in modals or simply a short-text input directly in the array?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago - 5 years 8 months ago #172238 by tpartner
Replied by tpartner on topic Combining upload with Arrays
It would require less clicks for the respondents if you simply insert the text inputs.

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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
    var qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
 
    // Add some classes
    qArray.addClass('array-with-uploads-question');
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Hide the multi-short-text question
    $(qMultiText).hide();
 
 
    // Insert the "Upload" buttons and a column for the text inputs
    $('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+2)
    $('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('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $(this).append('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });
 
    // Load the column label for the text inputs
    $('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
    $('.text-item', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>')
 
    // Loop through the multi-short-text sub-questions
    $('li.answer-item', qMultiText).each(function(i) {
      // Move the text inputs into the array
      $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
    });
 
    // Loop through the upload questions
    $(qUploads).each(function(i) {
      // Create a modal
      $('body').append('<div class="modal upload-modal" id="upload-'+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>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move this question into the modal
      $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
      $(this).css({
        'position': 'relative',
        'left': 'auto'
      });
    });
 
    // Interrupt the Next/Submit function (to put upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal').each(function(i) {
        $('.upload-files', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('.group-container').append($('.upload-files', this));
      });
    });  
  });
</script>





Sample survey attached:

File Attachment:

File Name: limesurvey...6371.lss
File Size:35 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 5 years 8 months ago by tpartner.
The following user(s) said Thank You: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 8 months ago - 5 years 8 months ago #172263 by krosser
Replied by krosser on topic Combining upload with Arrays
Yeah, this is what I needed originally, although wanted to position them after the "Yes" column so that when the respondents clicks "Yes", then the weblink and file upload would follow. That kind of logic.
I've looked through your code and it's not as easy for me to reposition them. Because it would also require labeling of the upload column.

BTW I've also noticed that you've set the the sub-question width to 20%. Is that required for this workaround? I've reset it and didn't notice any change in the appearance.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Last edit: 5 years 8 months ago by krosser.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #172264 by tpartner
Replied by tpartner on topic Combining upload with Arrays
To move the columns, change this:

Code:
    $('table.questions-list thead tr', qArray).append('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $(this).append('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });

To this:

Code:
    $('table.questions-list thead th.answer-text:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $('.answer-item:eq(0)', this).after('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });



Sample survey attached:

File Attachment:

File Name: limesurvey...2637.lss
File Size:35 KB

BTW I've also noticed that you've set the the sub-question width to 20%. Is that required for this workaround? I've reset it and didn't notice any change in the appearance.

Nope, I just did that for appearance.
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: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 8 months ago #172301 by krosser
Replied by krosser on topic Combining upload with Arrays
Tony, would it be possible to add the Upload label and another text field column?

I've managed to move the text fields and uploads to another column by changing 0 to 1 in this part:
Code:
$('table.questions-list thead th.answer-text:eq(1)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');



And this is what I would like to upgrade it to, with a possible reseting of text fields when "Do not know" is clicked.



I've started with adding these lines
Code:
var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
$(qMultiText2).hide();
But I can't distinguish between the Upload and text inputs lines in the code to add the 2nd text input column correctly. Could you please help out?

File Attachment:

File Name: limesurvey...5279.lss
File Size:52 KB
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 8 months ago #172333 by tpartner
Replied by tpartner on topic Combining upload with Arrays
Wow, this is getting pretty complex.

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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
    var qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
       var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
 
    // Add some classes
    qArray.addClass('array-with-uploads-question');
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Hide the multi-short-text questions
    $(qMultiText).hide();
        $(qMultiText2).hide();
 
 
    // Re-define some table widths
    $('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+2)
    $('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');
 
    // Insert the "Upload" buttons and a column for the "Weblink" inputs
    $('table.questions-list thead th.answer-text:eq(1)', qArray).after('<th class="answer-text inserted-column-label" /><th class="answer-text inserted-column-label" />');
    $('tr.answers-list', qArray).each(function(i) {
      $('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });
 
    // Load the column labels
    $('.inserted-column-label:eq(0)', qArray).text($('.ls-label-question', qMultiText).text());
    $('.text-item:nth-child(4)', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>');
    $('.inserted-column-label:eq(1)', qArray).text('Upload');
 
    // Loop through the first multi-short-text sub-questions
    $('li.answer-item', qMultiText).each(function(i) {
      // Move the text inputs into the array
      $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
    });
 
    // Loop through the second multi-short-text sub-questions
    $('li.answer-item', qMultiText2).each(function(i) {
      // Move the text inputs into the array (leaving the radios in that column in place)
      $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .radio-item:nth-child(7)', qArray));
    });
 
    // Hide the radios in the "other" column
    $('tr.answers-list .answer-item:nth-child(7)', qArray).removeClass('radio-item').addClass('text-item other-item');
    $('tr.answers-list .answer-item:nth-child(7) input[type="radio"]', qArray).css({
      'position': 'absolute',
      'left': '-9999em'
    });
 
    // Loop through the upload questions
    $(qUploads).each(function(i) {
      // Create a modal
      $('body').append('<div class="modal upload-modal" id="upload-'+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>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move this question into the modal
      $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
      $(this).css({
        'position': 'relative',
        'left': 'auto'
      });
    });
 
    // Listeners on the "Other" text inputs
    $('.other-item input[type="text"]', qArray).on('keyup change', function(e) {
      var thisRadio = $(this).closest('.answer-item').find('input[type="radio"]');
      var radioValue = '';
      if($.trim($(this).val()) != '') {
        $(thisRadio).trigger('click');
        radioValue = $(thisRadio).val();
      }
      else {
        $(thisRadio).prop('checked', false);
      }
      checkconditions(radioValue, $(thisRadio).attr('name'), $(thisRadio).attr('type'));
    });
 
    // Listeners on the "Do not know" radios
    $('.answer-item:nth-child(8) input[type="radio"]', qArray).on('click', function(e) {
      var thisRow = $(this).closest('.answers-list');
      // Clear the text inputs in this row
      $('input[type="text"]', thisRow).val('');
    });
 
    // Interrupt the Next/Submit function (to put upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal').each(function(i) {
        $('.upload-files', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('.group-container').append($('.upload-files', this));
      });
    });  
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...2792.lss
File Size:53 KB
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: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 8 months ago #172355 by krosser
Replied by krosser on topic Combining upload with Arrays

tpartner wrote: To move the columns, change this:

Code:
    $('table.questions-list thead tr', qArray).append('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $(this).append('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });

To this:

Code:
    $('table.questions-list thead th.answer-text:eq(0)', qArray).after('<th class="answer-text inserted-column-label" /><td />');
    $('tr.answers-list', qArray).each(function(i) {
      $('.answer-item:eq(0)', this).after('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });



Sample survey attached:

File Attachment:

File Name: limesurvey...2637.lss
File Size:35 KB



I'm trying to adjust this version as well by adding the upload label and listeners on "Do not know".
The listeners worked nicely. Just needed to change the number to 6 here
Code:
// Listeners on the "Do not know" radios
    $('.answer-item:nth-child(6) input[type="radio"]', qArray).on('click', function(e) {
      var thisRow = $(this).closest('.answers-list');
      // Clear the text inputs in this row
      $('input[type="text"]', thisRow).val('');
    });

But the Upload label doesn't show up when I add the line (and/or adjust the eq(1) number)
Code:
$('.inserted-column-label:eq(1)', qArray).text('Upload');
I've looked through other lines of the code and can't see anything related.
What am I missing here?

File Attachment:

File Name: limesurvey...2328.lss
File Size:28 KB
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 6 months ago #175442 by krosser
Replied by krosser on topic Combining upload with Arrays

tpartner wrote: Wow, this is getting pretty complex.


Hi Tony,
Can you please check how to adjust the code's part for loading the column labels, when you have repeated answer options?
Many thanks in advanced!



Sample survey attached...

File Attachment:

File Name: limesurvey...1832.lss
File Size:45 KB
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
Attachments:
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
5 years 6 months ago #175455 by tpartner
Replied by tpartner on topic Combining upload with Arrays
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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
    var qMultiText = qArray.nextAll('.multiple-short-txt:eq(0)');
       var qMultiText2 = qArray.nextAll('.multiple-short-txt:eq(1)');
 
    // Add some classes
    qArray.addClass('array-with-uploads-question');
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Hide the multi-short-text questions
    $(qMultiText).hide();
        $(qMultiText2).hide();
 
 
    // Re-define some table widths
    $('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+2)
    $('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');
 
    // Insert the "Upload" buttons and a column for the "Weblink" inputs
    $('tr.ls-heading', qArray).each(function(i) {
      $('th.answer-text:eq(1)', this).after('<th class="answer-text inserted-column-label" /><th class="answer-text inserted-column-label" />');
    });
    $('tr.answers-list', qArray).each(function(i) {
      $('.answer-item:eq(1)', this).after('<td class="answer-item text-item">\
              </td>\
              <td class="answer-item">\
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });
 
    // Load the column labels
    $('tr.ls-heading', qArray).each(function(i) {
      $('.inserted-column-label:eq(0)', this).text($('.ls-label-question', qMultiText).text());
      $('.inserted-column-label:eq(1)', this).text('Upload');
    });    
    $('.text-item:nth-child(4)', qArray).prepend('<label class="ls-label-xs-visibility">'+$('.ls-label-question', qMultiText).text()+'</label>');
 
    // Loop through the first multi-short-text sub-questions
    $('li.answer-item', qMultiText).each(function(i) {
      // Move the text inputs into the array
      $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .text-item', qArray));
    });
 
    // Loop through the second multi-short-text sub-questions
    $('li.answer-item', qMultiText2).each(function(i) {
      // Move the text inputs into the array (leaving the radios in that column in place)
      $('input[type="text"]', this).appendTo($('tr.answers-list:eq('+i+') .radio-item:nth-child(7)', qArray));
    });
 
    // Hide the radios in the "other" column
    $('tr.answers-list .answer-item:nth-child(7)', qArray).removeClass('radio-item').addClass('text-item other-item');
    $('tr.answers-list .answer-item:nth-child(7) input[type="radio"]', qArray).css({
      'position': 'absolute',
      'left': '-9999em'
    });
 
    // Loop through the upload questions
    $(qUploads).each(function(i) {
      // Create a modal
      $('body').append('<div class="modal upload-modal" id="upload-'+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>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move this question into the modal
      $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
      $(this).css({
        'position': 'relative',
        'left': 'auto'
      });
    });
 
    // Listeners on the "Other" text inputs
    $('.other-item input[type="text"]', qArray).on('keyup change', function(e) {
      var thisRadio = $(this).closest('.answer-item').find('input[type="radio"]');
      var radioValue = '';
      if($.trim($(this).val()) != '') {
        $(thisRadio).trigger('click');
        radioValue = $(thisRadio).val();
      }
      else {
        $(thisRadio).prop('checked', false);
      }
      checkconditions(radioValue, $(thisRadio).attr('name'), $(thisRadio).attr('type'));
    });
 
    // Listeners on the "Do not know" radios
    $('.answer-item:nth-child(8) input[type="radio"]', qArray).on('click', function(e) {
      var thisRow = $(this).closest('.answers-list');
      // Clear the text inputs in this row
      $('input[type="text"]', thisRow).val('');
    });
 
    // Interrupt the Next/Submit function (to put upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal').each(function(i) {
        $('.upload-files', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('.group-container').append($('.upload-files', this));
      });
    });  
  });
</script>
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: krosser
The topic has been locked.
  • krosser
  • krosser's Avatar Topic Author
  • Offline
  • Elite Member
  • Elite Member
More
5 years 1 month ago #181355 by krosser
Replied by krosser on topic Combining upload with Arrays

tpartner wrote: This script will place the Upload type questions in modals:

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 qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');
 
    // Add some classes
    qArray.addClass('array-with-uploads-question');
    $(qUploads).each(function(i) {
      $(this).addClass('uploads-question index-'+i).css({
        'position': 'absolute',
        'left': '-9999em'
      });
    });
 
    // Insert the "Upload" 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="#upload-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Upload</button>\
              </td>');
    });
 
    // Loop through the upload questions
    $(qUploads).each(function(i) {
      // Create a modal
      $('body').append('<div class="modal upload-modal" id="upload-'+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>\
                    </div>\
                  </div>\
                </div>\
              </div>');
 
      // Move this question into the modal
      $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));
      $(this).css({
        'position': 'relative',
        'left': 'auto'
      });
    });
 
    // Interrupt the Next/Submit function (to put upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal').each(function(i) {
        $('.upload-files', this).css({
          'position': 'absolute',
          'left': '-9999em'
        });
        $('.group-container').append($('.upload-files', this));
      });
    });  
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...5262.lss
File Size:35 KB


Hi Tony,

Sorry for bringing this old code up again, but I found out that the Resume later/Save function does not save the uploaded files, when the survey is token-based. I then noticed that you updated your code in another similar thread .
I would really appreciate it if you could take a look at this one as well. I could not figure out the necessary adjustments.
The survey example attached.

File Attachment:

File Name: limesurvey...2622.lss
File Size:35 KB

Many thanks in advance.
I'm using the latest LS 3.22 hosted on LS servers, not installed locally.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source