We help IT Professionals succeed at work.

Help using :first

Rouchie
Rouchie used Ask the Experts™
on
I have multiple tables, each containing multiple text fields and links.  When a particular link is clicked, I need to find the first text field that matches a given ID value.
I have this attempt, but it doesn't find the text field.  Any help would be appreciated:

function ReplaceFirstValue(idToClear, startCtrl) {
		var startCtrlId = '#' + startCtrl;
		var firstTextField = $(startCtrlId).parent('table').find("input[type='text'][id$='" + idToClear  + "']:first"); // fails (no error given)
		$(firstTextField).val('Hello');
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
please check if by removing first, you get any results or not.

then rather than using :first try using first()
http://api.jquery.com/first/
 
What do you mean by removing?
i meant that if you replace line 3 with

var firstTextField = $(startCtrlId).parent('table').find("input[type='text'][id$='" + idToClear  + "']").size(); // fails (no error given)

console.log(firstTextField );

what is the output? if the output is 0, then it means that without using :first also there was no result
I must be doing something so stupid here but I cannot see for looking...

I've simplified the function just to start with the ID of the link that is pressed, but the function even fails to find that.  Can you see what's wrong here?

function ReplaceFirstValue(idToClear, startCtrl){
		window.alert('executing...');  // works okay
		var startCtrlId = '#' + startCtrl; // presumably does not work
		$(startCtrlId).hide(200);  // does not work
}

Open in new window


<a onclick="ReplaceFirstValue('txt_skillLevel', this); return false;" href="#">Replace</a>

Open in new window

>> I need to find the first text field that matches a given ID value.

My first red light here is that the DOM does not allow multiple ID's with the same value, which would also explain why your code is unable to find anything.
Hi

I appreciate that thanks.  

The ID's aren't actually duplicated, but end with the same value.  That's why I was using the id$= selector in the original post.

Thanks.
Multitechnician
Top Expert 2014
Commented:
Try this :

function ReplaceFirstValue(idToClear, startCtrl) {
		var startCtrlId = '#' + startCtrl;
		var firstTextField = $(startCtrlId).parents('table:eq(0)').find("input[type='text'][id*='" + idToClear  + "']:first"); // fails (no error given)
		$(firstTextField).val('Hello');
}

Open in new window


http://www.w3schools.com/tags/att_standard_id.asp
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2
Hi leakim971

That's works, thank you.  Right about the time you posted that I also found a solution using the following approach.  It turns out that parent should have been parents, but closest is better still.

$(startCtrl).closest('table').find(""input[type='text'][id$='"" + idToClear  + ""']"").first().val('Hello');

Open in new window


In your solution, could you please explain what effect table:eq(0) has?  I believe not including eq(0) works just as well also.
Sorry just copied out of ASP... mine should really read:

$(startCtrl).closest('table').find("input[type='text'][id$='" + idToClear  + "']").first().val('Hello');

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
ok, don't forget to close the question
In your solution, could you please explain what effect table:eq(0) has?  I think that not including eq(0) gives the same result.
leakim971Multitechnician
Top Expert 2014

Commented:
No it may return more than one depend your page
Same as closest here