AJAX

Problem with jquery logic

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2009

Posts: 5

Reputation: jaykom is an unknown quantity at this point

Solved Threads: 0

jaykom

Offline

Newbie Poster

Problem with jquery logic

Jun 14th, 2009

 Help with Code Tags 
 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]

•

Join Date: Jul 2008

Posts: 149

Reputation: mschroeder is on a distinguished road

Solved Threads: 25

mschroeder mschroeder is offline

Offline

Junior Poster

Re: Problem with jquery logic

Jun 17th, 2009

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

 Help with Code Tags 
 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.

If you're question/problem is solved don't forget to mark the thread as Solved!

-- Code I post is usually but not always tested. If it is tested it will be against 5.2.12 or 5.3.1