jQuery Datapicker error page with Ajax

Asked

Viewed 211 times

2

I am finishing a registration page and realized that jQuery Calendar after loading for the second time does not work. 

$(function() {

    //Mascaras para Calendário....
    $( "#datepicker10,#datepicker11,#datepicker12,#datepicker00" ).datepicker({
         showOn: "button",
         buttonImage: "images/icon_calendario.png",
         changeMonth: true,
         changeYear: true,
         dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
         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'],
         yearRange: '1900:2100'
     });
});

HTML code:

<label>Data Admissão: </label> <span> <?  echo $linha['DataAdmissao']; ?> </span>
 <div class="">
     <input class="" id="datepicker10" name="DataAdmissao" type="text" />
 </div>

The code works once on the page, but when I use the ajax feature the calendar does not appear. What will be the problem ?

javascript jquery html ajax fullcalendar
  • 1

    Alex, elements that have a calendar are rewritten when running AJAX?

  • Supplementing @Sergio’s question: Are new calendars inserted into the page via ajax? The application of datepicker is not retroactive, if you replace or insert new calendars, you need to apply datepicker manually after this operation.

1 answer

3


The problem is that when you run AJAX, the elements that had a calendar disappear and are replaced by new ones. Even if the content is the same, removing and re-writing elements of the DOM causes the loss of event observers (Event listeners) and other methods associated with these elements.

So I suggest having this code also in the onSuccess function of ajax: (and note the change of the selector to be simpler, searching all IDs started in datepicker), 

$("[id^=datepicker]" ).datepicker({
     showOn: "button",
     buttonImage: "images/icon_calendario.png",
     changeMonth: true,
     changeYear: true,
     dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
     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'],
     yearRange: '1900:2100'
 });

Browser other questions tagged javascript jquery html ajax fullcalendar

You are not signed in. Login or sign up in order to post.