Generate HTML components with PHP and these assign javascript characteristics

Question

I created a form that has a panel and this panel has a input date with a jquery datepicker. If you have data entered in the database, my PHP creates more lines in this panel (through the ajax) with others input to insert a date, however input are not enabling the possibility to choose the date with the datepicker.

I believe it is by the order of javascript processing and PHP in the application.

How can I make this new input also assign my datepicker?

Obs.: the new input is also defined with class="data"

datepicker

$('.data').datepicker({
    dateFormat: 'dd/mm/yy',
    dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
    dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
    dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
    monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
    monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
    nextText: 'Próximo',
    prevText: 'Anterior',
    maxDate: new Date,
});

(1) Lines generated by my PHP when it finds data in the database

(2) Input with class="data" that does not take the jquery feature datepicker.

(3) Input that already loads when I request the page

Answer 1

When you run the $('.data').datepicker({...}) for the first time, jQuery Datepicker creates instances of for all elements . data available in the DOM at this very moment.

When you create new components with Ajax Datepicker has no way of knowing that these elements were created and instantiate them automatically.

To solve this problem you should, as soon as you create a new date input (preferably with a single id), instantiate Datepicker again only for this element.

Answer 2

You can try to solve this problem using jQuery’s "ajaxSuccess" function, this function receives as parameter an anonymous function that is executed every time an ajax request is successfully completed. This is an Ajax event.

$(document).ajaxSuccess(function () {
    $('.data').datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
        dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        nextText: 'Próximo',
        prevText: 'Anterior',
        maxDate: new Date,
    });
});

See the official documentation Global Ajax Event Handlers of this API.