Array filter / javascript

More
2 years 9 months ago #135405 by Ben_V
Hi,
I'm trying to filter some array rows using 1.92 version
...with no way to upgrade to 2.06 for subquestions relevance benefits :(

Built-in array filter feature is not doing 100% the job because i want to filter depending on previous answers.
In the attached example (screenshot+lss) I'm only interested by Recent & New stuffes.

How to remove dynamically 3rd item from Q2 (could be on next page)?

File Attachment:

File Name: filtering_rows.lss
File Size:26 KB


Thanks,

-Q1
Subquestions: item1 | item2 | item3
Answer options: used | recen | new
-Q2
Subquestions: item1 | item2 | item3
Answer options: red | blue | green

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Attachments:

Please Log in or Create an account to join the conversation.

More
2 years 9 months ago #135423 by tpartner
Replied by tpartner on topic Array filter / javascript
I think the solution here is to insert a hidden multiple-choice question after Q1 (on the same page), and use JavaScript to toggle the check-boxes depending on answers in Q1. Q2 can then be filtered by the hidden question regardless of where it is in the survey.

1) Insert a multiple-choice directly after Q1. This question has identical sub-questions and sub-questions codes as Q1

2) Insert this script into the source of Q1. Adjust "filterColumns" as required.
<script type="text/javascript" charset="utf-8">		
 
	$(document).ready(function(){
 
		// Define the filtering columns
		var filterColumns = [2, 3];
 
		// Identify the questions
		var q1 = $('#question{QID}');
		var qHidden = $(q1).nextAll('.multiple-opt:eq(0)');
 
		// Define a few vars
		var q1ID = $(q1).attr('id').replace(/question/, '');
		var qHiddenID = $(qHidden).attr('id').replace(/question/, '');
 
		// Hide the multiple-choice
		$(qHidden).hide();
 
		// Assign some classes
		$('table.question tbody[id^=javatbd] tr', q1).each(function(i){
			$('> td', this).each(function(i){
				$(this).addClass('column-'+(i+1)+'');
			});
		});
		$(filterColumns).each(function(i){
			$('td.column-'+this+'').addClass('filter-cell');
		});
 
		// Listener on the Q1 cells
		$('table.question tbody[id^=javatbd] td', q1).click(function(e) {
			var thisRow = $(this).closest('tbody');
			var thisCode = $(thisRow).attr('id').split('X'+q1ID)[1];
			var hiddenInput = $('input.checkbox[id$="X'+qHiddenID+thisCode+'"]', qHidden);
			setTimeout(function() {
				if($('input.radio:checked', thisRow).closest('td').hasClass('filter-cell')) {
					$(hiddenInput).attr('checked', true);
					$(hiddenInput).nextAll('input[type="hidden"]').attr('value', 'Y');
				}
				else {
					$(hiddenInput).attr('checked', false);
					$(hiddenInput).nextAll('input[type="hidden"]').attr('value', '');
				}
 
				// Check conditions/relevance
				checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type)
			}, 250); 
		});
	});
</script>

3) Filter Q2 by the hidden question.


Sample survey attached:

File Attachment:

File Name: limesurvey...5668.lss
File Size:33 KB

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

More
2 years 9 months ago #135428 by Ben_V
Replied by Ben_V on topic Array filter / javascript
Thank you a lot Tony for your quick answer... Everything is working really fine :)

Note: For other user's still using this old last "classic" LS 1.92 version (without YII framework), It's easy to upgrade at least jQuery (v1.4.2).
There is a great overall compatibility (front & back end) with jquery 1.7.2 ( for example accepting all Tony's workarounds using .prop instead .attr )

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137103 by exlibris69
Hi Tony,

I tried to use your sample, but it seems it doesn't work. As I understood nothing should be changed except number of "filterColumns" in this line var filterColumns = [2, 3]; (if it's necessary).I didn't change even it. Do you have any idea why doesn't your sample work?

Thanks in advance.

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137106 by tpartner
Replied by tpartner on topic Array filter / javascript
Did you try importing my sample survey into a LimeSurvey 1.92 platform?

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

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137108 by exlibris69
No, we use 2.05

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137115 by tpartner
Replied by tpartner on topic Array filter / javascript
Well, as stated, the workaround above is for version 1.92.

This should work for 2.05:

<script type="text/javascript" charset="utf-8">		
 
	$(document).ready(function(){
 
		// Define the filtering columns
		var filterColumns = [2, 3];
 
		// Identify the questions
		var q1 = $('#question{QID}');
		var qHidden = $(q1).nextAll('.multiple-opt:eq(0)');
 
		// Define a few vars
		var q1ID = $(q1).attr('id').replace(/question/, '');
		var qHiddenID = $(qHidden).attr('id').replace(/question/, '');
 
		// Hide the multiple-choice
		$(qHidden).hide();
 
		// Assign some classes
		$('tr.answers-list', q1).each(function(i){
			$('> td', this).each(function(i){
				$(this).addClass('column-'+(i+1)+'');
			});
		});
		$(filterColumns).each(function(i){
			$('td.column-'+this+'').addClass('filter-cell');
		});
 
		// Listener on the Q1 cells
		$('tr.answers-list td', q1).click(function(e) {
			var thisRow = $(this).closest('tr.answers-list');
			var thisCode = $(thisRow).attr('id').split('X'+q1ID)[1];
			var hiddenInput = $('input.checkbox[id$="X'+qHiddenID+thisCode+'"]', qHidden);
			setTimeout(function() {
				//alert(thisCode);
				if($('input.radio:checked', thisRow).closest('td').hasClass('filter-cell')) {
					$(hiddenInput).prop('checked', true);
					$(hiddenInput).nextAll('input[type="hidden"]').attr('value', 'Y');
				}
				else {
					$(hiddenInput).prop('checked', false);
					$(hiddenInput).nextAll('input[type="hidden"]').attr('value', '');
				}
 
				// Check conditions/relevance
				checkconditions(hiddenInput.value, hiddenInput.name, hiddenInput.type)
			}, 250); 
		});
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: exlibris69

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137116 by exlibris69
Thanks, Tony!It works great!

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago - 2 years 8 months ago #137121 by Ben_V
Replied by Ben_V on topic Array filter / javascript
Hi Tony... just an extra question:

With jQuery ≥1.6 is it correct or not to replace everywhere .attr for .prop, including also for example the few .attr occurrences you have left in your code? Like:
var qHiddenID = $(qHidden).attr('id').replace(/question/, '');

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)
Last edit: 2 years 8 months ago by Ben_V.

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago - 2 years 8 months ago #137122 by tpartner
Replied by tpartner on topic Array filter / javascript
No, not everywhere. Some of the pre-1.6 "attributes" were actually properties so jQuery has started to refer to them as such. Elements can still have actual attributes like id, class, value...

A (perhaps over-simplified) explanation is that attributes are things that are applied to the element when you write the source code, properties are applied to the element after the browser parses the source code.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 2 years 8 months ago by tpartner.
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago #137123 by Ben_V
Replied by Ben_V on topic Array filter / javascript
I really like all your "over-simplified explanations" :)

Benoît

EM Variables => bit.ly/1TKQyNu | EM Roadmap => bit.ly/1UTrOB4
Last Releases => 2.6x.x goo.gl/ztWfIV | 2.06/2.6.x => bit.ly/1Qv44A1
Demo Surveys => goo.gl/HuR6Xe (already included in /docs/demosurveys)

Please Log in or Create an account to join the conversation.

More
2 years 8 months ago - 2 years 8 months ago #137140 by DenisChenu
A good example :

with input type="text" attr/prop value

Test system:
$(document).on("keyup","input:text",function(){
console.log($(this).attr("value"));
console.log($(this).prop("value"));
});

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 .
Last edit: 2 years 8 months ago by DenisChenu.
The following user(s) said Thank You: Ben_V

Please Log in or Create an account to join the conversation.

Start now!

Just create your account and start using Limesurvey today.

Register now
Join our Newsletter!