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?
