[Resolvido] Atualizar duas div`s sem refresh na página

[felipeoliveira 0]

Caros amigos,

 

estou com um problema cruel.

 

Tenho uma página em php que possui 3 div`s a serem atualizadas. essa atualizaçao deve ocorrer no ato em que se clica em um link (href). para contextualizar, tenho uma lista de clientes alimentada por um banco de dados mysql e ao clicar no cliente deveria atualizar as tres div's sem atualizar a página por se tratar de uma consulta pelos clientes muita extensa e demorada. o problema é que só estou conseguindo atualizar uma das div's.

 

o código js para atualizar a div é

function abrirBarraClienteAtivo(valor){
   var url = valor;

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

       if (xmlRequest.readyState == 1) {
           document.getElementById("barra_cliente_ativo").innerHTML = "<img src='../imgeges/carregando.gif'>";

    }

   return url;
}

function atualizarBarraClienteAtivo(){
   if (xmlRequest.readyState == 4){
       document.getElementById("barra_cliente_ativo").innerHTML = xmlRequest.responseText;

   }

}

function abrirBarraContrato () {

	    var url2 = '../includes/barra_contrato.php';

   xmlRequest.open("GET",url2,true);    
   xmlRequest.onreadystatechange = atualizarBarraContrato;
   xmlRequest.send(null);

       if (xmlRequest.readyState == 1) {
           document.getElementById("barra_contrato").innerHTML = "<img src='../imgeges/carregando.gif'>";

    }

   return url;
}

function atualizarBarraContrato(){
   if (xmlRequest.readyState == 4){
       document.getElementById("barra_contrato").innerHTML = xmlRequest.responseText;

   }
}

 

o href é

<a href="#" onClick="abrirBarraClienteAtivo('../includes/barra_cliente_ativo.php?id=<?php echo $forCLIENTE; ?>');"><?php echo $forCLIENTE; ?></a>

 

não estou sabendo colocar para funcionar a funçao abrirBarraContrato.

 

eis alguma alma viva para ajudar?

[William Bruno 1501]

não estou sabendo colocar para funcionar a funçao abrirBarraContrato.

tecnicamente é a mesma coisa.

 

aperte Ctrl+Shif+J no Firefox, veja se aparece algum erro.

Um guia para auxiliar:

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

[felipeoliveira 0]

o problema está que não estou conseguindo ativar as duas diferentes funçoes com um mesmo href. erros não tem

[William Bruno 1501]

para um mesmo elemento, disparar 2 ou mais funções num mesmo evento, basta separar com ponto e virgula:

 

<a href="#" onClick="abrirBarraClienteAtivo('../includes/barra_cliente_ativo.php?id=<?php echo $forCLIENTE; ?>'); abrirBarraContrato();"><?php echo $forCLIENTE; ?></a>

era essa a dúvida ?

[felipeoliveira 0]

ao fazer isso, só está atualizando uma div que é executada pela segunda funçao, mas é exatamente isso q desejo fazer, um mesmo elemento, disparar 2 ou mais funções num mesmo evento

[William Bruno 1501]

use o Responder Azul

ou a 'Resposta Rápida'.

 

 

Okay.

 

Então agora, você precisa criar objetos xmlHttpRequest diferentes.

Crie um para cada função tua, assim você vai conseguir fazer as 2 requisições em paralelo.

[felipeoliveira 0]

ou estou fazendo algo errado, ou não está funcionando. poderia me dar um exemplo utilizando o meu código?

[William Bruno 1501]

oque eu disse é isso:

function abrirBarraContrato () {

   var url2 = '../includes/barra_contrato.php';
   var xmlRequest = getXHML...();//criando outro objeto aqui dentro

   xmlRequest.open("GET",url2,true);    

 

atente para o escopo. Agora você não vai ter mais um objeto global, mas sim, um para cada requisição. Dai funciona oque você quer.

function abrirBarraClienteAtivo(valor){
   var url = valor;

   var xmlRequest = getXHML...();//criando o objeto aqui dentro
   xmlRequest.open("GET",url,true);   

 

=)

[felipeoliveira 0]

esse negocio de java script só complica minha cabeça. seria isso?

 

function abrirBarraClienteAtivo(valor){
   var url = valor;
var xmlRequest = GetXMLHttp();

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

       if (xmlRequest.readyState == 1) {
           document.getElementById("barra_cliente_ativo").innerHTML = "<img src='../imgeges/carregando.gif'>";

    }

   return url;
}

function atualizarBarraClienteAtivo(){
   if (xmlRequest.readyState == 4){
       document.getElementById("barra_cliente_ativo").innerHTML = xmlRequest.responseText;

   }

}

function abrirBarraContrato () {
var url2 = '../includes/barra_contrato.php';
var xmlRequest2 = GetXMLHttp();

   xmlRequest2.open("GET",url2,true);    
   xmlRequest2.onreadystatechange = atualizarBarraContrato;
   xmlRequest2.send(null);

       if (xmlRequest2.readyState == 1) {
           document.getElementById("barra_contrato").innerHTML = "<img src='../imgeges/carregando.gif'>";

    }

   return url;
}

function atualizarBarraContrato(){
   if (xmlRequest2.readyState == 4){
       document.getElementById("barra_contrato").innerHTML = xmlRequest2.responseText;

   }
}

 

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;
}

[William Bruno 1501]

sim, e agora você informa esse objeto (agora de escopo local), para a função de callback do readyState.

 

cara.. não falei nada de javascript especifico.. apenas programação mesmo..

 

 

você ta indo bem, só não vai dar certo, por causa do escopo das variaveis. Corrija isso.

[felipeoliveira 0]

agora sim você me complicou, não sei onde informar esse objeto e qual objeto informar

[William Bruno 1501]

function abrirBarraContrato () {
       var url2 = '../includes/barra_contrato.php';
       var xmlRequest2 = GetXMLHttp();

   xmlRequest2.open("GET",url2,true);    
   xmlRequest2.onreadystatechange = function(){
      if (xmlRequest2.readyState == 4){
        document.getElementById("barra_contrato").innerHTML = xmlRequest2.responseText;
     }
}
   xmlRequest2.send(null);

       if (xmlRequest2.readyState == 1) {
           document.getElementById("barra_contrato").innerHTML = "<img src='../imgeges/carregando.gif'>";

           }

   return url;
}

Entendeu ?

[felipeoliveira 0]

entendi!! funcionou 100%

[Marcos Paulo Gattermeyer 0]

Bem galera, eu estou com problema igual ao do felipeoliveira, porém um pouco mais complicado.

 

No meu caso o número de divs a serem carregadas é dinâmico, tentei usar um for chamando minha função ajax, mas acontece o que aconteceu com o felipe, somente a última é carregada, mas como o número de divs é dinâmico não tem como eu criar uma função pra cada div.

 

Não senti necessidade de criar outro tópico para o mesmo tipo de problema, espero que não tenha problema, se for o caso crio um tópico novo.

[William Bruno 1501]

@Marcos, não entendi bem o teu problema, mas no caso, então..

 

envie por parâmetro a div a ser carregada:

 

function abrir( id_div_destino ) {
//..

      if (xmlRequest2.readyState == 4){
        document.getElementById( id_div_destino ).innerHTML = xmlRequest2.responseText;

se não for isso, crie um tópico, e explique melhor do que se trata.

[Marcos Paulo Gattermeyer 0]

Eu tenho uma página php com um número n de divs, é dinâmico esse número, e no final da página eu tenho um script javascript que carrega o conteúdo destas divs via ajax

 

o script é esse

var str = '2;4;7'; //esta string é variável também, contem o id das divs
var array = str.split(';');

for(c = 0; c < var_num_divs; c++) //var_num_divs é que contém o número de divs na página
{
clique('itens.php?grp='+array[c]+'','div_'+array[c]+'','GET'); //função ajax
}

 

 

e aqui a função ajax que utilizo

 

function clique(pagina,elemento,action,vals,tp_elemento){ 
xmlHttp=GetXmlHttpObject();
if (xmlHttp==null){
	alert ("Seu browser não suporta AJAX!");
	return;
 	} 
local = elemento;
tp = tp_elemento;
xmlHttp.onreadystatechange=stateChanged_clique;
if(pagina.lastIndexOf("?") < "0"){ 
	pagina=pagina+"?sid="+Math.random();
}else{
	pagina=pagina+"&sid="+Math.random();
}
xmlHttp.open(action,pagina,true);
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if(action == "GET"){
	xmlHttp.send(null);
}
       if(action == "POST"){
	xmlHttp.send(separa(vals));		
}
}

function separa(a){
var total, letra, vr, va, pfinal
letra = "";
pfinal = "";
total = a.length;
for(c = 0; c < total; c++){
	letra = letra+a.charAt(c);
	if(a.charAt(c) == ":"){
		vr = letra.substr( 0, letra.length-1 )+"=";
		pfinal = pfinal+vr;
		letra = "";
	}
	if(a.charAt(c) == "|"){
		va = escape(letra.substr( 0, letra.length-1 ))+"&";
		pfinal = pfinal+va;
		letra = "";
	}
}
return pfinal.substr( 0, pfinal.length-1 );
}

function stateChanged_clique(){
if (xmlHttp.readyState==1){ 
	if(tp == "1"){
		document.getElementById(local).value="carregando...";
	}else{
		document.getElementById(local).innerHTML="<center><img src = '../img/carregando.gif'></center>";
	}
}
if (xmlHttp.readyState==4){ 
	if(tp == "1"){
		document.getElementById(local).value=xmlHttp.responseText;
	}else{					
		var texto=xmlHttp.responseText;
   		var conteudo=document.getElementById(local);
      		conteudo.innerHTML=texto;
      		var scripts = conteudo.getElementsByTagName("script");
      		for(i = 0; i < scripts.length; i++){
          		s = scripts[i].innerHTML;
           	eval(s);
      		}							
	}
}
}

 

 

O que acontece é que somente a última div é preenchida com conteúdo, as outras ficam somente com minha gif de carregando sem parar.

[William Bruno 1501]

leia estes dois posts:

 

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

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