Datepicker trouble with dynamic HTML

Datepicker trouble with dynamic HTML

Hi all,

I'm copying a template row in a table and I'm trying to add a date picker to the template.  Here's what I've tried, but I don't get date pickers in the new rows.  I also don't get an exception, so I'm not sure what's going wrong.  I used the exact same code that I used when an initial, visible row.

Thanks!

  1. $("#MyButton").click(
        function()
        {
            try
            {
                // First, copy the template.
                var template = $("#MyTemplateRow");
                var newRow = template.clone();
               
                // Next, get the number of rows.
                var rowCount = 1 + template.parents("table").size();
               
                // Now, modify the new row.

                newRow.find("label.DateCompleted").attr("for", sprintf("DateCompleted Select", rowCount));
                newRow.find("input.DateCompleted").attr("id", sprintf("DateCompleted Select", rowCount));
                newRow.find("input.DateCompleted").attr("name", "dateCompleted");
                newRow.find(".ui-datepicker-trigger").remove();
               
                // Finally, put the new row in the table.
                template.before(newRow);
                newRow.show();
               
                newRow.find("input.DateCompleted").datepicker (
                    {
                        showOn: 'button'
                      , buttonImage: 'calendar.gif'
                      , buttonImageOnly: true
                      , dateFormat: 'mm/dd/yy'
                    }
                );
            }
            catch(e)
            {
                // ...
            }
           
            return false;
        }
    );