Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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, obrigado poderia me ajudar onde devo inserir, pois não manjo muito de Ajax, tenho mais conhecimento no php
ali onde eu mostrei, no lugar do meu comentário.
Valeu William, mas não funcionou
Alguem tem mais alguma dica que possa me ajudar?
mostre como vc fez. É pra funcionar sim.
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
mostre como vc tentou, ai eu te digo se vc fez certo ou não.
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'
});
});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'
});Tinha feito desta forma tb já Willian, não deu certo
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.
Erro: TypeError: $(...).attr(...).fancybox is not a function
Arquivo-fonte: /js/busca.js
Linha: 55
Deu certo William, muito obrigado
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