- Posts: 10
- Thank you received: 0
Ask the community, share ideas, and connect with other LimeSurvey users!
Topic Author
Please Log in to join the conversation.
Please Log in to join the conversation.
Topic Author
Topic Author
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" /> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/1.0.11/jquery.csv.min.js"> </script><script type="text/javascript" charset="utf-8"> $(document).on('ready pjax:complete',function() { var url = "/lime6/upload/surveys/{SID}/files/namen.csv"; var Names = new Array(); $.get(url,function(data){ fullArray = $.csv.toArrays(data); $(fullArray).each(function(i, item){ Names.push(item[0]); }); $('#question{QID} .answer-item:nth-child(2) input[type="text"]').autocomplete({ minLength: 2, source: Names }); }); }); </script>
Please Log in to join the conversation.
Topic Author
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script type="text/javascript" data-author="Tony Partner"> $(document).on('ready pjax:scriptcomplete',function(){ // Identify this question var thisQuestion = $('#question{QID}'); // Index the array columns $('table.subquestion-list tr', thisQuestion).each(function(i) { $('> *', this).each(function(i) { $(this).attr('data-index', i); }); }); // Define the dropdown var select1 = '<select class="form-select form-control list-question-select inserted-select">\ <option value="">Please choose...</option>\ <option value="A1">Apples</option>\ <option value="A2">Bananas</option>\ <option value="A3">Cherries</option>\ <option value="A4">Dates</option>\ <option value="A5">Limes</option>\ <option value="A6">Nectarines</option>\ <option value="A7">Plumbs</option>\ <option value="A8">Elderberries</option>\ <option value="A9">Lemons</option>\ <option value="A10">Peaches</option>\ <option value="A11">Blueberries</option>\ <option value="A12">Grapes</option>\ </select>' // Define the placeholder text for the select2 search input var placeholder = 'Type here to search the dropdown'; // Hide the column-1 text inputs $('.answer-item[data-index="1"] :text', thisQuestion).addClass('d-none'); // Insert the column-1 dropdowns $('.answer-item[data-index="1"]', thisQuestion).append(select1); // Listener on the dropdowns $('.inserted-select', thisQuestion).on('change', function(e) { var thisCell = $(this).closest('.answer-item'); $(':text', thisCell).val($(this).val()).trigger('keyup'); }); // Returning to the page $('.inserted-select', thisQuestion).each(function(i) { var thisCell = $(this).closest('.answer-item'); $(this).val($(':text', thisCell).val()); }); // Initiate the select2 search function $('.inserted-select', thisQuestion).select2(); $('.inserted-select', thisQuestion).on('select2:open', function(e) { document.querySelector('.select2-search__field').focus(); $('input.select2-search__field').prop('placeholder', placeholder); }); // A function to add or remove rows of an Array (Multi Flexible)(Text) question function varLengthArray(thisQuestion) { if ($(thisQuestion).length > 0) { // The HTML content of the Add/Remove elements - modify as you wish var addContent = '[+] Add row'; var removeContent = '[-] Remove row'; // The classes for the Add/Remove elements - modify as you wish // See https://getbootstrap.com/docs/5.0/getting-started/introduction/ var addClasses = 'inserted-button add btn btn-success'; var removeClasses = 'inserted-button remove btn btn-danger'; // The styles for the Add/Remove elements - modify as you wish // These could be placed in your custom.css file. var addStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;'; var removeStyles = 'margin:10px 0 10px 10px; padding:1px 5px; text-align:center; width:auto; cursor:pointer; float:left;'; // Insert the buttons $( 'table.ls-answers', thisQuestion).after('<div class="button-wrapper">\ <button type="button" class="'+addClasses+'" style="'+addStyles+'">'+addContent+'</button>\ <button type="button" class="'+removeClasses+'" style="display: none; '+removeStyles+'">'+removeContent+'</button>\ </div>'); // Listeners on the buttons $('.inserted-button.add', thisQuestion).on('click', function (event) { addRow(); }); $('.inserted-button.remove', thisQuestion).on('click', function (event) { removeRow(); }); // Define the relevant rows var relevantRows = $('tr.subquestion-list:not(.ls-irrelevant)', thisQuestion); // Function to add a row, show the "Remove" element and hide the "Add" element if all rows are shown function addRow() { $('[data-visible="false"]:first', thisQuestion).attr('data-visible', 'true').show(); $('.inserted-button.remove', thisQuestion).show(); if ($('[data-visible="false"]', thisQuestion).length == 0) { $('.inserted-button.add', thisQuestion).hide(); } $('.inserted-button.add', thisQuestion).blur(); handleAddButton(); } // Function to remove a row, clear the contents of the removed row, // show the "Add" element if the last row is hidden and hide the "Remove" element if only the first row is shown function removeRow() { $('[data-visible="true"]:last input:text', thisQuestion).val('').trigger('keyup'); $('[data-visible="true"]:last select', thisQuestion).val(''); $('[data-visible="true"]:last', thisQuestion).attr('data-visible', 'false').hide(); $('.inserted-button.add', thisQuestion).show(); if ($('[data-visible="true"]', thisQuestion).length == 0) { $('.inserted-button.remove', thisQuestion).hide(); } $('.inserted-button.remove', thisQuestion).blur(); handleAddButton(); } // Initially hide all except first row or any rows with populated inputs $(relevantRows).slice(1).each(function(i) { $( this ).attr('data-visible', 'false').hide(); $('input[type=text]', this).each(function(i) { if ($.trim($(this).val()) != '') { $(this).closest('tr').attr('data-visible', 'true').show(); $('.inserted-button.remove', thisQuestion).show(); } }); }); } // Function handle the "Add row" button function handleAddButton() { var lastRow = $('tr[id^="javatbd"]:visible:last', thisQuestion); var emptyInputs = $(':text.form-control', lastRow).filter(function() { return $.trim($(this).val()) == ''; }); if(emptyInputs.length > 0) { $('.inserted-button.add', thisQuestion).prop('disabled', true); } else { $('.inserted-button.add', thisQuestion).prop('disabled', false); } } // Initial "Add row" state handleAddButton(); // Listeners for the "Add row" state $(':text.form-control, .inserted-select', thisQuestion).on('keyup change', function(e) { handleAddButton(); }); } // Call the function with a question ID varLengthArray(thisQuestion); }); </script>
Please Log in to join the conversation.
Topic Author
