- Posts: 41
- Thank you received: 1
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
Less
More
2 years 4 weeks ago #226800
by squidy
Using LS 5.x
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)
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)
May you help me?
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 12941
- Thank you received: 3979
2 years 4 weeks ago #226803
by Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
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
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
Less
More
- Posts: 41
- Thank you received: 1
2 years 4 weeks ago #226805
by squidy
Using LS 5.x
Replied by squidy on topic Upload modal - Strange behavior after upgrade to version 5
Hi, Joffm..
I've attached the lss file here..
Thanks..
I've attached the lss file here..
Thanks..
Using LS 5.x
Attachments:
Please Log in to join the conversation.
- squidy
- Topic Author
- Offline
- Senior Member
Less
More
- Posts: 41
- Thank you received: 1
2 years 3 weeks ago #226830
by squidy
Using LS 5.x
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
Less
More
- Posts: 41
- Thank you received: 1
2 years 2 weeks ago #227055
by squidy
Using LS 5.x
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
2 years 2 weeks ago #227103
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 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.
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
2 years 2 weeks ago #227155
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 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.
Sample survey attached:
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:
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
Less
More
- Posts: 41
- Thank you received: 1
2 years 2 weeks ago #227158
by squidy
Using LS 5.x
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?
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
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
2 years 2 weeks ago #227163
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 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
Less
More
- Posts: 41
- Thank you received: 1
2 years 2 weeks ago #227169
by squidy
Using LS 5.x
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.
Thanks in advanced.
Using LS 5.x
Please Log in to join the conversation.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10109
- Thank you received: 3595
2 years 2 weeks ago #227176
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 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.
Sample survey with the CSS in the source of the first question:
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:
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
Less
More
- Posts: 41
- Thank you received: 1
1 year 8 months ago #231259
by squidy
Using LS 5.x
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
After selecting the file
Do you have any tricks to fix this?
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
After selecting the file
Do you have any tricks to fix this?
Using LS 5.x
Please Log in to join the conversation.