Ir para conteúdo

Arquivado

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

Diego Macêdo

Carregando página de um menu dentro da DIV

Por , em Javascript

Recommended Posts

Diego Macêdo    6

Diego Macêdo
Postado

Gostaria da ajuda de vocês pra me dizer o que está errado neste código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="ajax.js" type="text/javascript" />
<script language="javascript" type="text/javascript">
function caller(n){
		switch(n){
			case 0: t="pagina1.html"; break;
			case 1: t="pagina2.html"; break;
			case 2: t="pagina3.html"; break;
			case 3: t="pagina4.html"; break;
		}
		
    if(navigator.appName == "Microsoft Internet Explorer"){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp = new XMLHttpRequest();
    }

	if(xmlHttp.readyState == 4){
		document.getElementById('centro').innerHTML = xmlHttp.responseText;
	}
	
	xmlHttp.open("GET", t, true);
	xmlHttp.send(null);
}
</script>
</head>

<body>
<ul>
	<li><a href="javascript:caller(0)">Página 1</a></li>
    <li><a href="javascript:caller(1)">Página 2</a></li>
    <li><a href="javascript:caller(2)">Página 3</a></li>
    <li><a href="javascript:caller(3)">Página 4</a></li>
</ul>
<br />
<br />
<div id="centro" style="float:left; width:500px; min-height:400px;"></div>
</body>
</html>

A idéia é que ao clicar no link, ele carregue a página que foi selecionada, mas ele não faz nada.

 

Desde já agradeço a atenção!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O instanciamento do objeto AJAX está horrivel.. veja:

if(xmlHttp.readyState == 4){
                alert( 'chegou a 4 o readyState' );//não tá nem entrando nesse if
                document.getElementById('centro').innerHTML = xmlHttp.responseText;
        }

vou postar um codigo melhor para isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Talvez um refactory seja necessário... fiz e testei no IE6, Chrome e Firefox

<html>
<head>
<script type="text/javascript">
/* William Bruno - fórum iMasters */
function getHTTPObject(){
	if(window.XMLHttpRequest){
		return new XMLHttpRequest();
	}else if(window.ActiveXObject) {
		var prefixes = ["MSXML2", "Microsoft", "MSXML", "MSXML3"]
		for(var i = 0; i < prefixes.length; i++){
			try	{
				return new ActiveXObject(prefixes[i] + ".XMLHTTP");
			} catch (e) {}
		}
	}
}
function abre( link, event )
{
	if( event ) event.preventDefault();
	if( link.rel=='externo' )
		return window.open( link.href );
	
	return carrega( link );
}
function carrega( link )
{
	if( typeof( link )=='string' )
	{
		var url = link;
		var lugar = 'conteudo';
	}
	else if( typeof( link )=='object' )
	{
		var url = link.href;
		var lugar = ( link.rel!='' ) ? link.rel: 'conteudo';
	}
	else
		return alert( 'Não suportado' )
	
	var xmlHttp = getHTTPObject();
	xmlHttp.onreadystatechange = function()
	{
		if (xmlHttp.readyState == 4) 
		{
			var retorno = xmlHttp.responseText;
			document.getElementById( lugar ).innerHTML = retorno;
		}
	}
	xmlHttp.open( 'GET', url, true );
	xmlHttp.send( null );
}
function id( el ){
	document.getElementById( el );
}
window.onload = function()
{
	var links = document.getElementsByTagName('a');

	for( var i=0; i<links.length; i++ )
	{
		links[i].onclick = function( event )
		{
			abre( this, event );
			return false;
		}
	}
	carrega( 'pagina1.html' );
}
</script>
<style type="text/css">
#conteudo {
	width: 400px;
	border: 1px solid #ccc;
	margin-right: 20px;
	min-height: 400px;
	float: left;
}
#outro_lugar {
	width: 200px;
	border: 1px solid #ccc;
	min-height: 400px;
	float: left;
}
* html #conteudo,
* html #outro_lugar {
	height: 400px;
}
</style>
</head>
<body>
	<ul id="menu">
		<li><a href="pagina1.html">Página Um</a></li>
		<li><a href="pagina2.html" rel="outro_lugar">Página Dois</a></li>
		<li><a href="pagina3.html">Página Três</a></li>
		<li><a href="pagina4.html">Página Quatro</a></li>
	</ul><!-- /menu -->
	<div id="conteudo">
	
	
	</div><!-- /conteudo -->
	<div id="outro_lugar">
	
	</div><!-- /outro_lugar -->
	<br style="clear: both" />
	<a href="http://www.google.com.br" rel="externo">Google</a>
</body>
</html>
:lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diego Macêdo    6

Diego Macêdo
Postado

Realmente funciona no FF, testei no IE8 e não funcionou.

 

Vou dar uma analisada no seu código pra ver se consigo modificar algo pra funcionar em todos.

 

Eu tentei o seguinte aqui:

INDEX.HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Carregando Página em DIV / AJAX</title>
<script language="javascript" src="ajax.js"></script>
<script language="javascript" src="instrucao.js"></script>
</head>

<body>
<div id="menu">
<a href="#" onClick="abrirPag('pagina1.html');">Página 1</a><br/>
<a href="#" onClick="abrirPag('pagina2.html');">Página 2</a><br/>
<a href="#" onClick="abrirPag('pagina3.html');">Página 3</a><br/>
<a href="#" onClick="abrirPag('pagina4.html');">Página 4</a><br/>
</div>
<br><br>
<div id="conteudo_mostrar"></div>
</body>
</html>

AJAX.JS

function GetXMLHttp() {
    if(navigator.appName == "Microsoft Internet Explorer"){
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xmlHttp = new XMLHttpRequest();
    }
    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;
	}
}

Com esse meu código, o FF ele substitui normalmente dentro da DIV as paginas quando eu clico nos links da INDEX, mas no IE8 ele só carrega a primeira página que eu clicar e se eu clicar em outro link pra carregar ele não substitui. :S

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

IE8 é bem ruinzinho ne?! ^_^

 

se você jogar a metatag, que faz ele emular o IE7, dá certo ?

qnto ao teu código atual, ainda acho que o instanciamento do AJAX está insuficiente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diego Macêdo    6

Diego Macêdo
Postado

Adicionei a metatag abaixo pra fazer o teste e continuou sem funcionar:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Testei no IE6 e FF funciona! :)

Mas no IE7 e 8 não! :(

 

Isso é uma vergonha funcionar no IE6 mas não nos posteriores! :angry:

 

O meu instanciamento está funcionando perfeitamente do IE6 ao 8 e FF. Agora somente no FF ele consegue substituir a pagina carregada no lugar de outra que ja esteja carregada. Mas nos IE não funciona desta forma, o que seria o meu objetivo!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito