Solved

Find control recursively using JavaScript

Posted on 2010-09-22
9
622 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 82

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 82

Assisted Solution

by:leakim971
leakim971 earned 250 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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 

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 82

Expert Comment

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

Accepted Solution

by:
bugada earned 250 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 82

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.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

839 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