2

Estou finalizando uma página de cadastro e percebi que o jQuery Calendar após ser carregando pela segunda vez não funciona.

$(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'
     });
});

Código HTML:

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

O código funcionar uma vez na página, porém quando uso o recurso de ajax o calendário não aparece. Qual será o problema ?

2
  • 1
    Alex, os elementos que têm calendário são re-escritos quando corre o AJAX?
    – Sergio
    Commented 27/05/2014 às 22:09
  • Complementando a pergunta do @Sergio: novos calendários são inseridos na página via ajax? A aplicação do datepicker não é retroativa, se você substitui ou insere novos calendários, é preciso aplicar o datepicker manualmente após essa operação.
    – bfavaretto
    Commented 27/05/2014 às 22:44

1 Resposta 1

3

O problema é que quando corre o AJAX, os elementos que tinham calendário desaparecem e são substituídos por novos. Mesmo que o conteúdo seja o mesmo, retirar e re-escrever elementos do DOM faz com que se percam os observadores de eventos (event listeners) e outros métodos associados a esses elementos.

Assim sugiro ter este código também na função onSuccess do ajax: (e note a alteração do seletor para ser mais simples, procurando todos os IDs começados em 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'
 });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .