Ajax+fancybox

[Boca 0]

Pessoal estou fazendo uma busca quando o usuário digitar mostro o resultado em tempo real, porem no resultado tenho um botão para alterar os dados com fancybox e não esta abrindo e sim abre em uma nova aba, segue abaixo como estou fazendo se tiver alguem que pode dar uma força.

 

index.php

<link rel="stylesheet" href="js/fancy_box/jquery.fancybox.css" type="text/css">
<script src="js/fancy_box/jquery.fancybox.js"></script>
<script src="js/fancy_box/jquery.fancybox.trigger.js"></script>
    <script src="js/busca.js"></script>
    <script>
    function pesquisa(valor)
    {
    //FUNÇÃO QUE MONTA A URL E CHAMA A FUNÇÃO AJAX
    url="busca_nome.php?valor="+valor;

    ajax(url);
    }

    </script>

<input type="text" name="nome" id="txt_busca"  onKeyPress="pesquisa(this.value)">

<ul id="slider"></ul>

busca_nome.php

<div class="slide">
<?php
    if(!empty($_GET["valor"]))
    {
    //faz a consulta ao banco esta parte esta me trazendo todos o resultado da busca
   echo "<li><a href='?ID=XXX'  class='zoom'>alterar</a></li> ";
    }
?>
</div>

busca.js

    // JavaScript Document
    // FUNÇÃO RESPONSÁVEL DE CONECTAR A UMA PAGINA EXTERNA NO NOSSO CASO A BUSCA_NOME.PHP
    // E RETORNAR OS RESULTADOS
     
    function ajax(url)
    {
     
    //alert(nick);
    //alert(dest);
    //alert(msg);
     
    req = null;
    // Procura por um objeto nativo (Mozilla/Safari)
    if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
    req.onreadystatechange = processReqChange;
    req.open("GET",url,true);
    req.send(null);
    // Procura por uma versão ActiveX (IE)
    } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
    if (req) {
    req.onreadystatechange = processReqChange;
    req.open("GET",url,true);
     
    req.send();
    }
    }
    }
     
    function processReqChange()
    {
     
    // apenas quando o estado for "completado"
    if (req.readyState == 4) {
     
    // apenas se o servidor retornar "OK"
     
    if (req.status ==200) {
     
    // procura pela div id="pagina" e insere o conteudo
    // retornado nela, como texto HTML
    
    document.getElementById("slider").innerHTML = req.responseText;
    } else {
    alert("Houve um problema ao obter os dados:n" + req.statusText);
    }
    }
    } 

jquery.fancybox.trigger.js

$(document).ready(function() {
	$("a.zoom").attr('rel', 'top').fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	300, 
		'autoDimensions' : true,
		'overlayShow'	:	true,
		'overlayOpacity' : 0.7,
		'overlayColor' : '#000'
	});
});

 

[William Bruno 1501]

cara, como vc insere o html da classe zoom com ajax, vc precisa habilitar o fancybox, apenas depois de inserir.

 

isso aqui, olha:

 

 

document.getElementById("slider").innerHTML = req.responseText;
//instanciar o fancybox aqui

[Boca 0]

William, obrigado poderia me ajudar onde devo inserir, pois não manjo muito de Ajax, tenho mais conhecimento no php

[William Bruno 1501]

ali onde eu mostrei, no lugar do meu comentário.

[Boca 0]

Valeu William, mas não funcionou

[Boca 0]

Alguem tem mais alguma dica que possa me ajudar?

[William Bruno 1501]

mostre como vc fez. É pra funcionar sim.

[Boca 0]

Então William, não sei se estou fazendo correto, como falei não tenho muita experiência em JS

Não tenho certeza como instanciar o fancybox neste ponto que vc indicou

[William Bruno 1501]

mostre como vc tentou, ai eu te digo se vc fez certo ou não.

[Boca 0]

com certeza devo ter feito alguma m...

 

    document.getElementById("slider").innerHTML = req.responseText;
	load( function (){  
	$("a.zoom").attr('rel', 'top').fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	300, 
		'autoDimensions' : true,
		'overlayShow'	:	true,
		'overlayOpacity' : 0.7,
		'overlayColor' : '#000'
	});
        });

[William Bruno 1501]

faça assim:

 document.getElementById("slider").innerHTML = req.responseText;
	$("a.zoom").attr('rel', 'top').fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	300, 
		'autoDimensions' : true,
		'overlayShow'	:	true,
		'overlayOpacity' : 0.7,
		'overlayColor' : '#000'
	});

[Boca 0]

Tinha feito desta forma tb já Willian, não deu certo

[William Bruno 1501]

e apareceu algo no console de erros ? oque ?

 

Ctrl+Shift+J no firefox.

 

lembre-se, que vc deve carregar o js e css do fancybox antes do ajax, na página mãe.

[Boca 0]

Erro: TypeError: $(...).attr(...).fancybox is not a function
Arquivo-fonte: /js/busca.js
Linha: 55

Deu certo William, muito obrigado