Question

I have a table which each cells is a part of a form. In my form i have a jquery datepicker apply on a input element:

<form method="post" action="test.php">
                <table>
                    <tr>
                     ....
                        <td>
                            <input type="text" id="date" name="test"/>
                        </td>
                     ....
                    </tr>
                </table>
                <button type="button" id="addLine">Add line</button>
                <button id="submit" type="submit">Submit</button>
            </form>

I add my datepicker like this:

$(document).ready(function() {
            $('#date').datepicker({showAnim: "slideDown"});   
        });

Here comes the problem… i want to add a line to my table but the datepicker doesn’t apply on the new added line…

$(document).ready(function() {
            $('#addLine').click(function() {
                var line = $('<tr>...<input type="text" id="date" name="test"/>...</tr>');
                $('table').append(line);
              });
        });

The new line appears but when i want to insert a value the datepicker doesn’t pop out on the new created line.

i’ve tried to put a another $(‘#date’).datepiker()… in my .click(function… but it doesn’t work. I’ve also tried to refresh the dom with a method called page().. but i’ve got a error that the method doesn’t exist on the element. I need your help!

Thank you

Answer 1

You cannot have multiple ids with the same value, which might be causing some of your problems. Use a class name instead, for example class="date"

<input type="text" class="date" name="test"/>

Since you are dynamically adding the content, after it is loaded you can then fire the datePicker function.

So:

line.find(".date").datepicker({showAnim: "slideDown"})

Sample: http://jsbin.com/omoyiy/2/edit