Array with many different fields in a row : My solution

More
4 years 7 months ago - 4 years 7 months ago #89012 by damien01
damien01 created the topic: Array with many different fields in a row : My solution

The result


Hello,

I needed a array with 4 radio buttons and a text input in a row.

Solutions I found on the Internet:
_Create many array and use CSS to glue them together: Not my cup of tee and couldn't make it work for me
_Create a new Question type: It was possible with Cake, but not anymore with Yii if understand this (for now)


So, here is my solution : To use javascript to take the columns and put them in one table

I think it's a really beautiful solution

So, here is how I did this

First, create many arrays question (but this solution is extendable to many other question types)

Second, edit your template.css:

Here is my code:
        //Add columns heads
  	$("#question27 thead tr").append("<th></th>")
  	$("#question27 thead tr").append("<th>Comment</th>")
 
        //Append other array row to each row of the main table
        l1 = $("#question27 tr")
        l2 = $("#question294 tr")
        for (var i = 1; i < l1.length ; i++){
             l1[i].innerHTML += (l2[i].innerHTML)   
        }
 
        //Hide the other array
  	$("#question294").hide()
 
        //This is just for my needs, you really don't need it : Hide the row with empty labels
        var l1 = $("#question27 .answers-list .answertext")
        var l3 = $("#question27 .answers-list")
        for(var i=0; i < l1.length*2 - 1;i+=2){
                if(l1[i].innerHTML.replace('\t','').indexOf("<input") < 2){
                        l3[i/2].innerHTML = ""
                }
            }


As you can see, the code is really quick and dirty. But I didn't have time to make a proper implementation of my idea.

But I really wanted to share it with you. Maybe one day, I will do a real tutorial with a beautiful code, but not today, sorry!
Last Edit: 4 years 7 months ago by damien01.

Please Log in to join the conversation.

More
4 years 7 months ago #89057 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Can't modify my post now but there is an "official" workaround for this with a very nice script:
Here on the wiki

Please Log in to join the conversation.

More
4 years 7 months ago #89674 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Hi Damien,

I like this solution (better than the official workaround). I tried to implement it and I am facing an issue:
The results are not being recorded in the Database. I tried to find out why but did not find the solution.

To summarize, I have my 2 arrays (1 radio button + 1 multiple text (comments)), they work well before I 'glue' them using javascript but when I use your code in template.js, I find out that the data for the array - comments is not being processed in the database.

Did you experience the same issue?

thanks again,
Tony
The following user(s) said Thank You: damien01

Please Log in to join the conversation.

More
4 years 7 months ago #89675 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Wow! Never really tested it!

I need to find a workaround!

Please Log in to join the conversation.

More
4 years 7 months ago #89676 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Too bad! I really like it. I will try to find what's wrong and let you know if I find a solution!
Thanks again!
Tony
:)

Please Log in to join the conversation.

More
4 years 7 months ago #89677 by damien01
damien01 replied the topic: Array with many different fields in a row : My solution
Altought, this code was more of a proof of concept. I think it need to be well coded.

Please Log in to join the conversation.

More
4 years 7 months ago #89695 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
The workaround you was developed to display multiple question types in an array format, not simply add a text input to the rows.

If you need a text input in each row...

1) Create the array question

2) Add a multiple-short-text question after the array with the same number of sub-questions

3) Add the following script to the source of the array question. The script will hide the multiple-short-text question and add its question text and text inputs to the array rows.
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		// Identify the questions
		var thisQuestion = $('#question{QID}');
		var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
		// Hide the multi-text question
		$(nextQuestion).hide();
 
		// Add extra cells to the array rows
		$('.subquestions-list thead tr', thisQuestion).append('<th />');
		$('.subquestions-list tbody tr', thisQuestion).append('<td />');
 
		// Move the multi-text question text to the last column header cell of the array
		$('.subquestions-list thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
		// Move the text inputs
		$('input.text', nextQuestion).each(function(i){
			$('.subquestions-list tbody tr:eq('+i+') td:last', thisQuestion).append(this);
		});
 
		// Some cleanup styles (for the default template)
		$('col', thisQuestion).css({
			'width': 'auto'
		});
		$('.subquestions-list tbody th, .subquestions-list tbody td', thisQuestion).css({
			'padding': '4px 10px'
		});
	});
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...7621.lss
File Size:20 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:

Please Log in to join the conversation.

More
4 years 7 months ago #89700 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Thanks Tony, I'll give it a shot.
Thank you very much!

Please Log in to join the conversation.

More
4 years 7 months ago #89718 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Hi Tony,

The input fields are not showing up after the array's subquestions.
I believe that the following steps in your code:
// Add extra cells to the array rows
// Move the multi-text question text to the last column header cell of the array
// Move the text inputs
are not being executed. Does the variable $('.subquestions-list exist or should it be define somewhere?

Thanks for your help!
T.

Please Log in to join the conversation.

More
4 years 7 months ago #89739 by DenisChenu
DenisChenu replied the topic: Array with many different fields in a row : My solution

tbudelli wrote: .subquestions-list

subquestions-list class only for 2.0, what is your LS version.

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .

Please Log in to join the conversation.

More
4 years 7 months ago #89755 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
I am using 1.92+
Do I have to upgrade to be able to do thi? What are the risks for my existing surveys? Can I lose data if I upgrade? Would the upgrade impact the customized templates? Is 2.0 working ok with IIS?
Sorry for all these questions :) and Thank you very much for your help!

Please Log in to join the conversation.

More
4 years 7 months ago #89766 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
Denis is correct, the "subquestions-list" class only exists in 2.0 so try this code for 1.92:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		// Identify the questions
		var thisQuestion = $('#question{QID}');
		var nextQuestion = $(thisQuestion).next('div[id^="question"]');
 
		// Hide the multi-text question
		$(nextQuestion).hide();
 
		// Add extra cells to the array rows
		$('table.question thead tr', thisQuestion).append('<th />');
		$('table.question tbody tr', thisQuestion).append('<td />');
 
		// Move the multi-text question text to the last column header cell of the array
		$('table.question thead tr th:last', thisQuestion).text($('.questiontext', nextQuestion).text());
 
		// Move the text inputs
		$('input.text', nextQuestion).each(function(i){
			$('table.question tbody tr:eq('+i+') td:last', thisQuestion).append(this);
		});
 
		// Some cleanup styles (for the default template)
		$('col', thisQuestion).css({
			'width': 'auto'
		});
		$('table.question tbody th, table.question tbody td', thisQuestion).css({
			'padding': '4px 10px'
		});
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
4 years 7 months ago #89799 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Thanks to both of you!
It is not working though.
Could IIS be the cause of the issue I am having with the code?
Is there any step I need to complete (beside Filter HTML for XSS set to NO) to activate Javascript and Jquery?

also I started to try the upgrade on my dev environment and I am stuck with the message:
Database upgrade

Please verify the following information before continuing with the database upgrade:

Database type: mysql
Database name: limesurvey
Table prefix: lime_
Site name: CMS Evaluation Tool
Root URL: /limesurvey/index.php/admin/update

When I try to access the Admin section. Any ideas?

Thank you,
Tony

Please Log in to join the conversation.

More
4 years 7 months ago #89800 by tpartner
tpartner replied the topic: Array with many different fields in a row : My solution
I doubt it's an IIS problem.

Can you get any JavaScript to work?

Are there any errors in the console?

Try adding the following to the source of a question:
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
 
		alert('JavaScript works!');
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

More
4 years 7 months ago #89801 by tbudelli
tbudelli replied the topic: Array with many different fields in a row : My solution
Yes! the Alert works fine.

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now