For this workaround to work, you need to:
1) Include the CSV file in your template directory
2) Place the
jquery.csv.js file in your template directory
3) Add the following line to your startpage.pstpl AFTER the {TEMPLATEJS} tag
Code:
<script type="text/javascript" src="{TEMPLATEURL}jquery.csv.js"></script>
Your code looked fine to me but I modified it a bit to automatically detect the question IDs and the the path to the template directory.
Placing this code in the source of the first question will initiate the auto-complete function for that question, using the CSV column-1 values. When a value is selected, it will auto-populate the following 2 questions with the the CSV column-2 and column-3 values.
For different questions/surveys, all you should need to modify is the
csvName variable.
Code:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Define the CSV filename
var csvName = 'linguas.csv';
// Define some paths
var surveyRoot = location.pathname.split('index.php')[0];
var templateName = $('head link[href*="template.css"]').attr('href').replace(/\/template.css/, '').split('/templates/')[1];
var templatePath = surveyRoot+'upload/templates/'+templateName+'/';
// Define the questions
var q1ID = '{QID}';
var q1 = $('#question'+q1ID);
var q2 = $(q1).nextAll('.text-short:eq(0)');
var q3 = $(q1).nextAll('.text-short:eq(1)');
// Define the path to the CSV
var url = templatePath+csvName;
// Create an array to hold the CSV rows
var namesArr = new Array();
// Grab the CSV contents
$.get(url,function(data){
// Convert CSV contents to an array of arrays
fullArray = jQuery.csv()(data);
// Load the CSV rows array
$(fullArray).each(function(i, item){
namesArr.push(item[0]);
});
// Initialise the autocomplete plugin
$('input.text', q1).autocomplete({
source: namesArr,
// Event fired when a selection is made (ui.item.value refers to the selected item)
select: function(event, ui) {
// Find the column 2 and column 3 values associated with the selected column 1 value and load q2 and q3
$(fullArray).each(function(i, item){
if(item[0] == ui.item.value) {
// The value from column 2 of the CSV
$('input.text', q2).val(item[1]);
// The value from column 3 of the CSV
$('input.text', q3).val(item[2]);
}
});
}
});
});
});
</script>
Here is a working copy of your survey and the corresponding template with the CSV file and jquery.csv.js included. (import the template first so the survey uses the correct one)
Topic Author
