Welcome to the LimeSurvey Community Forum

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

Upload modal - Strange behavior after upgrade to version 5

squidy
Topic Author
Offline
Senior Member

More

2 years 4 weeks ago #226800 by squidy

Upload modal - Strange behavior after upgrade to version 5 was created by squidy

Your LimeSurvey version: 5.3.7+220328
Own server or LimeSurvey hosting: Own server
Survey theme/template: fruity
==================
Hi.. I have been using upload button in modal combined with array and various short texts in limesurvey version 3.X.. It was working perfectly.. However after upgrading to version 5 this is not good..
The button is in the correct location, but when the user clicks the button and tries to select a file, the popup hides the confirmation screen. User needs to scroll down to find and click save button. After confirmation, the input text field is hidden.

The javascript that I'm using is bellow (array + multiple short text + upload question)

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">Enviar arquivo</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">Fechar</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>

When the button is only combined with several short texts to display at the bottom of the question, the popup is displayed, but when the user clicks the "Upload files" button, the screen to select the file is behind the first one.

The javascript that I'm using is bellow (multiple short text + upload question)

Code:

<script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify the questions
        var thisQID = {QID};
        var thisQuestion = $('#question'+thisQID);
        var subquestionsLength = $('.answer-item', thisQuestion).length;
        var qUploads = thisQuestion.nextAll('.upload-files:eq(0)');
 
        // Add some classes
        $(qUploads).addClass('uploads-question index-'+i).css({
            'position': 'absolute',
            'left': '-9999em'
        });
 
          // Insert the comments buttons
        $('.answer-item:last', thisQuestion).each(function(i) {
        $('input:text', this).after("\n\n\n<br>"+'<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#uploads-'+thisQID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comprovante de endereço</button>');
        });
 
        // Handle comments
        $(qUploads).each(function(i) {
            // Create modals
            $('body').append('<div class="modal uploads-modal" id="uploads-'+thisQID+'-'+(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">Fechar</button>\
                                        </div>\
                                    </div>\
                                </div>\
                            </div>');
 
            // Move the Upload questions into modals
            $('#uploads-'+thisQID+'-'+(i+1)+' .modal-body').append($('.ls-answers', this));
 
        });
 
        // Interrupt the Next/Submit function (to put comments back in the form)
        $('#limesurvey').submit(function(e) {
            $('.uploads-modal[id^="uploads-'+thisQID+'-"]').each(function(i) {
                var qID = $('input:eq(0)', this).attr('id').split('X')[2];
                $('#question'+qID+' .answer-container').append($('.ls-answers', this));
            });
        });    
    });
</script>

May you help me?

Using LS 5.x

Please Log in to join the conversation.

Joffm
Online
LimeSurvey Community Team

More

2 years 4 weeks ago #226803 by Joffm

Replied by Joffm on topic Upload modal - Strange behavior after upgrade to version 5

Hi,
would have been better you'd sent these questions as lss export.
Please, ease our life.
We can't create a new survey to build your questions without the exact knowledge where we then may insert the script you used.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

2 years 4 weeks ago #226805 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

Hi, Joffm..
I've attached the lss file here..

Thanks..

Using LS 5.x

Attachments:

...vey_862893.lss

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

2 years 3 weeks ago #226830 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

I have the hideEmptyColumn plugin enabled. The input text field was not hidden after I wrote a text in the title of the multiple short text question. However, the modal dialog is still having problems.

Using LS 5.x

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

2 years 2 weeks ago #227055 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

Does anyone know if there is any bug in version 5 related to this?

Using LS 5.x

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

2 years 2 weeks ago #227103 by tpartner

Replied by tpartner on topic Upload modal - Strange behavior after upgrade to version 5

The problem is that (for some unknown reason) the file upload modals have been moved from the <body> element into the file upload question .answer-container elements, causing a problem with container sizes.

In my opinion, to avoid exactly this type of issue, modals should always be appended to the <body> element, not inserted into child elements.

This will take a fair amount of development to work around.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

2 years 2 weeks ago #227155 by tpartner

Replied by tpartner on topic Upload modal - Strange behavior after upgrade to version 5

In 5.x, use this script and CSS to insert file-upload modals into an array question.

Code:

<script type="text/javascript" data-author="Tony Partner">  
 
  $(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).addClass('hidden');
 
    // 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).removeClass('hidden');
    });
 
    // Interrupt the Next/Submit function (to put upload questions back in the form)
    $('#ls-button-submit').on('click', function(e) {    
      $('.upload-modal .upload-files').appendTo($('.group-container:eq(0)')).addClass('hidden');
    });  
  });
</script>

Code:

<style type="text/css" data-author="Tony Partner">
  .upload-modal .file-upload-modal.in {
    height: max-content;
  }
</style>

Sample survey attached:

File Attachment:

File Name: limesurvey...4594.lss
File Size:29 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

2 years 2 weeks ago #227158 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

Nice, Tony... Thank you so much.
and how about upload modal at the end of the multiple short text without array... Do you have any trick?

Using LS 5.x

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

2 years 2 weeks ago #227163 by tpartner

Replied by tpartner on topic Upload modal - Strange behavior after upgrade to version 5

I don't see the need to insert modals in this case. I would just visually merge the two questions with CSS.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

2 years 2 weeks ago #227169 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

In 3.x I was using a javascript code to merge those two questions.. If you don't mind, could you please show how to do that using only css?

Thanks in advanced.

Using LS 5.x

Please Log in to join the conversation.

tpartner
Away
LimeSurvey Community Team

More

2 years 2 weeks ago #227176 by tpartner

Replied by tpartner on topic Upload modal - Strange behavior after upgrade to version 5

Give the first question a CSS class "merge-bottom" and the second question a CSS class "merge-top hide-question-text" (assuming you also want to hide the second question text).

Place this CSS in your theme custom.css file. This is for the vanilla theme so may need slight modifications for other themes.

Code:

<style type="text/css" data-author="Tony Partner">
  .question-container.merge-bottom {
    margin-bottom: 0;
    border-bottom: 0 none;
  }
 
  .question-container.merge-top {
    margin-top: -1px;
    border-top: 0 none;
  }
 
  .question-container.hide-question-text .question-title-container {
    display: none;
  }
</style>

Sample survey with the CSS in the source of the first question:

File Attachment:

File Name: limesurvey...5147.lss
File Size:26 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

squidy
Topic Author
Offline
Senior Member

More

1 year 8 months ago #231259 by squidy

Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5

Hi Tony.
I used your code to make a modal combined with array and various short texts. It's working fine, except that when I click the upload button and select a file, the multiple short text input field increases in size. Take a look at the images below.

Before selecting the file