Carregando galeria com Ajax

Matheus Weber · Maio 28, 2011

Estou tentando carregar a galeria jqGalScroll dentro de uma div que é carregada com ajax.

Mas não estou conseguindo de jeito nenhum, alguém pode me ajudar?

Os scripts que estou usando:

ajax:

function GetXMLHttp() {
       var xmlHttp;
       try {
               xmlHttp = new XMLHttpRequest();
       }
       catch(ee) {
               try {
                       xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
               }
               catch(e) {
                       try {
                               xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                       }
                       catch(e) {
                               xmlHttp = false;
                       }
               }
       }
       return xmlHttp;
}

var xmlRequest = GetXMLHttp();

instrucao.js:

function abrirPag(valor){
var url = valor;

xmlRequest.onreadystatechange = mudancaEstado;
xmlRequest.open("GET",url,true);
xmlRequest.send(null);

if (xmlRequest.readyState == 1) {
document.getElementById("conteudo_mostrar").innerHTML = "<img src='loader.gif'>";
}

return url;
}

function mudancaEstado(){
if (xmlRequest.readyState == 4){
document.getElementById("conteudo_mostrar").innerHTML = xmlRequest.responseText;
}
}

o arquivo externo:

<head>       
         <link rel="stylesheet" href="../../css/jqGalScroll.css" type="text/css" media="screen"/>
<script src="../../js/jquery.js"> </script>
       <script src="../../js/jqGalScroll.css"> </script>
       <script src="../../js/jqGalScroll.js"> </script>
      <script src="../../js/galeria.js">	</script>

         <script src="../../js/noticias.js"> </script>
         <script>
	  $(document).ready(function(){
			$('#conceitocorel').jqGalScroll();
		});
		</script>
            </head>   




<ul id="conceitocorel">
   <?php


     	$pasta = "../../images/galerias/conceitocorel/";

  		$imagens = glob("$pasta/{*jpg,*png,*gif}", GLOB_BRACE);

       	foreach($imagens as $img){


         	echo "<li><img src='$img' border='0'/></li>";

 			}

?>

  	</ul>

o link que chama a função:

<a href='#dialog2' name='modal' onclick="abrirPag('include/galerias/conceitocorel.php');" ><img class='gal' src='images/galerias/consultorios/1.jpg' /></a>

Alguém ajuda?

Matheus Weber · Maio 29, 2011

Acho que tem algo a ver com o script, pq funciona quando não está na div do ajax...

Até pq ela funciona normal na página, só não funciona quando eu carrego a div com a página...

0cool · Maio 29, 2011

Faça um teste...

Deixe o arquivo que contém o GetXMLHttp no topo dos scripts... e pegue todos os blocos de scripts e jogue no final dá pagina... deixe-os só acima do </html> e faça um teste.

Matheus Weber · Maio 29, 2011

Não é isso também, vou postar o código inteiro do teste pra ficar mais fácil:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
<link rel="stylesheet" href="../css/jqGalScroll.css" type="text/css" media="screen"/>
<script type="text/javascript" src="../js/jquery.js"></script>
<script src="../js/jqgalscroll.js"> </script>    
<script src="../js/galeria.js">	</script>
<script src="../js/noticias.js"> </script>
</head>
<body>
<ul id="corporativo">


         	<li><img src="../images/galerias/ConceitoCorel/1.jpg" border='0'/></li>
  <li><img src="../images/galerias/ConceitoCorel/Corel Photo Album 6.jpg" border='0'/></li>


  	</ul>
       <div id="menu"><a href="#" onClick="abrirPag('Conteudo.php');">Clientes</a></div>

               <br><br>
       <div id="conteudo_mostrar"></div>
</body>
</html>

Conteúdo.php:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jqgalscroll.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
       $("#demoOne").jqGalScroll();
   });
</script>
<style>
   @import url("../css/jqGalScroll.css");
</style>

<title>Clientes</title>
</head>
<body>
<ul id="demoOne">


         	<li><img src="../images/galerias/ConceitoCorel/1.jpg" border='0'/></li>
  <li><img src="../images/galerias/ConceitoCorel/Corel Photo Album 6.jpg" border='0'/></li>


  	</ul>
</body>
</html>

Eu fiz a galeria no index.php e funciona perfeitamente, e se eu abrir separado o conteudo.php também funciona perfeitamente, mas quando eu chamo o conteudo.php na div não funciona a galeria.

0cool · Maio 29, 2011

Pegue todos os blocos de scripts... todos... e coloque no Conteudo.php e faça um teste.

Matheus Weber · Maio 30, 2011

É... também não foi, que m***** \o

0cool · Maio 30, 2011

kkk vamos fazer o seguinte....

crie um arquivo e nese arquivo coloque apenas

<script>
alert('foi!');
</script>

Depois jogue este arquivo para ser executado em abrirPag("arquivo.teste.php") e o execute, poste aqui o resultado.

Matheus Weber · Maio 30, 2011

Pelo menos mostrou o problema, ele não tá abrindo os scripts.

Fiz o que tu disse, e não funciona o alert...

Tentei também fazer em .html ao invés de php, mas não foi também.

Esse script já tá me tirando do sério kpsoakopsapo, pior que tenho que entregar essa semana ainda, e a mulher quer umas 300 galerias com 300 fotos kopsaosap

William Bruno · Maio 30, 2011

sim, exatamente.

javascript carregado com ajax não funciona:

http://forum.imasters.com.br/topic/264642-executar-funcoes-js-em-paginas-carregadas-com-ajax/

e os teus elementos trazidos com ajax, não existiam no instante do window.onload, portanto, ainda não tem as funções atreladas a eles.

Matheus Weber · Maio 30, 2011

Sim, mas descobrindo esse problema do Ajax conseguir ir atrás e resolver :D

Usei essa função:

<script type="text/javascript">

	$(document).ready(function() {

	<?php 
	$sql = "select * from subsecao where secao_idsecao = 1";
	$res = mysql_query($sql) or die(mysql_error());
	$num = mysql_num_rows($res);
	for($i=0;$i<$num;$i++){
		$nome = mysql_result($res, $i, 'sub_nome');
		echo "		
		$('a#$nome').click(function(event) {
		$('#$nome').load('include/galeria/sub/$nome.php');
		});
		";
	}
	echo "})";
	?>

	</script>

Desculpem pelo php todo no meio, porque eu já a adaptei pro meu site, eu ia postar aqui antes era "virgem" mas como eu não consegui entrar hehe.

Só mais uma duvida, alguma idéia de como eu posso fazer todas as div's com o nome "sumir" da página, sumirem quando eu ativar esse código?

Eu tentei colocar usar:

div = document.getElementById("sumir");
div.style.display = "none";

Mas não funcionou direito, ele some com a div mas não antes do ajax carregar... o que tem que acontecer é o seguinte, ele carrega uma lista de galerias utilizando o php, ele carrega esse código jquery com o nome das galerias para chamar as páginas por ajax, até ae tudo bem, o problema é que não consigo fazer sumir a lista de galerias quando eu clico numa delas... também vou tentar fazer com que suma a página carregada e abra outra página quando clicar em outra div.

Já aproveitando o tópico hehe.

William Bruno · Maio 30, 2011

você não pode duplicar IDs.

ID deve ser um identificador unico em um documento.

estude sobre class css, e pesquise sobre como percorrer o DOM.

não vi como esse codigo macarrão resolve o problema do ajax.

Matheus Weber · Maio 30, 2011

Utilizando a função load().

Vou dar uma olhada sobre o DOM.

Pensei noutra maneira, coloquei todos os links dentro da div sumir, ae quando eu conseguir sumir, somo com todos de uma só vez hehe.

O problema é que continua não funcionando, se eu coloco em onClick não funciona o código jquery pra fazer aparecer a galeria, se eu coloco no jquery as div's somem mas não carrega a galeria também, que confusão askopkop

No jquery eu tentei assim:

 <script type="text/javascript">

	$(document).ready(function() {

	<?php 
	$sql = "select * from subsecao where secao_idsecao = 1";
	$res = mysql_query($sql) or die(mysql_error());
	$num = mysql_num_rows($res);
	for($i=0;$i<$num;$i++){
		$nome = mysql_result($res, $i, 'sub_nome');
		echo "		
		$('a#$nome').click(function(event) {
		$('#$nome').load('include/galeria/sub/$nome.php');
		[b]div = document.getElementById('sumir');
		div.style.display = 'none';[/b]
		});

		";
	}
	echo "})";
	?>

</script>

O que é código macarrão? askopaskop, medo da resposta hehe

Matheus Weber · Maio 30, 2011

Eis como fica no navegador depois de passar pelo php:

<div id='sumir'>

<a id='Teste1' href='index.php#/page/7'>Teste1</a><a id='teste2' href='index.php#/page/7'>teste2</a>    

</div>

<div id='Teste1'></div><div id='teste2'></div>

Dentro das div's teste1 e teste2 será chamada a página pelo ajax, utilizando aquele código com o load().

Eu tento fazer sumir a div='sumir', mas quando ela some, some tudo e não só ela...

Eu tento usar assim: $('div#sumir').fadeOut('fast');

Só que some tudo(a sumir e as div's teste1 e teste2, é isso que estou tentando explicar hehe

William Bruno · Maio 30, 2011

pare de repetir o ID.

você não pode fazer isso.

veja sobre os seletores .next(), .find() e .parent()

o teu php englobando o jQuery é completamente desnecessário.

Matheus Weber · Maio 30, 2011

Ahhh, finalmente entendi o problema.

Eu não sou bom com CSS e Javascript mesmo hehe.

Eu só não entendi pq o php no jquery é desnecessário, até pode ter uma maneira de fazer o que eu fiz com javascript, mas eu não entendo muito, eu entendo bem mais de php hehe.

Arquivado

Carregando galeria com Ajax

Recommended Posts

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

0cool 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

0cool 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

0cool 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Matheus Weber 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Fóruns

Tempo Real

Informação importante