Fiz um programinha para estudar ajax e ele esta 80% funcionando bem, o problema que tenho é o seguintes tenho um combox que ao escolher um opção ele mostra uns dados na tela onde ao clicar em um desses dados ele ativa um <b> que esta com padrão style="display: none;" e exibe os dados que vem do meu banco, a minha idéa e que clicar no link ele oculte novamente o <b> mas simplesmente não esta funcionando, já fiz algo paracido com div e funcionou mas era mais simples esse esta um pouco mais complexo.
Outro problema é que quando eu escolho uma das opções que estão no combobox ele me exibe na <b> todas as opções uma abaixo da outra até então ok. Porém cada opção é um link que vai exibir informação ao ser clicado também esta funcionando o único problema é que ele exibe no fim da página ao invés de exibir abaixo da opção clicada! Ou seja ele deveria empurrar os outros links para baixo e exibir os dados do link que foi clicado e se eu clicar no link novamente ele oculta os dados deixando os demais links onde estavam!
Olha como esta meu código:
index:
<?php
//expirar página
// Data no passado
//header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
// Sempre modificado
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
// HTTP/1.1
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
// HTTP/1.0
header("Pragma: no-cache");
// fim
$usuario = $_COOKIE["usuario"];
$senha = $_COOKIE["senha"];
$nivel = $_COOKIE["nivel"];
$logado = $_COOKIE["logado"];
$codigo_logado = $_COOKIE["codigo_logado"];
if(empty($usuario) || empty($senha))
{
setcookie("usuario");
setcookie("senha");
echo "<center><class='titulo6'>acesso não permitido<BR>o software foi finalizado <BR>por motivos de segurança</a></center>";
}
else
{
include "conectadeals.inc";
include "ie.htm";
$data = date("Y-m-d");
echo "<LINK REL='STYLESHEET' HREF='estilo.css' TYPE='text/css'>";
if($nivel == "Administrativo")
{
include "admtop.inc";
include "colunaesquerda.inc";
include "colunacentral_home.inc";
echo "<center>consulta finança</center>";
?>
<script language="javascript" src="js/VerificaBrownser.js"></script>
<script language="javascript" src="js/ajax_financa.js"></script>
<form method="POST" action="frmAjax">
centralizadora:<select name="centralizadora" id="centralizadora" onChange="Dados(this.value);">
<option id="opcoes" value="0">Escolha a centralizadora</option>
<?
$busca = mysql_query("select * from centralizadora order by nome");
$linha = mysql_num_rows($busca);
for($i=0; $i<$linha; $i++)
{
$reg = mysql_fetch_row($busca);
?>
<option value="<?=$reg[4]?>"><?echo $reg[0]; ?></option>
<?
}
?>
</select>
<br>
<b id="CentroCusto" style="display: none;"> </b>
<b id="Conta" style="display: none;"> </b>
</form>
<?
include "colunadireita.inc";
include "base.inc";
}
}
?>
</td>
</tr>
</table>
</div>
o código em js
function Dados(valor)
{
if(ajax)
{
var selectCentralizadora = document.getElementById('centralizadora');
var CentroCustoHTML = document.getElementById('CentroCusto');
ajax.open("POST", "consulta_financa2.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4 )
{
if(ajax.responseXML)
{
processXML(ajax.responseXML);
}
}
}
var params = "centralizadora="+valor;
ajax.send(params);
}
}
function processXML(obj)
{
var dataArray = obj.getElementsByTagName("CentroCustos");
var CentroCustoHTML = document.getElementById('CentroCusto');
var CentroCustoDescricao = "";
if (document.getElementById('CentroCusto').style.display == "none")
{
document.getElementById('CentroCusto').style.display= "";
}
else
{
document.getElementById('CentroCusto').style.display == "none"
}
if(dataArray.length > 0)
{
for(var i = 0; i < dataArray.length; i++)
{
var item = dataArray[i];
//contéudo dos campos no arquivo XML
var span = document.createElement("span");
CentroCustoDescricao = CentroCustoDescricao + '<b id="' + item.getElementsByTagName("codigoCentro")[0].firstChild.nodeValue +'"><span id="' + item.getElementsByTagName("codigoCentro")[0].firstChild.nodeValue +'">[+]</span><a href="#" onclick="loadContas('+ item.getElementsByTagName("codigoCentro")[0].firstChild.nodeValue + "," + item.getElementsByTagName("codigoCentralizadora")[0].firstChild.nodeValue +')">' + item.getElementsByTagName("centro")[0].firstChild.nodeValue + '</a></b>' +'<br>';
CentroCustoHTML.innerHTML = CentroCustoDescricao;
}
}
else
{
//caso o XML volte vazio, printa a mensagem abaixo
alert("Escolha uma centralizadora");
}
}
function loadContas(codigoCentro,codigoCentralizadora)
{
if(ajax)
{
//captura o local onde serão exibidos os dados na tela
var ContasHTML = document.getElementById('Conta');
ajax.open("POST", "consulta_conta.php", true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function()
{
if(ajax.readyState == 4 )
{
if(ajax.responseXML)
{
ContasXML(ajax.responseXML,codigoCentro,codigoCentralizadora);
}
}
}
var params = "codigoCentro="+codigoCentro+"&codigoCentralizadora="+codigoCentralizadora;
ajax.send(params);
}
}
function ContasXML(obj,codigoCentro,codigoCentralizadora)
{
var dataArray = obj.getElementsByTagName("Contas");
var ContasHTML = document.getElementById('Conta');
var ContaDescricao = "";
var CentroCustoDescricao = "";
if (document.getElementById('Conta').style.display == "none")
{
document.getElementById('Conta').style.display= "";
}
if(dataArray.length > 0)
{
for(var i = 0; i < dataArray.length; i++)
{
var item = dataArray[i];
ContaDescricao = ContaDescricao + item.getElementsByTagName("descricao")[0].firstChild.nodeValue + "<br>"
ContasHTML.innerHTML = ContaDescricao;
}
}
else
{
//caso o XML volte vazio, printa a mensagem abaixo
alert("Escolha uma centro de custos");
}
}
Pergunta
alexandremanowar
E ae pessoal beleza!
Fiz um programinha para estudar ajax e ele esta 80% funcionando bem, o problema que tenho é o seguintes tenho um combox que ao escolher um opção ele mostra uns dados na tela onde ao clicar em um desses dados ele ativa um <b> que esta com padrão style="display: none;" e exibe os dados que vem do meu banco, a minha idéa e que clicar no link ele oculte novamente o <b> mas simplesmente não esta funcionando, já fiz algo paracido com div e funcionou mas era mais simples esse esta um pouco mais complexo.
Outro problema é que quando eu escolho uma das opções que estão no combobox ele me exibe na <b> todas as opções uma abaixo da outra até então ok. Porém cada opção é um link que vai exibir informação ao ser clicado também esta funcionando o único problema é que ele exibe no fim da página ao invés de exibir abaixo da opção clicada! Ou seja ele deveria empurrar os outros links para baixo e exibir os dados do link que foi clicado e se eu clicar no link novamente ele oculta os dados deixando os demais links onde estavam!
Olha como esta meu código:
index:
o código em js os códigos em phpOnde estou errando? E se alguém tiver uma dica de como melhorar esse código eu agradeço.
Valeu
Editado por alexandremanowarLink para o comentário
Compartilhar em outros sites
4 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.