Welcome to the LimeSurvey Community Forum

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

Array (Text): replace last column with comment button

  • squidy
  • squidy's Avatar Topic Author
  • Offline
  • Senior Member
  • Senior Member
More
4 months 2 weeks ago #266070 by squidy
LimeSurvey version: 5.x
Own server or LimeSurvey Cloud: Own
Survey theme/template: fruity
==================
I have a text array with 10 columns. I'd like to know how I can replace the last column with a comment button (textarea) for each row like the image attached.

PLUS: Would it also be possible to implement a flexible text array (dynamic rows)? Adding/Removing visibility of each row...

Using LS 5.x

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 2 weeks ago #266072 by Joffm
Hi, 
you asked this more than 2 years ago
[url] forums.limesurvey.org/forum/can-i-do-thi...upgrade-to-version-5 [/url]
You only have to adapt.



I only changed the question type to "long text", and in the script the reference from "upload-files" to "text-long". (and all other mentions of "upload" to "comment" for better readability)
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[id^="javatbd"]', qArray).length;
        var qComments = qArray.nextAll('.text-long:lt('+arrayLength+')');
 
        // Add some classes
        qArray.addClass('array-with-comments-question');
        $(qComments).addClass('hidden');
      
        // 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="#comment-'+qArrayID+'-'+(i+1)+'" data-backdrop="static" data-keyboard="false">Comment</button>');
        });
      
        // Loop through the upload questions
        $(qComments).each(function(i) {
            // Create a modal
            $('body').append('<div class="modal comment-modal" id="comment-'+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()+'Please, enter your comment</h5>\
                                        </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
            $('#comment-'+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) {        
            $('.comment-modal .text-long').appendTo($('.group-container:eq(0)')).addClass('hidden');
        });    
    });
</script>
<style data-author="Tony Partner" type="text/css">
    .comment-modal .comment-modal.in {
        height: max-content;
    }
</style>

And for your dynamic rows?
[url] forums.limesurvey.org/forum/design-issue...ew-answer-row#216648 [/url]

Joffm

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

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
4 months 2 weeks ago #266073 by tpartner

I have a text array with 10 columns. I'd like to know how I can replace the last column with a comment button (textarea) for each row like the image attached.

Try this - forums.limesurvey.org/forum/can-i-do-thi...elds?start=24#182677

Would it also be possible to implement a flexible text array (dynamic rows)? Adding/Removing visibility of each row

And this - www.limesurvey.org/manual/Workarounds:_M...meSurvey_version_6.x

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