Generate HTML components with PHP and assign them javascript characteristics

Question

Generate HTML components with PHP and assign them javascript characteristics

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I created a form that has a panel, and in that panel it has a input date with a jquery datepicker . If I have data entered in the database, my PHP creates more rows in this panel (via ajax ) with other input to insert date, however these new input are not enabling the possibility to choose the date with datepicker .

I believe it's in the order of javascript and PHP rendering in the application.

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

Note: 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)LinesgeneratedbymyPHPwhenitfindsdatainthedatabase

(2)Inputwithclass="data" that does not take the jquery characteristic datepicker .

(3) Input that already loads when requesting page

php javascript jquery ajax

asked by anonymous 07.11.2018 / 01:02

2 answers

0

When you run $('.data').datepicker({...}) for the first time, the jQuery DatePicker creates instances of all the .data elements available in the DOM right now.

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

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

07.11.2018 / 13:53

Rewriting rule not to break files of type .map Drag & Drop with jQuery does not put the element in the right DIV

score 0 · Accepted Answer

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 completed successfully. 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 Global Ajax Event Handlers documentation for this API.