when adding a new inline to my formset, my datepickers stop working

Question

Bit of a strange one today.

I've a very basic project. A form and added to that I have an inline form. It's books to authors.

When the form loads(/authors/create/) I have a author name and underneath I have a form where I can add books to that author.

To be able to have dynamic inlines(able to add or remove on the form) I'm using http://code.google.com/p/django-dynamic-formset/.

My problem now is that when I add a new inline, all my datepickers(for the date published fields) for the inline form stops working.

I have attached my sample project showing exactly what is wrong. You can download and run it here.

Why and how can I fix this?

Answer 1

I am sure there is cleaner and more clever way to do it. But working proof of concept:

function renewDatePickers() {
    $('.datepicker').datepicker('destroy');
    $(".datepicker").datepicker({dateFormat: 'yy-mm-dd'});
}

$(renewDatePickers);

$(function() {
    $('.form-row.inline.{{ book_form.prefix }}').formset({
        prefix: '{{ book_form.prefix }}',
        added: renewDatePickers // Event -- read inline docs
    });
})

And take Your JS code from base.html to author_form.html