Solved

Help with child selector

Posted on 2010-09-14
13
692 Views
Last Modified: 2012-06-27
I need to achieve the following in JQuery please, but am struggling...


Within the table that has an ID called 'complevels'
Select all the text inputs that have an ID value ending with 'newlevel', but only the inputs with an empty value (e.g. blank)
Set the value of those text inputs to that contained in the 'level' variable

So far I have the following but it is failing to find the text inputs...

 
var level = '50';
// $("input[id$='newlevel']").val(level); // works

$("#complevels > input[id$='newlevel']").val(level); // fails

Open in new window

0
Comment
Question by:Rouchie
  • 4
  • 3
  • 3
  • +1
13 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33670724
$("#complevels > input[type='text'][id$='newlevel'][value!='']").each(function(){
$(this).value(level);
});

0
 
LVL 25

Author Comment

by:Rouchie
ID: 33670761
Hi gurvinder372

I get a javascript error:

     Warning: Unexpected token in attribute selector: '!'.  Dangling combinator.
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 125 total points
ID: 33670835
what about?


$("#complevels > input[type='text'][id$='newlevel']").each(function(){
if( $(this).value() != null && $(this).value().length > 0 )
{
  $(this).value(level);
}
});

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 33671229
It would be hierarchical in nature so..

<html>
	<head>
		<script src="http://code.jquery.com/jquery-latest.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
			var level="changed";
			$("#complevels > tbody > tr > td > input[id$='newlevel']").each(function(){
				if($(this).val() == '')
					$(this).val(level);
			});
		});
		</script>
		<style>
		.col{
			background-color:red;
		}		
		</style>
	</head>
	<body>
		<table id="complevels" border="1">
			<tr>
			<td>
				<input type="text" id="1_newlevel">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="2_newlevel" value="hello">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="check">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="4_newlevel" value="world">
			</td>
			</tr>
			<tr>
			<td>
				<input type="text" id="5_newlevel">
			</td>
			</tr>
		</table>
	</body>
</html>

Open in new window

0
 
LVL 25

Author Comment

by:Rouchie
ID: 33671374
Your example works great, but I just cannot get this working inside my page.  When I press the button to fire the function, nothing happens - no errors, no alerts...

Does something need changing to put your function inside my existing function?
<script type="text/javascript">
function CopyLevels(startBox){
		var startboxid = '#' + startBox;
		var level = $(startboxid).val();
		if (level=='' || level==undefined || isNaN(level)) {
			window.alert('Please enter a valid number before pressing the Copy button!');
			return false;
		}
		$("#complevels > input[type='text'][id$='newlevel']").each(function(){
				window.alert('Hello');
				$(this).val(level);
		});
}
</script>

Open in new window

0
 
LVL 22

Assisted Solution

by:kadaba
kadaba earned 125 total points
ID: 33671421
Rou,

This needs to be chaged:
$("#complevels > input[type='text'][id$='newlevel']")

> selector is used in hierarchical manner so if that is the table id then you should follow what i have mentioned in the example before.
0
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 40

Expert Comment

by:gurvinder372
ID: 33671529
<< When I press the button to fire the function, nothing happens - no errors, no alerts...>>
So you call CopyLevels method at the onclick event of that button. Please put an alert directly after the level value is fetched from the id and let me know the result
0
 
LVL 15

Accepted Solution

by:
StealthyDev earned 250 total points
ID: 33671583
Hi, I would like to add this:

$("#complevels").find("input[type='text'][id$='newlevel']").val(level);
0
 
LVL 25

Author Comment

by:Rouchie
ID: 33671742
Fantastic!

Based on all your suggestions, I have successfully implemented the following solution...

$("#complevels").find("input[type='text'][id$='newlevel']").each(function(){
			if ($(this).val() == '') {
					$(this).val(level);
			}
		});

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 33671828
Rou,
Thanks for the points.

Just a note:
The find selector is much slower then the direct child selectors (Though in milliseconds, find searches all the DOM elements under the root.)

Best,
kadaba
0
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33671891
Thanks for the points..

BTW..... Instead of the loop, you can use this also:
$("#complevels").find("input[type='text'][id$='newlevel'][value='']").val(level);

Regards.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33671945
pandi,

I do not think it would work well with Mozilla, as it would look for the attribute value..

kadaba.
0
 
LVL 15

Expert Comment

by:StealthyDev
ID: 33679040
@kadaba:

No, its working fine with firefox also.. Give a look at this:
<SCRIPT src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></SCRIPT>



<script>

	fill = function(){

		var level = '50';

		$("#complevels").find("input[type='text'][id$='newlevel'][value='']").val(level);

	}

</script>



<table id="complevels">

	<tr><td>

		<input id="testnewlevel" />

		<input id="test2newle1vel" />

		<input id="test3newlevel" />

		<input id="test4newlevel" />

	</td></tr>

	<tr><td>

		<input id="test1newle1vel" />

		<input id="test12newle1vel" />

		<input id="test13newlevel" />

		<input id="test14newlevel" />

	</td></tr>

</table>

<button onclick="fill()">fill</button>

Open in new window

0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now