jQuery DataPicker error on page with Ajax

Question

jQuery DataPicker error on page with Ajax

Navigation

#1 by (3 votes)

2

I'm finalizing a registration page and realized that jQuery Calendar after being uploaded a 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 html jquery ajax fullcalendar

asked by anonymous 28.05.2014 / 00:04

1 answer

Lambda Expression X linq Change specific string fields in Javascript

score 3 · Accepted Answer

The problem is that when running AJAX, elements that had calendar disappear and are replaced with new ones. Even though the content is the same, removing and rewriting elements of the DOM causes event listeners and other methods associated with those elements to be lost.

So I suggest having this code also in the onSuccess function of ajax: (and note changing the selector to be simpler, looking for 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'
 });