Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brissolare

EasyToolTip não funciona em requisicao Ajax via WebService

Recommended Posts

Eu utilizo o easytooltip jquery para colocar os "baloes" de comentário em minha pagina

 

funciona perfeitamente nos elementos que eu defino no comando

 

$("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();

 

tudo que tiver o elemento title vai ser mostrado como tooltip

 

O problema vem agora...tenho um webservice que retorna uma tabela, a mesma contem alguns tooltips só que o mesmo não mostra quando passo o mouse sobre os links da tabela

peguei o codigo e copiei em um arquivo a parte, funciona

 

Segue a chamada do serviço

 $.ajax({
       type: 'POST'
       //Caminho do WebService + / + nome do metodo
               , url: "../teste/teste.asmx/teste1"
               , contentType: 'application/json; charset=utf-8'
               , dataType: 'json'
       //Abaixo adicione as variáveis caso haja alguma.
               , data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
               , success: function (data, status) {

                   //Caso não ocorra nenhum tipo de erro:
                    $('.divWEB').html(data.d);
                   //alert(data.d);

               }
               , error: function (xmlHttpRequest, status, err) {
                   //Caso ocorra algum erro:
                   //$('.valor').html('Ocorreu um erro');
                   alert('Erro');
               }
   });

 

as tag's title fora dessa div onde carrego a tabela funcionam, o resto não

 

obrigado desde já

Abraços

Compartilhar este post


Link para o post
Compartilhar em outros sites

porque você trouxe esse conteudo com ajax, e o objeto não foi instanciado para esses elementos novos.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Sim, ache esses elementos 'manualmente', e então faça o bind do evento para eles, assim que os colocar na página.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Segue o código com o bind, mas creio que eu esteja fazendo errado, alguem pode me dar um exemplo

 

$(document).ready(function () {
   $("a,.classButtons, .classButtons2, .classBotoesNavegacao,").easyTooltip();
   $(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
   $('input:text').setMask();
   if ($("#idA").val() != "" && $("#txtData").val() != "") {
       GetData();
       $("a").bind().easyTooltip;
    }
});  
function GetData() {
   $.ajax({
       type: 'POST'
       //Caminho do WebService + / + nome do metodo
               , url: "../teste/teste.asmx/teste1"
               , contentType: 'application/json; charset=utf-8'
               , dataType: 'json'
       //Abaixo adicione as variáveis caso haja alguma.
               , data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
               , success: function (data, status) {
                   //Caso não ocorra nenhum tipo de erro:
                   $('#resultado').html(data.d);
                   //alert(data.d);

               }
               , error: function (xmlHttpRequest, status, err) {
                   //Caso ocorra algum erro:
                   //$('.valor').html('Ocorreu um erro');
                   alert('Erro');
               }
   });
}

Compartilhar este post


Link para o post
Compartilhar em outros sites

você tem q fazer o bind nos elementos que você quiser da variavel data

 

e 'bind' foi a forma de dizer, eu não estava me referindo a esta função em especifico.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Estou utilizando o seguinte codigo para ligar ao data.d o tooltip está funcionando com 2 probleminhas

 

$(document).ready(function () {
   $("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();
   $(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
   $('input:text').setMask();
   if ($("#id").val() != "" && $("#txtData").val() != "") {
       GetData();
   }
   $('.aDiv').delegate(".Div a", "hover", function () {
       $("a").easyTooltip();
   });

});  
function GetData() {
   $.ajax({
       type: 'POST'
       //Caminho do WebService + / + nome do metodo
                , url: "../teste/teste.asmx/teste1"
               , contentType: 'application/json; charset=utf-8'
               , dataType: 'json'
       //Abaixo adicione as variáveis caso haja alguma.
               , data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
               , success: function (data, status) {
                   //Caso não ocorra nenhum tipo de erro:
                   $('.Div').html(data.d);

                   //alert(data.d);

               }
               , error: function (xmlHttpRequest, status, err) {
                   //Caso ocorra algum erro:
                   //$('.valor').html('Ocorreu um erro');
                   alert('Erro');
               }
   });
}

 

Problema 1 - Quando passo o mouse e primeira vez o evento nao funciona, ele funciona a segunda vez que passo o mouse

Problema 2 - Quando funciona o tooltip na hora que ele aparece cria uma barra de rolagem que nao era pra ter...

 

Fala Pessoal!

 

Consegui resolver o problema 1 alterando o código segue abaixo

$(document).ready(function () {
   $("a,.classButtons, .classButtons2, .classBotoesNavegacao").easyTooltip();
   $(".help ,.exames, #tel").colorbox({ width: "90%", height: "90%", iframe: true });
   $('input:text').setMask();
   if ($("#id").val() != "" && $("#txtData").val() != "") {
       GetData();
   }

  // $('.Div').live(".Div a", "hover", function () {
  //     $(this).easyTooltip();
  // });

});  
function GetData() {
   $.ajax({
       type: 'POST'
       //Caminho do WebService + / + nome do metodo
                , url: "../teste/teste.asmx/teste1"
               , contentType: 'application/json; charset=utf-8'
               , dataType: 'json'
       //Abaixo adicione as variáveis caso haja alguma.
               , data: "{id:'" + $("#idA").val() + "', data:'" + $("#txtData").val() + "'}"
               , success: function (data, status) {
                   //Caso não ocorra nenhum tipo de erro:
                   $('.Div').html(data.d);
                   $('.Div').live('hover', function () {
                       $("a").easyTooltip();
                   });  
                   //alert(data.d);

               }
               , error: function (xmlHttpRequest, status, err) {
                   //Caso ocorra algum erro:
                   //$('.valor').html('Ocorreu um erro');
                   alert('Erro');
               }
   });
}

 

O único Problema agora é a scrollbar que aparece quando passo o mouse no link

Compartilhar este post


Link para o post
Compartilhar em outros sites

aí é erro de css.

 

poste um link para o site, e analise com o firebug.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Não tenho site para postar o link, é local no pc...baixei o firebug, vou tentar aprender a usar, mas o interessante é que antes de passar o mouse na tabela as outras tooltips funcionam normalmente sem criar a barra de rolagem depois que passo o mouse na barra onde usei o evento para dar o bind tudo começa a criar a barra de rolagem no evento hover

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.