Solved

Find control recursively using JavaScript

Posted on 2010-09-22
9
623 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

749 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