I'm trying to duplicate a field with a datepicker. The field gets duplicated, but the datepicker only shows on the first two fields... I've tried other workarounds such as adding a live
listener to the field that calls the datepicker, but no go.
var dc=0;
jQuery('#otherRecAdd').click(function(){
dc++;
var d=$('othrRecDates').innerHTML;
var nd=document.createElement('div');
nd.innerHTML=d;
var divID='othrDate'+dc;
nd.id=divID;
jq(nd).attr('id','orInID'+dc);
var ind=jq(nd).find('input');
var indID='orDate'+dc;
jq(ind).attr('id',indID)
document.getElementById('otherReccuranceDiv').appendChild(nd);
var x=jq("input[name=othrRdate]");//x.length increments correctly; it is finding all of the inputs
x.datepicker();
})
//this doesn't work either
jq(function(){
jq('input[name=othrRdate]').live('click', function() {
jq(this).datepicker({showOn:'focus'}).focus();
});
});
So the form starts out with one input and the datepicker works correctly. If I duplicate that input, the duplicated input works correctly. However, after this, any subsequently duplicated inputs do not work as expected. Here is the generated html:
<label for="otherRec">Other Reccurance</label></b>
<input name="otherRec" id="otherRec" onclick='toggleDiv("othrRecDates");' type="checkbox">
<div id="othrRecDates" style="">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="date" type="text">
<br>
</div>
<div id="orInID1">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate1" type="text">
<br>
</div>
<div id="orInID2">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate2" type="text">
<br>
</div>
<div id="orInID3">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate3" type="text">
<br>
</div>
And I just realized that this won't work for me either as the name
attributes need to be unique. I suppose better solution would be something akin to the above but with className selection instead of name.
Any ideas would be awesomely awesomed.
edit: yes, I am mixing prototype and jQuery :/
I'm trying to duplicate a field with a datepicker. The field gets duplicated, but the datepicker only shows on the first two fields... I've tried other workarounds such as adding a live
listener to the field that calls the datepicker, but no go.
var dc=0;
jQuery('#otherRecAdd').click(function(){
dc++;
var d=$('othrRecDates').innerHTML;
var nd=document.createElement('div');
nd.innerHTML=d;
var divID='othrDate'+dc;
nd.id=divID;
jq(nd).attr('id','orInID'+dc);
var ind=jq(nd).find('input');
var indID='orDate'+dc;
jq(ind).attr('id',indID)
document.getElementById('otherReccuranceDiv').appendChild(nd);
var x=jq("input[name=othrRdate]");//x.length increments correctly; it is finding all of the inputs
x.datepicker();
})
//this doesn't work either
jq(function(){
jq('input[name=othrRdate]').live('click', function() {
jq(this).datepicker({showOn:'focus'}).focus();
});
});
So the form starts out with one input and the datepicker works correctly. If I duplicate that input, the duplicated input works correctly. However, after this, any subsequently duplicated inputs do not work as expected. Here is the generated html:
<label for="otherRec">Other Reccurance</label></b>
<input name="otherRec" id="otherRec" onclick='toggleDiv("othrRecDates");' type="checkbox">
<div id="othrRecDates" style="">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="date" type="text">
<br>
</div>
<div id="orInID1">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate1" type="text">
<br>
</div>
<div id="orInID2">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate2" type="text">
<br>
</div>
<div id="orInID3">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate3" type="text">
<br>
</div>
And I just realized that this won't work for me either as the name
attributes need to be unique. I suppose better solution would be something akin to the above but with className selection instead of name.
Any ideas would be awesomely awesomed.
edit: yes, I am mixing prototype and jQuery :/
Share edited Nov 13, 2010 at 1:44 stormdrain asked Nov 12, 2010 at 21:15 stormdrainstormdrain 7,8954 gold badges39 silver badges76 bronze badges2 Answers
Reset to default 5It drove me nuts the other day! Looks like the jqueryui datepicker ignores the elements with class "hasDatepicker". Assigning a new unique id and removing the hasDatepicker class did the magic.
if($(objParentTR).next().find('input')){ //spot the input field and iterate
$(objParentTR).next().find('input').each(function(i, domEle){
if($(domEle).hasClass("clsDatePicker")){
$(domEle).attr('id', 'dyncal'+tID++).removeClass('hasDatepicker').datepicker();
}
});
}
You can do this a bit simpler entirely in jQuery, for example:
var dc=0;
jQuery('#otherRecAdd').click(function() {
dc++;
jQuery('#othrRecDates') //get id="othrRecDates" as a jQuery object
.clone() //make a copy
.attr('id', 'othrDate'+dc) //give it a new id
.show() //show it, assuming the template is hidden
.appendTo('#otherReccuranceDiv')//append it where it does in the DOM
.find('input') //get the child <input>
.attr('id', 'orDate'+dc) //set it's ID, possible name here too
.datepicker(); //create a datepicker on it
});
This just creates the .datepicker()
on your new <input>
as it's created. You can test it out here. The above is broken out for explanation, but it can be condensed down as much as is readable, like this:
var dc=0;
jQuery('#otherRecAdd').click(function() {
dc++;
jQuery('#othrRecDates').clone().attr('id', 'othrDate'+dc).show()
.appendTo('#otherReccuranceDiv')
.find('input').attr('id', 'orDate'+dc).datepicker();
});