Search jQuery

jQuery Forum

Using jQuery UI

mrbugle

Problem with multiple datepickers with same ID

Answered

Need more info
Working on it
Answered

in Using jQuery UI • 8 years ago

Hi!

I have a page where i have two textboxes with the same id - but in different divs (this is not by choice, it has to be like that unfortunately). This seems to cause confusion to the datepicker: The first datepicker works as it should. The second, however, while displaying the popup correctly and fires on the right event writes the result back to the first datepickers textbox.

What am I doing wrong here - and what can I do to make this work?

<html>
<head>
<link href="jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.5.1.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="area1">
<p>From date</p>
<input id="FromDate" type="text">
</div>
<div id="area2">
<p>Some other From Date</p>
<input id="FromDate" type="text">
</div>
<script type="text/javascript">
$(function() {
$("#area1").find("#FromDate").datepicker();
$("#area2").find("#FromDate").datepicker();
});
</script>
</body>
</html>

Replies(6)

Kevin B

Re: Problem with multiple datepickers with same ID

8 years ago

try this:

$("input[id=FromDate]").datepicker();

$("#area1 input[id=FromDate]").datepicker();

$("#area2 input[id=FromDate]").datepicker();

-- Kevin

mgawrych

Re: Problem with multiple datepickers with same ID

8 years ago

You can go with this option:

        $(".datepicker").live('click',function(){
            $(this).datepicker().datepicker( "show" );
        });

mrbugle

Re: Problem with multiple datepickers with same ID

8 years ago

The easiest solution was to change the underlying problem: Make sure not to have elements with the same ID, and so I ended up changing the underlying model so that the problem did not occur.

jQueryUI does the lookup by ID, and as such the result will be put in the first element with the id "FromDate". That is how it works, and as it is 1) bad practice and 2) not in compliance with xhtml-standards (as far as I know) to have multiple elements with the same ID the easiest way is to follow the standards.

And as such, both your suggestions will fall short.

So - the answer is: Keep IDs unique! :)

Thanks for the input to both of you.

divanshu.n

Re: Re: Problem with multiple datepickers with same ID

8 years ago

@mrbugle:
you are right that's the way it should be. But still if there is a situation like if one use this modal box, in which it copies the div while opening, you do not have choice to make it this way.

@kboudloche, mgawrych

It does show up but it is not allowing me to select any date. it gives following error:

Error: f is undefined ..../jquery-ui-1.8.7.custom.min.js Line 512

So, if any body know how to handle this situation, pls respond.

divanshu.n

Re: Problem with multiple datepickers with same ID

8 years ago

Thanks I got the solution, by overriding the id in callFunctionAfterShow and allpying the date picker after that.

@mrbugle

Thanks for inspiring

Omer

Re: Problem with multiple datepickers with same ID

1 year ago

@mrbugle you cant add the same id and expect multiple datepickers to work. however you can make this work by using 'name' attribute .just add the same name attribute to your textfields and it will work.

var add_date_picker = document.getElementsByName('datepicker1');

$(add_date_picker ).datepicker();

Top Reply

Response title

Attachments

jQuery Forum

Problem with multiple datepickers with same ID

Answered

Replies(6)

Re: Problem with multiple datepickers with same ID

Re: Problem with multiple datepickers with same ID

Re: Problem with multiple datepickers with same ID

Re: Re: Problem with multiple datepickers with same ID

Re: Problem with multiple datepickers with same ID

Re: Problem with multiple datepickers with same ID

Statistics

Tags

Actions

Related Posts