ansaurus

Question

looping through elements with jQuery based on name attribute rather than id

Answer 1

+1 A:

The date picker doesn't need the elements to have an ID. You're already looking up the elements for it. This should work:

$('input.date-pick').datepicker({dateFormat: "yy-mm-dd"});

Note you don't even need the each call.

Complete example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DatePicker Test Page</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"&gt;&lt;/script&gt;
<script type='text/javascript'>
$(function() {
    $('.dp').datepicker();
});
</script>
</head>
<body>
<hr />
<input class='dp' type='text'>
<input class='dp' type='text'>
<input class='dp' type='text'>
</body>
</html>

T.J. Crowder 2009-08-25 10:28:18

Thanks for your answer.I did try that alredy, the problem is that no matter what field the datepicker is triggered by, the date value gets entered into the first matching input element that jquery finds.For example using the code in your answer, if I click the third input the datepicker is triggered but when a date is selected it is inserted into the first input element in the html rather than the third...

meta 2009-08-25 10:37:10

@meta: That's strange, it doesn't do that for me, the date goes in the correct fields when I run that test page. I've tried IE7, FF3.0 (haven't upgraded yet), Safari 3 (erm, ditto), Opera 9.64, and Chrome 2. I think it must be something else on your page causing that behavior...

T.J. Crowder 2009-08-25 11:04:58

...and FF 3.5.2 and Safari 4.0.3 (just for completeness).

T.J. Crowder 2009-08-25 11:16:35

hmmm okay, thanks T.J. - you're completely right as your test page works as expected.Think I've spotted the issue which is that the dynamically inserted input elements all have the same id value - leading to the "first element" behaviour I encountered. unfortunately that's not something I'm able to change in the environment I'm working in.sorry, I hadn't seen that before now.Guess I''ll either take it up with the developer who's code I'm hooking into or try another route.thanks again for your time though

meta 2009-08-25 11:27:53

@meta: Good luck with it. You definitely want to sort that out, having multiple elements with the same `id` is a Bad Thing.

T.J. Crowder 2009-08-25 12:12:18

Answer 2

+1 A:

Your code should work as it is. However, you could loop through by name like this:

$("input[name*='field_id_'].date-pick").each(function(){
   $(this).datepicker({dateFormat: "yy-mm-dd"});
});

kaiz.net 2009-08-25 10:36:40

cheers for your answer - I should have mentioned though that I have other input elements in the same form with name attributes starting with `field_id_` so need to loop through based on both name and class.

meta 2009-08-25 10:39:52

I added the class to the selector.

kaiz.net 2009-08-25 10:52:35

thanks kaiz.net, but that code only seems to trigger when the first (in html order) input element is clicked and not subsequent ones... am going to try an even more stripped down test case without the dynamically inserted inputs and see if it works then

meta 2009-08-25 11:02:06

@kaiz.net, your solution works perfectly with a minimal test case but is broken by the duplicate id values inserted by the code I'm working with - thanks for your time and attention though!

meta 2009-08-25 11:35:55

ansaurus

tags:

views:

answers:

looping through elements with jQuery based on name attribute rather than id

related questions