Datepicker não funciona com ajax

Front-end
#1

Oie,
já procurei em vários sites, testei várias coisas e não consigo fazer meu datepicker funcionar.
Meu datepicker abre depois que eu dou um click em uma imagem.
então o java script dele é esse:

[code]$(document).ready(function() {
$("#datepicker, #hiddenDate").datepicker();

 $('.teste').click(function (e) {
     $('#hiddenDate').datepicker("show");
     e.preventDefault();
  });

});[/code]

e ele monta as imagens que vão abrir ele dentro do meu js:

for(var j=0;j<sIt.length;j++){ HTML.add(row,"<div class='mes'><span title='" + qIt[j] + " Imagens'><img class='teste' src='dsaimg/" + (qIt[j]>0?"sim":"nao") + ".png'/></span><label>" + (sIt[j]>0?sIt[j]+this.unity:"") + "</label></div>"); }

esse HTML.add esta montando minha pag em ajax.
E o jsp que chama a js tem isso daqui: <input id="hiddenDate" type="hidden" />
já li que o datepicker não funciona com ajax, mas não estou conseguindo alterar minhas funções para que de certo "/

se eu colocar direto no jsp: <img class='teste' src='dsaimg/nao.png'/>
funciona, belezinha mas do jeito que está não "/

Olha peço desculpas por não saber explicar as coisas muito bem, mas é isso.

#2

Cara, tentou comentar essa linha no código?

e.preventDefault();

Não estou certo, mas me parece que esse cara “bloqueia” o processamento.

Além disso, você usa ferramentas de debug como o firebug para firefox ou o console do IE ou chrome (ambos pelo F12)? Recomendo e talvez eles te mostrem o erro.

#3

não é isso… se eu tirar continua igual, da na mesma…
eu uso o firefox, mas ele não da erro, simplesmente nao funciona

#4

Troca essa linha:

$('.teste').click(function (e) {
Para:

   $(document).on('click', '.teste', function (e) {
#5

Não funcionou e deu:
[13:56:06.844] TypeError: position is undefined @ http://code.jquery.com/ui/1.10.3/jquery-ui.js:8442

#6

Existe uma variável chamada position que está como undefined… Acredito que essa variável é sua…

Faz um teste assim (USANDO AJAX):

$('.teste').click(function (e) {  
         console.log('Usando bind.'); // Funciona no chrome apenas
         // $('#hiddenDate').datepicker("show");  
         // e.preventDefault();  
});

E depois assim:

$(document).on('click', '.teste', function (e) {
         console.log('Usando live.'); // Funciona no chrome apenas
         // $('#hiddenDate').datepicker("show");  
         // e.preventDefault();  
});

Me conte o resultado.

#7

Então o primeiro aconteceu nada… nem erro.
Já o segundo apareceu no console: Usando live. :slight_smile:
Apareceu no firefox tb…

ae eu descomentei as coisas e deu esse erro pelo Chrome ao clicar:
Uncaught TypeError: Cannot read property ‘left’ of undefined

#8

Vou te explicar:

Quando você faz assim: $(’.teste’).click(function(e){});
Você está usando o BIND… Isso é a mesma coisa que isso: $(’.teste’).on(‘click’, function(e){});

O bind tem o seguinte funcionamento:
O momento em que você executa esse comando $(’.teste’), o jQuery vai varrer o DOM procurando todos os elementos que atendem à esse selector.
Depois de trazer esses elementos ele vai atribuir o evento à eles, que no caso é o evento de click.

Se você fizer o seguinte teste:

$(document).ready(function() {
   console.log($('.teste'));
});

Você vai ver que ele vai te trazer um objeto do jQuery mas que não tem nenhum elemento dentro (olhe a propriedade length, vai estar zerada)

Ou seja, no momento em que esse comando é executado, você não tem nenhum elemento ‘.teste’… O jQuery não consegue atribuir o evento à ninguém e fica por isso mesmo.

Quando você faz assim: $(document).on(‘click’, ‘.teste’, function (e) {});
Você está usando o LIVE…

O live tem o seguinte funcionamento:
O evento é atachado ao document. O document é o pai de todos os elementos, então ele existe quando você faz essa atribuição à ele.

Quando um evento acontece (um click, por exemplo) ele é propagado para os pais desse elemento, por exemplo, faça o seguinte teste:

// HTML
&lt;div id="primeiraDiv"&gt;
   &lt;div id="segundaDiv"&gt;
      &lt;div id="terceiraDiv"&gt;
         texto para você clicar.
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;

// JS
$(document).ready(function(){
   $('#primeiraDiv').click(function(){
      console.log('Clicou na primeira div');
   });
   $('#segundaDiv').click(function(){
      console.log('Clicou na segunda div');
   });
   $('#terceiraDiv').click(function(){
      console.log('Clicou na terceira div');
   });
});

Depois disso, clique no TEXTO e veja o console.

O resultado vai ser:
Clicou na terceira div
Clicou na segunda div
Clicou na primeira div

Ou seja, o evento de CLICK é PROPAGADO para os pais desse elemento (e vai indo até chegar no document)

Assim, o click acontece em um elemento, mas quem captura esse evento é o document (e o jQuery tem como saber quem iniciou o evento, sendo assim, ele chama a função implementada no live)

Para você parar esse acontecimento, existe o método stopPropagation() dentro do evento. Ele impede que o evento continue subindo.

Coloque o stopPropagation no teste acima e veja que ele não vai continuar.

Enfim, esse problema de position ou left é bem provável que seja ligado ao fato de você ter alguma hidden e ele não conseguir montar o datepicker… Dê uma analisada melhor nisso.

#9

entendi…
mas eu ainda não consegui fazer funcionar "/

#10

Então dê mais detalhes de como tudo é feito. Esses erros não têm nada a ver com o bind ou live. (e muito menos com ajax, pois eu uso datepicker com ajax e modal e funcionam muito bem)

#11