Ir para conteúdo

POWERED BY:

Arquivado

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

Kari

Aonde estou errando

Por , em Javascript

Recommended Posts

Kari    0

Kari
Postado

Bom dia , sou programador a pouco tempo bem iniciante e estou tendo um pouco de dificuldade em uma função com ajax , na hora de carregamento de uma pagina em uma div

Vou colocar o código do index , do ajax e da função pra pedir uma ajuda uma explicação ou até mesmo uma correção xD

Segue o código:

 

index.html

_____________________________________________________________________________________________________________________

<!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" />
<title>Lua Cheia Presentes</title>
<script type="text/javascript" src="scripts/luacheia.js" ></script>
<link rel="stylesheet" type="text/css" href="scripts/default.css" />
</head>

<body style=""><!-- Background -->
<div  id="content" class="css_ap" style="width: 900px; height: 700px; top:0px;margin-left:14%; background-color:#330033;">
</div><!-- Top -->
<div id="top" class="css_ap" style="height: 158px; left: 15%; top: 0px;">
	<img class="css_img" src="img/2.png" alt="" style="; left:3px; top: 5px; width: 886px; height: 158px;"><!-- Fundos TOP-->
 		<img class="css_img" src="img/0.jpg" alt="" style="left:380px; top: 63px; width: 497px; height: 66px;"/><!-- Flores -->
   	<img class="css_img" src="img/14.png" alt="" style="left: 8px; top: 7px; width: 200px; height: 129px;"/><!--Logo Tipo -->
   	<img class="css_img" src="img/3.png" alt="" style="left: 661px; top: 20px; width: 220px; height: 19px;"><!-- Lua Cheia -->
   </img><!--Fim Fundos TOP -->
   </div>
   <!--fim top -->
   <!--Menus Links -->
<div>
	<!--inicio-->
	<a id="linicio" href="" onClick="openLink(linicio)">
	<img class="css_menu" id="inicio" name="menu" src="img/4.png" alt="" style="left: 195px; top: 139px; width: 112px;"
	onmousemove="menuInicio()" onmouseout="bInicio()" />
	</a>
	<!--Produtos-->
	<a id="lproduto" href="produto.html" onclick="openLink(lproduto)">
	<img class="css_menu" id="produto" name="menu" src="img/5.png" alt="" style="left: 304px; top: 139px; width: 112px;" 
	onmousemove="menuProduto()" onmouseout="bProduto()"/>
	</a>
	<!--Promoções-->
	<a id="lpromo" href="cadpromo.htm" onclick="openLink(lpromo)">
	<img class="css_menu" id="promo" src="img/8.png" alt="" style="left:415px;top:140px;width:111px;height:22px;" 
	onmousemove="menuPromo()" onmouseout="bPromo()"/>
	</a>
	<!--Localização-->
	<a id="llocal" href="localiza.htm" onclick="openLink(llocal)">
	<img class="css_menu" id="local" name="menu" src="img/6.png" alt="" style="left: 526px; top: 139px; width: 112px;" 
	onmousemove="menuLocal()" onmouseout="bLocal()"/>
	</a>
	<!--Contato-->
	<a id="lcontato" href="contato.htm" onclick="openLink(lcontato)">
	<img class="css_menu" id="contato" name="menu" src="img/7.png" alt="" style="left: 638px; top: 139px; width: 112px;" 
	onmousemove="menuContato()"onmouseout="bContato()"/>
	</a>

   </div>
   <!-- Fim Menu -->
<!-- Conteudo -->
   <div id="middle" class="css_ap" style="height: 483px; left:155px; top: 165px;">
    <!-- Assinatura -->
    <div id="asg" style="position:absolute; left: 740px; width: 200px; height: 15px; bottom:-5px;font-size: 12px; font-family: Arial; text-align: left; color: #1FDBC9;">
    <a href="">Designed by JCV Sistemas</a>
    </div>
    <!-- Fim assinatura -->
   </div>
   <!-- Fim Conteudo -->
   <!-- Inicio Bottom -->
<div id="bot" class="css_ap" style="height: 33px; left: 15%; top: 654px;">
<img class="css_basic" src="img/1.png" alt="" style="left: 9px; top: 1px; width: 872px; height: 32px;"/>
   </div>
   <!-- Fim Bottom-->
</body>
</html>

 

_______________________________________________________________________________________________________________________________________________

 

luacheia.js

//Função AJAX para Abrir os links do menu  


function openLink(){

document.getElementById() = function() {
//status=200, statusText=OK
requisita(this.href);
return false;
}


function requisita(url) {

var ajax = iniciaAjax();
carregando(document.getElementById("middle"));
ajax.onReadyStateChange = function() {
	if(ajax.readyState == 4) {
		mostrar(ajax);			
		}
	}
	ajax.open("GET", url);
	ajax.send(null);
}


function carrega(c){
while(c.hasChildNodes()) {
	c.removeChild(c.lastChild);
}
var img = document.createElement("img");
img.setAttribute("src", "img/loadb.gif");
c.appendChild(img);
}


function mostrar(ajax) {
var resposta = document.getElementById("middle");
while(resposta.hasChildNodes()) { resposta.removeChild(resposta.lastChild); }

var xml = new XML(ajax.responseText);
resposta.appendChild(document.createTextNode(xml.url));
} 


}




function iniciaAjax(){
var ajax = null;
if(window.XMLHttpRequest) {
	ajax = new XMLHttpRequest();
		}else if(window.ActiveXObject){
			try {
			ajax = new ActiveXObject("Msxml2.XMLHTTP");
			}	catch(e) {
				ajax = ActiveXObject("Microsoft.XMLHTTP")
		}
		return ajax;
	}
}

 

 

 

Desde já agradeço a ajuda

e também pretendo me tornar um membro ativo do forum.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
estou tendo um pouco de dificuldade em uma função com ajax , na hora de carregamento de uma pagina em uma div

e qual o problema ? aparece algum erro? qual ?

 

leia esses 2 links:

http://wbruno.com.br/blog/2011/04/14/como-debugar-ajax-firebug/

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

 

vai te ajudar a resolver. Se tiver duvidas, poste.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kari    0

Kari
Postado

Bem , eu não estou conseguindo fazer o código ajax funcionar

não aparece nenhum errro pois eu não coloquei para mostrar

 

a função não esta carregando a pagina na div (middle) quando o link do menu é clicado e não aparece o load

eu gostária de saber se meu erro está no código ou de como eu estou chamando a função.

 

eu vou dar uma lida nesses links agora obrigado william.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

esse escopo aqui:

function openLink(){

       document.getElementById() = function() {
       //status=200, statusText=OK
       requisita(this.href);

está errado.

faça assim:

function openLink( el ){
     requisita( el.href );
     return false;
}

e no link:

<a id="lcontato" href="contato.htm" onclick="openLink( this )">

além disso, tem vários outros erros de sintaxe no código.

confira o console, como diz o segundo artigo, e vá corrigindo.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kari    0

Kari
Postado

Obrigado Bruno ;)

vou refaze-lo e verificar os erros

 

function openLink( el ){
     requisita( el.href );
     return false;
}

 

uma pergunta , quando eu chamo a função da assim como você passou

o que exatamente significa esse "el" ?

minha falta de experiência é enorme principalmente em ajax e js acho que é facil reparar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

Ele está pegando a referência de onde foi clicado!

 

Veja o "this" na função no click!

 

E fica tranquilo cara, pode perguntar sempre!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kari    0

Kari
Postado

então caros amigos

eu consegui acerta o codigo e os links

so estou com um pequeno problema

quando eu clico no link Inicio ele rebre a pagina toda do idex dentro da div

e queria saber se tem alguma maneira para quando eu clicar no link inicio

ele voltar para pagina sem abrir no div

se seria mais facil eu criar uma pagina "home.html" com o conteudo

interno do "index.html" ou eu simplesmente coloco um link para a pagina inicial sem chamar a função "openLink".

 

essa duvida para saber a solução mais elegante e com menos envio de dados

 

e segue o código que eu fiz para arrumar a função "openLink"

 

function openLink( el ){

   	var objAjax = iniciaAjax();

//	carrega(document.getElementById("middle").innerHTML);



objAjax.onreadystatechange = function() {
	if(objAjax.readyState == 4) {
		var response = objAjax.responseText;
		document.getElementById("middle").innerHTML = response ;
	}
};

	objAjax.open("post", el, true);
	objAjax.send(null);

return false;
}


function iniciaAjax(){
var ajax = null;
if(window.XMLHttpRequest) {
	ajax = new XMLHttpRequest();
} 
else if(window.ActiveXObject){
	try {
		ajax = new ActiveXObject("Msxml2.XMLHTTP");
	}	
	catch(e) {
		ajax = ActiveXObject("Microsoft.XMLHTTP");
	}

}
return ajax;

}

 

aé , a função não está funcionando no IE 8 , no Chrome , FF 5 e Opera

está funcionando corretamente.

será que está algo errado na function "iniciaAjax"?

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