jQuery datepicker and new rows

Question

jQuery Script

            var current = 1;
            $('#addWorkingHistory').live('click', function() {
                var strAdd = '<tr id="workingHistory' +current+ '"></tr>';
                strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_from]" class="form-control" type="text" id="WorkingHistory'+current+'DateFrom"/></div></div></td>';
                strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_to]" class="form-control" type="text" id="WorkingHistory'+current+'DateTo"/></div></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][company]" class="form-control" type="text" id="WorkingHistory'+current+'Company"/></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][position]" class="form-control" type="text" id="WorkingHistory'+current+'Position"/></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][salary]" class="form-control" type="text" id="WorkingHistory'+current+'Salary"/></div></td>';
                strAdd += '</tr>';
                $('body').find('#workingHistoryBody').append(strAdd);
                $('.input-append.date').each(function() {
                    $(this).datepicker({
                        autoclose: true,
                        todayHighlight: true
                    });
                });
                current++;
            });

Part of the table

                                <tbody id="workingHistoryBody">
                                    <tr id="workingHistory0">
                                        <td>
                                            <div class="input-append date success">
                                                <?= $this->Form->input('WorkingHistory.0.date_from', array('class' => 'form-control', 'label' => false)); ?>
                                                <span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="input-append date success">
                                                <?= $this->Form->input('WorkingHistory.0.date_to', array('class' => 'form-control', 'label' => false)); ?>
                                                <span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
                                            </div>
                                        </td>
                                        <td><?= $this->Form->input('WorkingHistory.0.company', array('class' => 'form-control', 'label' => false)); ?></td>
                                        <td><?= $this->Form->input('WorkingHistory.0.position', array('class' => 'form-control', 'label' => false)); ?></td>
                                        <td><?= $this->Form->input('WorkingHistory.0.salary', array('class' => 'form-control', 'label' => false)); ?></td>
                                    </tr>
                                </tbody>

I’ve been a little aggravated lately trying to get jQuery UI Datepicker to work correctly on dynamically added fields for creating additional line items. It works great on the items that are already displayed on the page. Any help is appreciated.

Managed to find the solution at the following link. http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui — Shawn Ang, Jun 06 '14 at 01:00

score -1 · Answer 1 · answered Jun 05 '14 at 10:44

I have edited you jquery code. Try this :

var current = 1;
            $('#addWorkingHistory').live('click', function() {
                var strAdd = '<tr id="workingHistory' +current+ '"></tr>';
                strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_from]" class="form-control" type="text" id="WorkingHistory'+current+'DateFrom"/></div></div></td>';
                strAdd += '<td><div class="input-append date success"><div class="input text"><input name="data[WorkingHistory]['+current+'][date_to]" class="form-control" type="text" id="WorkingHistory'+current+'DateTo"/></div></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][company]" class="form-control" type="text" id="WorkingHistory'+current+'Company"/></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][position]" class="form-control" type="text" id="WorkingHistory'+current+'Position"/></div></td>';
                strAdd += '<td><div class="input text"><input name="data[WorkingHistory]['+current+'][salary]" class="form-control" type="text" id="WorkingHistory'+current+'Salary"/></div></td>';
                strAdd += '</tr>';
                $('body').find('#workingHistoryBody').append(strAdd);

                $('.input-append.date').each(function() {
                $(document).ready(function(){//added this line
                    $(this).datepicker({
                        autoclose: true,
                        todayHighlight: true
                    });
                });//and added enclosing brackets
                });
                current++;

            });

If you could create a simple fiddle for it that would be great !! — Rahul Gupta, Jun 06 '14 at 04:55

jQuery datepicker and new rows

1 Answers1