- Posts: 30
- Thank you received: 0
Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Autocomplete and automatically filled questions - csv
- Gabriela
- Offline
- Banned
Less
More
11 years 2 months ago #91684
by Gabriela
Replied by Gabriela on topic Autocomplete and automatically filled questions - csv
Hi Tony, sorry, Im trying to achieve the same thing but with no results,
please can you check this? (as crescentio im working on localhost too)
Thanks a lot
please can you check this? (as crescentio im working on localhost too)
Thanks a lot
Attachments:
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
11 years 2 months ago #91699
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete and automatically filled questions - csv
Hi Gabriela,
Can you please explain what you are trying to do?
I see "Lingua", "provincia" and "Distrito" questions but I don't know how they are related. Do you want to auto-populate "provincia" and "Distrito" depending on "Lingua"?
Can you please explain what you are trying to do?
I see "Lingua", "provincia" and "Distrito" questions but I don't know how they are related. Do you want to auto-populate "provincia" and "Distrito" depending on "Lingua"?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
11 years 2 months ago - 11 years 2 months ago #91704
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete and automatically filled questions - csv
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
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.
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)
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)
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 11 years 2 months ago by tpartner.
The topic has been locked.
- Gabriela
- Offline
- Banned
Less
More
- Posts: 30
- Thank you received: 0
11 years 2 months ago #91719
by Gabriela
Replied by Gabriela on topic Autocomplete and automatically filled questions - csv
Merci!!! I was all day in this and no moving...(mega frustrating..)
I still didt try it, but reading I can see the first difference. I was following the previuos answers where you said:
- Download the jquery.csv.js plugin and place it in your template folder
- Add the following line to your startpage.pstpl BEFORE the tag for template.js
Before. :dry:
But its After?
super.
ok, now Ill try..
It works!! but only with "gabriela csv test" template. Have to check differences with mine.
Have to go to work now, but as soon as I can ill find out what is going wrong..
Thank you so much, it made my day.
ps: In "gabriela csv test" template, startpage, appears in one corner TEMPLATEJS sorrounded by red square, type of , "variable undefined". (but still working, strange)
I still didt try it, but reading I can see the first difference. I was following the previuos answers where you said:
- Download the jquery.csv.js plugin and place it in your template folder
- Add the following line to your startpage.pstpl BEFORE the tag for template.js
Before. :dry:
But its After?
super.
ok, now Ill try..
It works!! but only with "gabriela csv test" template. Have to check differences with mine.
Have to go to work now, but as soon as I can ill find out what is going wrong..
Thank you so much, it made my day.
ps: In "gabriela csv test" template, startpage, appears in one corner TEMPLATEJS sorrounded by red square, type of , "variable undefined". (but still working, strange)
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
11 years 2 months ago #91734
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete and automatically filled questions - csv
Those instructions are for LimeSurvey 1.92. Things are slightly different in LimeSurvey 2.0.I was following the previuos answers where you said...Add the following line to your startpage.pstpl BEFORE the tag for template.js
Can you provide a screenshot?In "gabriela csv test" template, startpage, appears in one corner TEMPLATEJS sorrounded by red square...
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- Gabriela
- Offline
- Banned
Less
More
- Posts: 30
- Thank you received: 0
11 years 2 months ago #91746
by Gabriela
Replied by Gabriela on topic Autocomplete and automatically filled questions - csv
HI, thanks, I removed that red squared message by adding this to the start page
<script type="text/javascript" src="{TEMPLATEURL}template.js"></script>
I am in 1.92 version.
And now It works perfectly.(yess)
But I think what I proposed to do is too heavy.
ill give it a try, or Ill give up.
Thanks thanks so much again.
<script type="text/javascript" src="{TEMPLATEURL}template.js"></script>
I am in 1.92 version.
And now It works perfectly.(yess)
But I think what I proposed to do is too heavy.
ill give it a try, or Ill give up.
Thanks thanks so much again.
The topic has been locked.
- stuttgarter
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
11 years 2 months ago #91858
by stuttgarter
Replied by stuttgarter on topic Autocomplete and automatically filled questions - csv
Tony, i am experimenting with your script and its working perfect. Thanks for your step by step clear instructions.
I am just wondering if we can restrict user from editing the already autofilled fields. I have tried with text display but is not working.
Q1 (jquery): filled by user
Q2: autofilled (user cannot edit)
Q3: autofilled (user cannot edit)
Q1 is filled by user and corresponding values of Q2 and Q3 are only displayed and are not editable.
Thanks in advance.
I am just wondering if we can restrict user from editing the already autofilled fields. I have tried with text display but is not working.
Q1 (jquery): filled by user
Q2: autofilled (user cannot edit)
Q3: autofilled (user cannot edit)
Q1 is filled by user and corresponding values of Q2 and Q3 are only displayed and are not editable.
Thanks in advance.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
11 years 2 months ago - 11 years 2 months ago #91861
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete and automatically filled questions - csv
You can use a readonly attribute on those elements:
So, the whole script would be:
Code:
$('input.text', q2).attr('readonly', true); $('input.text', q3).attr('readonly', true);
So, the whole script would be:
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; // Restrict user access to the inputs $('input.text', q2).attr('readonly', true); $('input.text', q3).attr('readonly', true); // 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>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 11 years 2 months ago by tpartner.
The topic has been locked.
- stuttgarter
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
11 years 2 months ago #91863
by stuttgarter
Replied by stuttgarter on topic Autocomplete and automatically filled questions - csv
Incredible Tony. Many many thanks.
Finally, i have started learning a bit of javascript codes as well.
Last thing which i am trying in autocomplete topic is restricting user to enter values from suggested dropdown (jquery) only. Otherwise, throwing error (Please enter a valid q1 value).
I found this link jsfiddle.net/pxfunc/j3AN7/ but somehow failing to do it. A long way to go in understanding programming codes. :unsure:
Tony, i find this forum extremely useful and friendly. I am trying to convince my boss to donate a bit to LS, otherwise i will surely contribute my tiny contribution.
Finally, i have started learning a bit of javascript codes as well.
Last thing which i am trying in autocomplete topic is restricting user to enter values from suggested dropdown (jquery) only. Otherwise, throwing error (Please enter a valid q1 value).
I found this link jsfiddle.net/pxfunc/j3AN7/ but somehow failing to do it. A long way to go in understanding programming codes. :unsure:
Tony, i find this forum extremely useful and friendly. I am trying to convince my boss to donate a bit to LS, otherwise i will surely contribute my tiny contribution.
The topic has been locked.
- tpartner
- Offline
- LimeSurvey Community Team
Less
More
- Posts: 10099
- Thank you received: 3589
11 years 2 months ago #92102
by tpartner
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Replied by tpartner on topic Autocomplete and automatically filled questions - csv
That code is intended to restrict a user to entering a value from the dropdown but does not use an alert. The test is fired on every keystroke so alerts would be very annoying.
To pop up an alert when an invalid value is entered, try this:
To pop up an alert when an invalid value is entered, try this:
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; // Restrict user access to the inputs $('input.text', q2).attr('readonly', true); $('input.text', q3).attr('readonly', true); // 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]); } }); } }).change(function(){ var isValid = false; var inputValue = $(this).val(); $(fullArray).each(function(i, item){ if (item[0].toLowerCase().match(inputValue.toLowerCase())) { isValid = true; } }); if (!isValid) { alert('Please enter a valid q1 value'); $(this).val(''); } }); }); }); </script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
- stuttgarter
- Offline
- New Member
Less
More
- Posts: 14
- Thank you received: 0
11 years 2 months ago #92108
by stuttgarter
Replied by stuttgarter on topic Autocomplete and automatically filled questions - csv
Incredible Tony. Thanks a lot.
The topic has been locked.
- muhdsammur
- Offline
- New Member
Less
More
- Posts: 1
- Thank you received: 0
6 years 8 months ago #157257
by muhdsammur
Replied by muhdsammur on topic Autocomplete and automatically filled questions - csv
Hello,
I know this an old thread, but does this solution work with newer versions like 2.6?
I know this an old thread, but does this solution work with newer versions like 2.6?
The topic has been locked.