Welcome to the LimeSurvey Community Forum

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

Display new information from csv based on triggering event on dropdown column.

More
16 hours 48 minutes ago #273137 by reycoseb
Please help us help you and fill where relevant:
Your LimeSurvey version: 6+
Own server or LimeSurvey hosting: own
Survey theme/template:
==================

Hi,
Copy pasting and adapting multiple things found on limesurvey forum and internet, i finally load my csv and i'm now ready to display content based on user selection in the first column dropdown : name of the projet.

The csv is very simple : 

nomprojet,status,annee,description
MO3,accepte,2022,le projet mo3 parle des moustiques
Escape,accepte,2019,le projet escape parle d'évacuation

Based on the choice of "nomprojet", i want to trigger the other informations (status,  annee, description) on other column, as read only text. 
Ex : If "Escape" is selected, we display "accepte", "2022" for the status and year columns.

I have this starting js that do the first part of the job, now i try to trigger change, if user choose any of the project, content need to be overwrited by the content of csv.

If you have already made something like that, i'm interested. I update my progress here.
Code:
<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>
<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 src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.4.1/papaparse.js"></script><script type="module">
    
  var url = "/upload/surveys/131699/files/test_csv_ls.csv";
 async function doTheJob() {
  const result = await $.get(url);
   return result;
  }
 
  const stuff = await doTheJob();
  var data = $.csv.toObjects (stuff);
 
  function listAllProperties(myObj) { let objectToInspect = myObj; let result = ; while (objectToInspect !== null) { result = result.concat(Object.getOwnPropertyNames(objectToInspect)); objectToInspect = Object.getPrototypeOf(objectToInspect); } return result; }
  
  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); }); }); 
  
  var Names = new Array(); 
  
  // Define the placeholder text for the select2 search input 
  var placeholder = 'Type here to search the dropdown'; 
  
console.log(JSON.stringify(data))
  
  // get the nomprojet to display in my first column 
  for (var key in data) {
  console.log(data[key]["nomprojet"]) ;
}
  for (var key in data) {
  console.log(data[key]["nomprojet"]) ;
}
  
  // 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(Object.keys(data)); 
  // 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);
  });
</script>







 

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose