Welcome to the LimeSurvey Community Forum

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

Upload modal script - LS 6.x

More
1 year 3 months ago #270485 by squidy
LimeSurvey version: 6.14
Own server or LimeSurvey Cloud: Own server
Survey theme/template: fruity_twentythree
==================

Is there any version of the upload modal script that works with version 6.x?
I was using the script from the link below:
Upload modal - Strange behavior after upgrade to version 5

Using LS 5.x
Upgrading to LS 6.x

Please Log in to join the conversation.

More
1 year 3 months ago #270517 by squidy
Replied by squidy on topic Upload modal script - LS 6.x
I think I posted this in the wrong category. It should have been under "Can I do this with LimeSurvey?".

Using LS 5.x
Upgrading to LS 6.x

Please Log in to join the conversation.

More
1 year 3 months ago #270521 by holch
Replied by holch on topic Upload modal script - LS 6.x
Moved it to "Can I do this with Limesurvey" as requested.

Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

Please Log in to join the conversation.

More
1 year 3 months ago #270561 by squidy
Replied by squidy on topic Upload modal script - LS 6.x
Does anyone know how to adapt this code to work in version 6.x? 

File Attachment:

File Name: Survey - D...odal.lss
File Size:40.03 KB

Code:
<script type="text/javascript" data-author="Tony Partner">           $(document).on('ready pjax:scriptcomplete',function(){          $("#answer{SGQ}SQ001_SQ001").mask("999.999.999-99",{ placeholder:" " });       // Listener on the text input         $('#answer{SGQ}SQ002_SQ002').on('keyup', function(e) {             $(this).val($(this).val().toUpperCase());             checkconditions($(this).attr('value'), $(this).attr('name'), $(this).attr('type'));         });               $("#answer{SGQ}SQ001_SQ002").val(" ");        $("#answer{SGQ}SQ001_SQ002").hide();                // Identify the questions         var qArrayID = '{QID}';         var qArray = $('#question'+qArrayID);         var arrayLength = $('tr[id^="javatbd"]', qArray).length;         var qUploads = qArray.nextAll('.upload-files:lt('+arrayLength+')');           // Add some classes         qArray.addClass('array-with-uploads-question');         $(qUploads).addClass('d-none');           // Insert the "Upload" buttons         $('tr[id^="javatbd"] .answer-item:last-child', qArray).each(function(i) {             $('*', this).remove();             $(this).append('<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#upload-'+qArrayID+'-'+(i+1)+'" data-bs-backdrop="static" data-bs-keyboard="false">Anexar comprovante</button>');         });           // Loop through the upload questions         $(qUploads).each(function(i) {             // Create a modal             $('body').append('<div class="modal fade upload-modal" id="upload-'+qArrayID+'-'+(i+1)+'" tabindex="-1" aria-labelledby="uploadModalLabel'+qArrayID+'-'+(i+1)+'" aria-hidden="true">\                                 <div class="modal-dialog">\                                     <div class="modal-content">\                                         <div class="modal-header">\                                             <h5 class="modal-title" id="uploadModalLabel'+qArrayID+'-'+(i+1)+'">'+$('.ls-label-question', this).html()+'</h5>\                                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>\                                         </div>\                                         <div class="modal-body">\                                         </div>\                                         <div class="modal-footer">\                                             <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>\                                         </div>\                                     </div>\                                 </div>\                             </div>');               // Move this question into the modal             $('#upload-'+qArrayID+'-'+(i+1)+' .modal-body').append($(this));             $(this).removeClass('d-none');         });           // Interrupt the Previous/Next/Submit function (to put upload questions back in the form)         $('#limesurvey').on('submit', function(e) {             $('.upload-modal .upload-files').appendTo($('.group-container:eq(0)')).addClass('d-none');         });         }); </script> <style data-author="Tony Partner" type="text/css"> .upload-modal .file-upload-modal.in {         height: max-content;     } </style>

Using LS 5.x
Upgrading to LS 6.x

Please Log in to join the conversation.

More
1 year 3 months ago #270576 by tpartner
The problem is that LS6 has upgraded to Bootstrap 5 and, now, you cannot have a modal within a modal.

This will have to be completely re-thought and re-developed.

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.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose