Welcome, Guest
Username: Password:
  • Page:
  • 1
  • 2

TOPIC: Autocomplete and automatically filled questions - csv

Autocomplete and automatically filled questions - csv 3 years 4 months ago #91746

  • Gabriela
  • Gabriela's Avatar
  • Offline
  • Senior Lime
  • Posts: 64
  • Thank you received: 1
  • Karma: 0
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.
The administrator has disabled public write access.

Autocomplete and automatically filled questions - csv 3 years 4 months ago #91858

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.
The administrator has disabled public write access.

Autocomplete and automatically filled questions - csv 3 years 4 months ago #91861

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5900
  • Thank you received: 1292
  • Karma: 522
You can use a readonly attribute on those elements:
		$('input.text', q2).attr('readonly', true);
		$('input.text', q3).attr('readonly', true);

So, the whole script would be:
<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: 3 years 4 months ago by tpartner.
The administrator has disabled public write access.

Autocomplete and automatically filled questions - csv 3 years 4 months ago #91863

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.
The administrator has disabled public write access.

Autocomplete and automatically filled questions - csv 3 years 3 months ago #92102

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5900
  • Thank you received: 1292
  • Karma: 522
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:
<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 administrator has disabled public write access.

Autocomplete and automatically filled questions - csv 3 years 3 months ago #92108

Incredible Tony. Thanks a lot.
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.236 seconds