Auto Combo em Ajax - Customizável
Coisas Complexas, ajax, scripts 6 Comments »Buenas…
Ao estudar um pouco de ajax, desenvolvi um script bastante útil e fácil de ser utilizado, baseado em um script de cidades/estados cuja autoria desconheço…
O script funciona da seguinte forma:
1- O select ‘1′ é preenchidos com os dados de uma tabela escolhida (no arquivo xml.php) do bd.
2- Ao selecionar um campo do select ‘1′, o select 2 é preenchido a partir dos campos de uma segunda tabela do bd que contenha, em um campo escolhido (no arquivo xml.php), o mesmo valor (value) do select ‘1′.
O código: disponível para download logo abaixo
[index.php ]
<?
include(”xml.php”);
?>
<script type=”text/javascript” src=”combo.js”></script>
<body onLoad=”Dados(document.getElementById(’select1′).value);”>
<?
$sql = “SELECT * FROM $tb1_nome”;
$sql = mysql_query($sql);
$row = mysql_num_rows($sql);
?>
<form>
<select name=”select1″ id=”select1″ onChange=”Dados(this.value);”>
<? for($i=0; $i<$row; $i++) { ?>
<option value=”<? echo mysql_result($sql, $i, $tb1_valor); ?>”>
<? echo mysql_result($sql, $i, $tb1_desc); ?></option>
<? } ?>
</select><br>
<select name=”select2″ id=”select2″>
<option id=”opcoes” value=”0″>Selecione a categoria</option>
</select>
</form>
[xml.php] - Este arquivo contém as variáveis a serem editadas.
<?
############## EDITAR #######################
$bd_host = ‘localhost’; // host… 99,9% de chance de ser localhost..
$bd_name = ‘bd’; //nome do banco de dados
$bd_user = ‘root’; //nome do usuário
$bd_pass = ’senha’; //senha do usuário
$tb1_nome = ‘tabela1′; //nome da tabela que contém os valores do select 1
$tb1_valor = ‘valor’; //campo da tabela que ficará no ‘value’ do option
$tb1_desc = ‘nome’; //campo da tabela que ficará na descrição do option… a parte visível
$tb2_nome = ‘tabela2′; //nome da tabela que contém os valores do select 2
$tb2_valor = ‘valor’; //campo da tabela que ficará no ‘value’ do option
$tb2_desc = ‘nome’; //campo da tabela que ficará na descrição do option… a parte visível
$tb2_comp = ‘tipo’; //campo da tabela 2 para comparação com o value da select 1… ‘WHERE’ $tb_comp =
###############################################
$connection = @mysql_connect($bd_host, $bd_user, $bd_pass) or die(”Unable to connect to database!”);
@mysql_select_db($bd_name, $connection) or die(”Unable to select database!”);
$sql = ” SELECT * FROM $tb2_nome WHERE $tb2_comp = ‘$_POST[vsel1]‘ “;
$sql = mysql_query($sql);
$row = mysql_num_rows($sql);
if($row) {
$xml = “<?xml version=\”1.0\” encoding=\”ISO-8859-1\”?>\n”;
$xml .= “<cidades>\n”;
for($i=0; $i<$row; $i++) {
$codigo = mysql_result($sql, $i, $tb2_valor);
$descricao = mysql_result($sql, $i, $tb2_desc);
$xml .= “<cidade>\n”;
$xml .= “<codigo>”.$codigo.”</codigo>\n”;
$xml .= “<descricao>”.ucfirst(strtolower($descricao)).”</descricao>\n”;
$xml .= “</cidade>\n”;
}
$xml.= “</cidades>\n”;
Header(”Content-type: application/xml; charset=iso-8859-1″);
}
echo $xml;
?>
[combo.js]
function Dados(valor) {
try {
ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch(e) {
try {
ajax = new ActiveXObject(”Msxml2.XMLHTTP”);
}
catch(ex) {
try {
ajax = new XMLHttpRequest();
}
catch(exc) {
alert(”Esse browser não tem recursos para uso do Ajax”);
ajax = null;
}
}
}
if(ajax) {
document.forms[0].select2.options.length = 1;
idOpcao = document.getElementById(”opcoes”);
ajax.open(”POST”, “xml.php”, true);
ajax.setRequestHeader(”Content-Type”, “application/x-www-form-urlencoded”);
ajax.onreadystatechange = function() {
if(ajax.readyState == 1) {
idOpcao.innerHTML = “Carregando…”;
}
if(ajax.readyState == 4 ) {
if(ajax.responseXML) {
processXML(ajax.responseXML);
}
else {
idOpcao.innerHTML = “Selecione a categoria”;
}
}
}
var params = “vsel1=”+valor;
ajax.send(params);
}
}
function processXML(obj){
var dataArray = obj.getElementsByTagName(”cidade”);
if(dataArray.length > 0) {
document.forms[0].select2.options.length = 0;
for(var i = 0 ; i < dataArray.length ; i++) {
var item = dataArray[i];
var codigo = item.getElementsByTagName(”codigo”)[0].firstChild.nodeValue;
var descricao = item.getElementsByTagName(”descricao”)[0].firstChild.nodeValue;
var novo = document.createElement(”option”);
novo.setAttribute(”id”, “opcoes”);
novo.value = codigo;
novo.text = descricao;
document.forms[0].select2.options.add(novo);
}
}
else {
idOpcao.innerHTML = “Selecione a categoria”;
}
}
############
Para fazer o download dos arquivos do script clique aqui
############
Qualquer dúvida quanto a utilização, envie por comentário.
Carregando…