Como atualizar somente minha div no ajax?

ASVSWEB · Fevereiro 3, 2010

Tenho essa página que através de uma requisição ajax ele abre em minha div conteudoesquerdo quando clicado no menu,só que quando atualizo a pagina vai para a index,sendo assim não atualiza somente a minha div o que devo fazer?

<!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=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Centro de Beleza e Estética Perfil</title>
<link href="estilos.css"  rel="stylesheet"  type="text/css" />

    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript" src="ajax.js"></script>
    <script type="text/javascript" language="javascript" src="instrucao.js"></script>
	<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
	
	<script src="js/prototype.js" type="text/javascript"></script>
	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="js/lightbox.js" type="text/javascript"></script>
	
	<script src="validar.js" type="text/javascript"></script>

</head>

<body><!--Inicio do site-->
<div id="geral">
<div id="topo"><img src="imagens/banner.jpg" width="780" height="159" alt="banner" /></div>

<!--menu-->
<div id="menu"><a href="index.php"><img src="imagens/menu/Home.jpg" width="95" height="40" border="0" alt="home" /></a><a href="#" onclick="abrirPag('historia.php');"><img src="imagens/menu/historia.jpg" width="81" height="40" border="0" alt="historia"/></a><a href="#" onclick="abrirPag('galeria.php');"><img src="imagens/menu/Fotos.jpg" width="67" height="40" border="0" alt="fotos" /></a><a href="#" onclick="abrirPag('servicos.php');"><img src="imagens/menu/servicos.jpg" width="99" height="40" border="0" alt="servicos"/></a><a href="#" onclick="abrirPag('dia_da_noiva.php');"><img src="imagens/menu/dianoiva.jpg" width="124" height="40" border="0" alt="dia da noiva" /></a><a href="#" onclick="abrirPag('contato.php');"><img src="imagens/menu/contato.jpg" width="78" height="40" border="0" alt="contato"/></a><a href="#" onclick="abrirPag('agendamento.php');"><img src="imagens/menu/agendamento.jpg" width="132" height="40" border="0" alt="agendamento" /></a><a href="#" onclick="abrirPag('equipe.php');"><img src="imagens/menu/equipe.jpg" width="102" height="40" border="0" alt="equipe"/></a></div>
 
<div id="conteudo_background">
 
 
   <!--conteudo central--><div id="conteudoesquerdo">
    <div id="nov"></div>

Esse é o codigo ajax.js


function GetXMLHttp() {
    if(navigator.appName == "Microsoft Internet Explorer") {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else {
        xmlHttp = new XMLHttpRequest();
    }
    return xmlHttp;
}

var xmlRequest = GetXMLHttp();

Esse e o codigo que tambem faz parte do ajax.

instrucao.js

function abrirPag(valor){
var url = valor;

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

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

return url;
}

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

Henrique Barcelos · Fevereiro 3, 2010

Adicione um

return false;

na última linha da função abrirPag();

ASVSWEB · Fevereiro 5, 2010

Adicione um
return false;
na última linha da função abrirPag();

Obrigado mas não funcionou.valeu!

William Bruno · Fevereiro 6, 2010

Acho que o teu instanciamento do objeto, é que está insuficiente..

Troca o teu GetXMLHttp(), por este abaixo:

function GetXMLHttp()
{
        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) {}
                }
        }
}

ASVSWEB · Fevereiro 9, 2010

Obrigado,mas não deu certo!.

William Bruno · Fevereiro 9, 2010

Melhorando um pouco o teu código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br"> 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	
	<title>Centro de Beleza e Estética Perfil</title>
	<link href="estilos.css"  rel="stylesheet"  type="text/css" />

	<script type="text/javascript">
	function GetXMLHttp()
	{
		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 id( el ){
		return document.getElementById( el );
	}
	function abrirPag( event, el )
	{
		event.preventDefault();	
		var xmlRequest = GetXMLHttp();
		var url = el.href;
	
		xmlRequest.open( "GET", url, true );    
		xmlRequest.onreadystatechange = function()
		{
			if (xmlRequest.readyState == 4)
			id("conteudoesquerdo").innerHTML = xmlRequest.responseText;
		};
		xmlRequest.send(null);


		if (xmlRequest.readyState == 1) {
			id("conteudoesquerdo").innerHTML = "<img src='loader.gif'>";
		}
		return url;
	}
	</script>
	<style type="text/css">
	img {
		border: none;
	}
	</style>
</head>

<body>
<div id="geral">
	<div id="topo">
		<img src="imagens/banner.jpg" width="780" height="159" alt="banner" />
	</div><!-- /topo -->

	<div id="menu">
		<a href="home.php" onclick="abrirPag( event, this );"><img src="imagens/menu/Home.jpg" width="95" height="40" alt="home" /></a>
		<a href="historia.php" onclick="abrirPag( event, this );"><img src="imagens/menu/historia.jpg" width="81" height="40" alt="historia" /></a>
		<a href="galeria.php" onclick="abrirPag( event, this );"><img src="imagens/menu/Fotos.jpg" width="67" height="40" alt="fotos" /></a>
		<a href="servicos.php" onclick="abrirPag( event, this );"><img src="imagens/menu/servicos.jpg" width="99" height="40" alt="servicos" /></a>
		<a href="dia_da_noiva.php" onclick="abrirPag( event, this );"><img src="imagens/menu/dianoiva.jpg" width="124" height="40" alt="dia da noiva" /></a>
		<a href="contato.php" onclick="abrirPag( event, this );"><img src="imagens/menu/contato.jpg" width="78" height="40" alt="contato" /></a>
		<a href="agendamento.php" onclick="abrirPag( event, this );"><img src="imagens/menu/agendamento.jpg" width="132" height="40" alt="agendamento" /></a>
		<a href="equipe.php" onclick="abrirPag( event, this );"><img src="imagens/menu/equipe.jpg" width="102" height="40" alt="equipe"/></a>
	</div><!-- /menu -->
	 
	<div id="conteudo_background">
		<div id="conteudoesquerdo">
			<div id="nov">
			
			
			</div><!-- /nov -->
		</div><!-- /conteudoesquerdo -->
	</div><!-- /conteudo_background -->
</div><!-- /geral -->
</body>
</html>

funcionou perfeitamente aqui..

esses IDs das tuas DIVs não estão bons.. 'semânticamente' errados.. o menu, você poderia ter feito com tags <ul>, <li>

o teu menu não funciona legal para navegar, pois é apenas imagens.. sem nenhum texto.. o Chrome por exemplo, não renderiza o 'alt'.. ficando assim, um monte de imagens quebradas.. dê uma atenção à esse HTML depois.

ASVSWEB · Fevereiro 14, 2010

Valeu William pelo conselho,vo testar aqui

Testei aqui do jeito que você fez ai,mas novamente não funcionou.vlw

William Bruno · Fevereiro 15, 2010

Então não entendi 'o problema'. Reexplique, por favor.

Arquivado

Como atualizar somente minha div no ajax?

Recommended Posts

ASVSWEB 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Henrique Barcelos 290

Compartilhar este post

Link para o post

Compartilhar em outros sites

ASVSWEB 0

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

ASVSWEB 0

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

ASVSWEB 0

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

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