Improve company productivity with a Business Account.Sign Up

x
?
Solved

Find control recursively using JavaScript

Posted on 2010-09-22
9
Medium Priority
?
641 Views
Last Modified: 2012-05-10
Hi,

I want to find a control recursively using JavaScript. The function will take the  "ParentControl", "ChildControlType" and "ChildControlValue" as parameters and returns control. Now it will search the "ParentControl" for it's all child controls recursively and get the required child control. Can you please provide me the required "JavaScript" function for this ?

Thanks
0
Comment
Question by:milani_lucie
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 33740294
Something like :


function findControl(ParentControl, ChildControlType, ChildControlValue) {
	   var c = ParentControl.getElementsByTagName("*");
	   for(var i=0;i<c.length;i++) {
		   if( (c[i].tagName.toLowerCase() == ChildControlType.toLowerCase()) && (c[i].getAttribute("value") == ChildControlValue) ) {
			//   alert("found!");
			   return c[i];
		   }
	   }
	}

Open in new window

0
 
LVL 41

Expert Comment

by:HonorGod
ID: 33740295
Is this homework?
0
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 1000 total points
ID: 33740297
test page :


<!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 language="javascript">
	function findControl(ParentControl, ChildControlType, ChildControlValue) {
	   var c = ParentControl.getElementsByTagName("*");
	   for(var i=0;i<c.length;i++) {
		   if( (c[i].tagName.toLowerCase() == ChildControlType.toLowerCase()) && (c[i].getAttribute("value") == ChildControlValue) ) {
			//   alert("found!");
			   return c[i];
		   }
	   }
	}
</script>
</head>
<body onload="findControl(document.getElementById('pc'), 'select', 'here');" >
<div id="pc">
<div><input /><select value="not me"></select></div>
<div><textarea ></textarea><select value="here"></select></div>
</div>
</body>
</html>

Open in new window

0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:milani_lucie
ID: 33740361
HonorGod:
This is not homework. I am working on a project which needs this.
Thanks
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 33740394
I would suggest that you check out the solution provided by leakim971, as you can see from his ranking in this zone, he is exceptional.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33740429
@HonorGod thank you so much for your compliment. Have fun!
0
 
LVL 10

Accepted Solution

by:
bugada earned 1000 total points
ID: 33743285
Ok leakim, I agree you are exceptional, but i have slighty changed your code to make it compatibile with IE.
On IE7 and older:

- getElementsByTagName("*") is broken
- the attribute "value" cannot be read using getAttribute

Just my 2 cents.


<!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 language="javascript">
	function findControl(ParentControl, ChildControlType, ChildControlValue) {
	   var c = ParentControl.all ? ParentControl.all : ParentControl.getElementsByTagName("*");
	   for(var i=0;i<c.length;i++) {
		   if( (c[i].tagName.toLowerCase() == ChildControlType.toLowerCase()) && (c[i].getAttribute("myvalue") == ChildControlValue) ) {
			   alert("found!");
			   return c[i];
		   }
	   }
	}
</script>
</head>
<body onload="findControl(document.getElementById('pc'), 'select', 'here');" >
<div id="pc">
<div><input /><select myvalue="not me"></select></div>
<div><textarea ></textarea><select myvalue="here"></select></div>
</div>
</body>
</html>

Open in new window

0
 

Author Closing Comment

by:milani_lucie
ID: 33765879
Works fine in all the browsers.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 33765887
Thanks for the points!
@bugada thanks for the infos!
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

606 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question