Clone div jQuery UI Datepicker issue

Question

I have a div containing a few fields that can be cloned into another div. One of those fields use the datepicker ui. However, when I go to clone the div the datepicker stops working for the cloned input. I have used and edited the following from this question but no luck

HTML:

<div class="add-child">
    <input type="text" class="child_dob" name="child_dob" id="child_dob" />
</div>
<button type="button" id="add_child">Add another child</button>

jQuery:

/* CLONE CODE */
$(function() {
    $('#add_child').click( function(){  
     var clone = $('.add-child:first').clone();
     clone.appendTo('#child');
     $(":input").each(function (i) { $(this).attr('tabindex', i + 1); });
    });
});

I really cannot understand where I am going wrong with it. Any help would be greatly appreciated

EDIT:

HTML:

<table class="portrait-table add-child">
            <tr>
                <th colspan="6"><strong>Children details</strong></th>
            </tr>
            <tr>
                <th>Name</th><td><input type="text" class="child_name" name="child_name" value="<?php echo set_value('child_name'); ?>" /></td><td><?php echo form_error('child_name') ?></td>
            </tr>
            <tr>
                <th>Relationship to you</td>
                <td><select class="child_relation" name="child_relation">
                        <option value="Son">Son</option>
                        <option value="Daughter">Daughter</option>
                        <option value="Other">Other</option>
                    </select>
                </td>
                <td><?php echo form_error('child_relation') ?></td>
            </tr>
            <tr>
                <th>Age</th><td><input type="text" class="child_age" name="child_age" value="<?php echo set_value('child_age'); ?>" /></td><td><?php echo form_error('child_age') ?></td>
            </tr>
            <tr>
                <th>DoB</th><td><input type="text" class="child_dob" name="child_dob" value="<?php echo set_value('child_dob'); ?>" /></td><td><?php echo form_error('child_dob') ?></td>
            </tr>
            <tr>
                <th>Gender</th>
                <td><select class="child_gender" name="child_gender">
                        <option value="Male">Male</option>
                        <option value="Female">Female</option>
                    </select>
                </td>
                <td><?php echo form_error('child_gender') ?></td>
            </tr>
            <tr>
                <th>Ethnicity</th>
                <td><select class="child_ethnicity" name="child_ethnicity">
                        <option>Ethnicity</option>
                        <option value="White British">White British</option>
                        <option value="White Irish">White Irish</option>
                        <option value="Traveller">Traveller</option>
                        <option value="Gypsy/Roma">Gypsy/Roma</option>
                        <option value="Any other White Background">Any other White Background</option>
                        <option value="Black Caribbean">Black Caribbean</option>
                        <option value="Black African">Black African</option>
                        <option value="Any other Black Background">Any other Black Background</option>
                        <option value="Indian">Indian</option>
                        <option value="Bangladeshi">Bangladeshi</option>
                        <option value="Chinese">Chinese</option>
                        <option value="Mixed Background">Mixed Background</option>
                        <option value="Any other Asian Background">Any other Asian Background</option>
                        <option value="Any Other Ethnic Group">Any Other Ethnic Group</option>
                        <option value="Not given">Not given</option>
                    </select>
                </td>
                <td><?php echo form_error('child_ethnicity') ?></td>
            </tr>
            <tr>
                <th>School</th>
                <td>
                    <select class="child_school" name="child_school">
                        <option value="Southwick Community Primary School">Southwick Community Primary School</option>
                        <option value="Valley Road Community Primary School">Valley Road Community Primary School</option>
                        <option value="Diamond Hall Junior School">Diamond Hall Junior School</option>
                        <option value="Highfield Primary School">Highfield Primary School</option>
                        <option value="Usworth Colliery Primary School">Usworth Colliery Primary School</option>
                        <option value="Hetton Primary School">Hetton Primary School</option>
                        <option value="Hetton Lyons Primary School">Hetton Lyons Primary School</option>
                        <option value="Other">Other</option>
                        <option value="N/A">N/A</option>
                    </select>
                </td>
                <td><?php echo form_error('child_school') ?></td>
            </tr>
        </table>
        <div id="child"></div>

        <p><button type="button" id="add_child">Add another child</button></p>

jQuery (I need each field name to be appended with _additional):

$(function() {
$('#add_child').click( function(){  
    var clone = $('.add-child:first').clone(true).appendTo('#child');
     clone.find("input").val("");
     clone.find(".child_name").attr('name', 'child_name_additional[]');
     clone.find(".child_relation").attr('name', 'child_relation_additional[]');
     clone.find(".child_age").attr('name', 'child_age_additional[]');
     clone.find(".child_dob").attr('name', 'child_dob_additional[]');
     clone.find(".child_gender").attr('name', 'child_gender_additional[]');
     clone.find(".child_ethnicity").attr('name', 'child_ethnicity_additional[]');
     clone.find(".child_school").attr('name', 'child_school_additional[]');

     $(":input").each(function (i) { $(this).attr('tabindex', i + 1); });
});

});

have you tried putting all code in doc ready? I mean the second code below the doc ready, put in ready and see if helps. — Jai, Apr 26 '13 at 10:22
Yes I have done that now, my mistake. I have now cloned the element and the datepicker is shwoing up, but it is always adding the date into the first input — Pooshonk, Apr 26 '13 at 10:44

billyonecan · Accepted Answer · 2013-04-29T07:43:23.133

4

A few things for you to look at:

It looks as if your second block of code is outside of the $(document).ready(function()).
var myDiv is your button, it has no children.
When your input is cloned, you get duplicate child_dob id's.

As for getting the datepicker to work on the cloned input, this should do the trick:

$('#add_child').click(function() {  
    var clone = $('.add-child:first').clone(true).appendTo('#child');
    clone.find('.child_dob').datepicker();
});

Here's a simplified example fiddle

EDIT

I understand what your problem is now that you've added the full code. In your question you don't mention that you have a datepicker already assigned to the original .child_dob. It's a little bit messy, but you need to remove the datepicker from the cloned element, and then add it again:

Replace the line:

clone.find(".child_dob").attr('name', 'child_dob_additional[]');

With:

clone.find(".child_dob").removeClass('hasDatepicker').removeAttr('id')
                        .datepicker().attr('name', 'child_dob_additional[]');

Here's another fiddle

edited Apr 29 '13 at 07:43

answered Apr 26 '13 at 10:17

billyonecan

20,090
8
42
64

The datepicker is shoping up now, but when I select the date it changes the value of the original input that I cloned. Any ideas? – Pooshonk Apr 26 '13 at 10:39
By the way, you can remove the entire second block of code. You don't need it. – billyonecan Apr 26 '13 at 10:42
It is still doing the same thing. Since the first and second input have the same class it isn't working for the cloned input. I have removed the second block of code already as your example is the closest i've got to a solution so far.. – Pooshonk Apr 26 '13 at 10:44
It doesn't matter that they have the same class. A new, unique datepicker is assigned to each `clone`. Did you remove the `id` from your `child_dob` input? – billyonecan Apr 26 '13 at 10:46
I have updated my answer, there are more than one field that is cloned by i still don't understand why it isn't working! – Pooshonk Apr 26 '13 at 11:52

score 0 · Answer 2 · answered Apr 26 '13 at 10:08

0

try calling datepicker after you element is appended

clone.appendTo('#child').datepicker();

answered Apr 26 '13 at 10:08

bipen

36,319
9
49
62

score 0 · Answer 3 · answered Apr 26 '13 at 11:08

0

Check this fiddle.

var clone = $('.add-child input:first').removeClass('hasDatepicker')
  .removeData('datepicker').clone();
        var newCloneId="child_dobx_"+(child_count+1);
        clone.attr("name",newCloneId).attr("id",newCloneId).appendTo('#add-child');

I tried removing the datepicker class & data on the clone and then appended it. It is working. Check if this is what is required.

answered Apr 26 '13 at 11:08

Ahamed Mustafa M

3,069
1
24
34

There are now more than one field that needs to be cloned. I have updated my question because it still doesn't seem to work :( – Pooshonk Apr 26 '13 at 11:29

Clone div jQuery UI Datepicker issue

3 Answers3

Here's a simplified example fiddle

EDIT

Here's another fiddle