Problem with jquery logic

Expand Post »

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
$(document).ready(function() {
	var childrenEle;
function toggleReq() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
		$("#" + id).children().not("div,legend").each(function () {
		var divEle = $("div").attr('id');
	if($(this).attr('class') == 'required') {
					$(this).css("display","block");	
				}
				else {
					$(this).css("display","none");
				}				
			});
 
	});
}
function toggleAll() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
	$("#" + id).children().each(function () { $(this).css("display","block");									
			});
	});
}
 
$("div").toggle(
	function toggle() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().each(function () {				$(this).css("display","block");									
			});
	});
},
function() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().not("div,legend").each(function () {
 
		if($(this).attr('class') == 'required') {
					$(this).css("display","block");					
				}
				else {
					$(this).css("display","none");
				}
			});
	});
}
);
 
/*$("div").toggle(function(){ 
			  	toggleAll()
			},function(){ 
				toggleReq()				  
	}); */ 
$.onload = toggleReq(); 
});
</script>
	</head>
	<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend><div id="toggle1">Click Here</div>
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" /><label class="required" for="radio-0-0">Green</label>
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" /><label class="required" for="radio-0-1">Red</label>
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" /><label for="radio-0-2">Orange</label>       
	    </fieldset>
	    <fieldset class="fieldsetClass" id="question-1"><div id="toggle2">Click Here</div>
	        <legend>Question 2</legend>
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" /><label for="radio-1-0">21</label>
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" /><label class="required" for="radio-1-1">11</label>
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" /><label class="required" for="radio-1-2">23</label>     
	    </fieldset>
</form>
$(document).ready(function() {
	var childrenEle;
function toggleReq() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
		$("#" + id).children().not("div,legend").each(function () {
		var divEle = $("div").attr('id');
	if($(this).attr('class') == 'required') {
					$(this).css("display","block");	
				}
				else {
					$(this).css("display","none");
				}				
			});
			
	});
}
function toggleAll() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
	$("#" + id).children().each(function () { $(this).css("display","block");									
			});
	});
}

$("div").toggle(
	function toggle() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().each(function () {				$(this).css("display","block");									
			});
	});
},
function() {
	$('fieldset.fieldsetClass').each(function() {
    		id = $(this).attr('id');
			$("#" + id).children().not("div,legend").each(function () {
				
		if($(this).attr('class') == 'required') {
					$(this).css("display","block");					
				}
				else {
					$(this).css("display","none");
				}
			});
	});
}
);

/*$("div").toggle(function(){ 
			  	toggleAll()
			},function(){ 
				toggleReq()				  
	}); */ 
$.onload = toggleReq(); 
});
</script>
	</head>
	<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend><div id="toggle1">Click Here</div>
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" /><label class="required" for="radio-0-0">Green</label>
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" /><label class="required" for="radio-0-1">Red</label>
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" /><label for="radio-0-2">Orange</label>       
	    </fieldset>
	    <fieldset class="fieldsetClass" id="question-1"><div id="toggle2">Click Here</div>
	        <legend>Question 2</legend>
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" /><label for="radio-1-0">21</label>
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" /><label class="required" for="radio-1-1">11</label>
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" /><label class="required" for="radio-1-2">23</label>     
	    </fieldset>
</form>

Hi Folks, From the pasted above code I am trying to loop through every fieldset element with jquery each function, and again iam using one more jquery each function for looping through the every child element - this is the common idea for looping both the functions - toggleReq(), toggleAll().

In toggleReq() through looping Iam segregating the child elements which has got CLASS ATTRIBUTE value as "REQUIRED" and displaying them and hiding rest of the child elements.

So during page onload iam displaying only the child elements which have got CLASS ATTRIBUTE value as "REQUIRED" thru jquery onload.

In toggleAll() iam looping through all child elements and displaying all the required and optional child elements even.

I hope now you guys got the explanations for both the functions

But there is one trap here, the thing is like there should be one clickable icon for every fieldset, so when the user clicks the
icon it should display all the child elements and when click again it should display only the REQUIRED fields, basically like toggling

and this toggling should happen only for one fieldset element at a time.

In my code this toggling happens simultaneously for all the fieldset elements and this is not the correct one.

Please any one help me out how to make this toggling function should work independent for the fieldset elements.

please help me out with some ideas for this..

Thanks
jaykom

Last edited by Tekmaven; Jun 15th, 2009 at 1:42 am. Reason: correction in the grammer [Mod Edit: Code Tags]

Similar Threads

josephus problem... in C++
Problem in Iterating using <logic:iterate> tag in JSP
problem in understanding <logic:iterate> tag in JSP
Is my PDQ Logic Board failing? in Apple Hardware and Devices
Mathematical Logic Question in Legacy and Other Languages

jaykom

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

5 posts
since Jun 2009

Permalink

Jun 17th, 2009

Re: Problem with jquery logic

I think I have achieved what you were describing. There is some consolidation that could occur as there is minor repetitive code.

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 
	function toggleReq()
	{
		$(':input.required').each( function() {
			$(this).show();
			$(this).next('label.required').show();
		});
	}
 
	$('.toggle').toggle(
		function() {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				$(this).show();
				$(this).next('label').show();
			});
		},
		function () {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				if( !$(this).hasClass('required') )
				{
					$(this).hide();
					$(this).next('label').hide();
				}
			});
		}
	);
 
 
$.onload = toggleReq(); 
});
</script>
<style>
	input
	{
		display: none;
	}
	label
	{
		display: none;
	}
</style>
</head>
 
<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
 
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend>
            <div class="toggle">Click Here</div>
 
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" />
            <label class="required" for="radio-0-0">Green</label>
 
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" />
            <label class="required" for="radio-0-1">Red</label>
 
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" />
            <label for="radio-0-2">Orange</label>       
	    </fieldset>
 
	    <fieldset class="fieldsetClass" id="question-1">
	        <legend>Question 2</legend>
            <div class="toggle">Click Here</div>
 
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" />
             <label for="radio-1-0">21</label>
 
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" />
             <label class="required" for="radio-1-1">11</label>
 
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" />
             <label class="required" for="radio-1-2">23</label>     
	    </fieldset>
 
	</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	function toggleReq()
	{
		$(':input.required').each( function() {
			$(this).show();
			$(this).next('label.required').show();
		});
	}
	
	$('.toggle').toggle(
		function() {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				$(this).show();
				$(this).next('label').show();
			});
		},
		function () {
			var children = $(this).parent('fieldset').children(':input');
			$(children).each(function() {
				if( !$(this).hasClass('required') )
				{
					$(this).hide();
					$(this).next('label').hide();
				}
			});
		}
	);
	
	
$.onload = toggleReq(); 
});
</script>
<style>
	input
	{
		display: none;
	}
	label
	{
		display: none;
	}
</style>
</head>

<body>
	<form name="formID" id="questions-form" class="formular" method="post" action="">
    
		<fieldset class="fieldsetClass" id="question-0">
	        <legend>Question 1</legend>
            <div class="toggle">Click Here</div>
            
	        <input class="required" type="radio" name="answer[0]" value="0" id="radio-0-0" />
            <label class="required" for="radio-0-0">Green</label>
            
	        <input class="required" type="radio" name="answer[0]" value="1" id="radio-0-1" />
            <label class="required" for="radio-0-1">Red</label>
            
	        <input type="radio" name="answer[0]" value="2" id="radio-0-2" />
            <label for="radio-0-2">Orange</label>       
	    </fieldset>
        
	    <fieldset class="fieldsetClass" id="question-1">
	        <legend>Question 2</legend>
            <div class="toggle">Click Here</div>
            
	         <input type="radio" name="answer[1]" value="0" id="radio-1-0" />
             <label for="radio-1-0">21</label>
             
	         <input class="required" type="radio" name="answer[1]" value="1" id="radio-1-1" />
             <label class="required" for="radio-1-1">11</label>
             
	         <input class="required" type="radio" name="answer[1]" value="2" id="radio-1-2" />
             <label class="required" for="radio-1-2">23</label>     
	    </fieldset>
        
	</form>
</body>
</html>

I didnt make any changes to your form EXCEPT i changed the toggle divs to have a class of toggle instead of unique id's. This allows us to bind the same toggle event to every toggle div.

I also set the styles for input and label display:none right off the bat and then only turn on the elements with the class "required".

The rest of it is just basic jquery function calls.
I tested it locally and get the functionality i believe you described so have at it and i'll try to answer any questions you might have regarding the code.

I think if i was to streamline this even further, I would switch the order of the toggle functions and then simply trigger the toggle event on page load instead of having two separate methods...but this is just a proof of concept.

mschroeder

Sponsor

Reputation Points: 265

Solved Threads: 126

Practically a Master Poster

Offline

624 posts
since Jul 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: error 800a0400 line: 1 char: 1

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Works in Firefox but not in IE and Opera

DaniWeb Message

Cancel Changes

User Name
Password