Link to home
Start Free TrialLog in
Avatar of Rouchie
RouchieFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Help with child selector

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

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

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

Avatar of Rouchie

ASKER

Hi gurvinder372

I get a javascript error:

     Warning: Unexpected token in attribute selector: '!'.  Dangling combinator.
SOLUTION
Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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

Avatar of Rouchie

ASKER

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

SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
<< 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
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Rouchie

ASKER

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

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
Avatar of StealthyDev
StealthyDev

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.
pandi,

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

kadaba.
@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