Date picker only works on first row

Question

I have a strange problem with Date Picker. He only works on the first row on a dynamic table.

        $(document).ready(function () {
        $(".Data1").datepicker({
            showOn: "button",
            buttonImage: "/calendar.png",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true

        });
    });

Here its my Javascript for creating a new row:

 function addRow(tableID) {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
            var colCount = table.rows[0].cells.length;
            for (var i = 0; i < colCount; i++) {
                var newcell = row.insertCell(i);
                newcell.innerHTML = table.rows[1].cells[i].innerHTML;
                newcell.className = "clastest";
                if (i == 3)  {
                                  newcell.getElementsByTagName("input")[0].id="StartD"+rowCount;
                              }
                              if (i == 4) {
                                  newcell.getElementsByTagName("input")[0].id = "EndD" + rowCount;
                              }
                              if (i == 5)
                              {
                                  newcell.getElementsByTagName("input")[0].id =rowCount;
                              }

            }
        }

And here is the HTML

            <td>
                @Html.TextBox("Pozition", poz, new { @style = "width:50px;", @id = "Pozition" })
            </td>
            <td>
                @Html.TextArea("Description", des, new { @style = "width:250px; min-height:50px;", @id = "Description" })
            </td>
            <td>
                @Html.TextBox("StartDate", di, new { @class = "Data1", @id = "StartD" })
            </td>
            <td>
                @Html.TextBox("EndDate", de, new { @class = "Data1", @id = "EndD" })
            </td>

Any ideas why it works only on the first row and not on all?

score 4 · Accepted Answer · edited May 23 '17 at 12:06

4

The problems is that you're are not adding the event to the newly created elements, when you add the datepicker function only works for the first row because it's the only created when the dom is ready, you'll need to add the event again each time you add a new row.

You have 2 options:

Do what they explain here which is the optimal: Event binding on dynamically created elements?
Or put the datepicker code in a function (not optimal):

function addDatePicker(){
      $(".datepicker").datepicker({
        showOn: "button",
        buttonImage: "/calendar.png",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true
      });
}

Then add addDatePicker() at the end of addRow() function

edited May 23 '17 at 12:06

Community

1
1

answered Sep 06 '12 at 13:54

Skatox

4,237
12
42
47

It doesnt work if i have both datapikers on :( Basically if i have both functions on , the behavior is the same. But if i have only that function, it works for the first row only if I add a second row (which is logic). But how i initialize it for the first row? – Mike Thunder Sep 06 '12 at 14:47
Oh i see, the problem is the CSS selector, do you have the 'clastest' class in all inputs? If you give me more markup i can help you, something like table's id, if it has more tables or it is just one. – Skatox Sep 06 '12 at 14:55
i comment that line with : newcell.className = "clastest"; And above is the HTML code that i am using – Mike Thunder Sep 06 '12 at 15:04
ANd this the code compiled : – Mike Thunder Sep 06 '12 at 15:11
I've modified answer's CSS selector to: .datepicker . You just need to add to all date's input this class to make the datepicker work. Maybe uncommenting the javascript line and changing it from 'clastest' to 'datepicker'. Just add that class to the input. – Skatox Sep 06 '12 at 15:12

Date picker only works on first row

1 Answers1