Manipular formulário

alexandremanowar · Junho 9, 2008

E ae pessoal beleza

Eu estou estudando ajax, e já fiz uns exemplos bacana usando dropdown e outros teste! Recentemente estudei um totoria e fiz um modelo de dois dropdown básicos que ao clicar no primeiro ele enche o segundo com informação, porém eu gostaria de saber como fazer algo um pouco diferente, por exemplo a idéia que quero aprender é a seguinte: Tenho por exemplo 5 nomes na tela um abaixo do outro, como segue abaixo:

Rio de Janeiro

São Paulo

Minas

Pernanbuco

Cada nome desses acima seria um link, quando clicar em um link desses eu quero que os dados dele apareça abaixo dele empurrando os demais links, por exemplo se eu clicar em São Paulo, ficaria assim:

Rio de Janeiro

São Paulo

....São Paulo

....Itagua

....Poá

....Suzando

Minas

Pernanbuco

E isso acontece o mesmo se eu clicar nos demais e se eu clicar em São Paulo novamente ele retira dos dados. Como falei eu fiz algo parecido com dropdown, mas nesse caso teria que mecher com o layout do form ou seja com Dom(usando css acredito), e claro que os dados que aparecem abaixo do link clicado vem do bando, eu tentei fazer aqui mas ainda não consegui, será alguém pode me ajudar a fazer isso?

Olha o código que fiz com o dropdown:

Essa é a index:

<html>
<head>
&lt;script language="javascript" src="VerificaBrownser.js"></script>
&lt;script language="javascript" src="funcao.js"></script>
</head>
<body>
<?
    include "conecta.php";
    $busca = mysql_query("select * from estados order by DSC_ESTADO");
    $linha = mysql_num_rows($busca);
?>

 <h1>AJAX + PHP</h1>
      Carregando cidades sem dar refresh na página.
      <br><br>
      
      <form name="frmAjax">
         Estado:&nbsp;
         <select name="listEstados" onChange="Dados(this.value);">
            <option value="0">--Selecione o estado >></option>
            <? for($i=0; $i<$linha; $i++)
            { 
                $reg = mysql_fetch_row($busca);
            ?>
               <option value="<? echo $reg[0] ?>"><? echo $reg[1]; ?></option>
            <? } ?>
         </select>
      
         <br><br>
         Cidade:&nbsp;
         <select name="listCidades">
            <option id="opcoes" value="0">--Primeiro selecione o estado--</option>
         </select>
      </form>

</body>
</html>

Esses são os dois arquivos js que fiz:

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

function Dados(valor) 
{ 
if(ajax) 
{
 //deixa apenas o elemento 1 no option, os outros são excluídos
    document.forms[0].listCidades.options.length = 1;
         
    idOpcao  = document.getElementById("opcoes");
         
    ajax.open("POST", "cidades.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         
    ajax.onreadystatechange = function() 
    {
     //enquanto estiver processando...emite a msg de carregando
        if(ajax.readyState == 1) 
        {
            idOpcao.innerHTML = "Carregando...!";   
        }
        //após ser processado - chama função processXML que vai varrer os dados
        if(ajax.readyState == 4 ) 
        {
            if(ajax.responseXML) 
            {
                processXML(ajax.responseXML);
            }
            else 
            {
                //caso não seja um arquivo XML emite a mensagem abaixo
                idOpcao.innerHTML = "--Primeiro selecione o estado--";
            }
        }
    }
         //passa o código do estado escolhido
         var params = "estado="+valor;
         ajax.send(params);
}
}      
function processXML(obj)
{
  //pega a tag cidade
    var dataArray   = obj.getElementsByTagName("cidade");
      
      //total de elementos contidos na tag cidade
    if(dataArray.length > 0) 
    {
         //percorre o arquivo XML paara extrair os dados
         for(var i = 0; i < dataArray.length; i++) 
         {
            var item = dataArray[i];
            //contéudo dos campos no arquivo XML
            var codigo    =  item.getElementsByTagName("codigo")[0].firstChild.nodeValue;
            var descricao =  item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
            
            idOpcao.innerHTML = "--Selecione uma das opções abaixo--";
            
            //cria um novo option dinamicamente  
            var novo = document.createElement("option");
                //atribui um ID a esse elemento
                novo.setAttribute("id", "opcoes");
                //atribui um valor
                novo.value = codigo;
                //atribui um texto
                novo.text  = descricao;
                //finalmente adiciona o novo elemento
                document.forms[0].listCidades.options.add(novo);
         }
      }
      else 
      {
        //caso o XML volte vazio, printa a mensagem abaixo
        idOpcao.innerHTML = "--Primeiro selecione o estado--";
      }      
 }

Esse é o código em php que consulta o banco:

<?
include "conecta.php";         

            
$estado = $_POST["estado"];           

//QUERY  
$resultado = mysql_query("select * from cidades where COD_ESTADO='$estado' order by DSC_CIDADE"); 
$linha = mysql_num_rows($resultado);
if($linha>0) 
{                
   //XML
   $xml  = "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>\n";
   $xml .= "<cidades>\n";               
             
   for($i=0; $i<$linha; $i++) 
   { 
      $reg = mysql_fetch_row($resultado);
      $codigo = $reg[0]; 
      $descricao = $reg[1];
      $xml .= "<cidade>\n";     
      $xml .= "<codigo>".$codigo."</codigo>\n";                  
      $xml .= "<descricao>".$descricao."</descricao>\n";         
      $xml .= "</cidade>\n";    
   }               
   
   $xml.= "</cidades>\n";
   
   //CABEÇALHO
   Header("Content-type: application/xml; charset=iso-8859-1"); 
}                                               

//PRINTA O RESULTADO  
echo $xml;            
?>

Alguém pode me explicar como fazer?

Valeu

Editado Junho 9, 2008 por alexandremanowar

Eric Freitas · Junho 9, 2008

você quer popular o mesmo comboBox com os outros dados? ou quer criar outro?

você pode criar outro útilizando createElement do js assim q o status da requisição do ajax seja 4.

agora não tenho nada pronto pra te passar. mas tenho certeza q no fórum tem algo sobre isso.

se não tiver de qualquer forma assim q eu voltar para casa procuro postar um exemplo pra você =D

Espero ter ajudado =D

alexandremanowar · Junho 10, 2008

E ae beleza

Valeu pela força.

Então eu não quero popular outro combobox, na verdade esse código que eu deixei foi um exemplo que fiz com combobox, na verdade agora o que eu quero é fazer um com links apenas, a idéia é clicar em um dos links e ele exibe os dados dele direto no na tela. Tenho por exemplo 5 nomes na tela um abaixo do outro, como segue abaixo:

Rio de Janeiro

São Paulo

Minas

Pernanbuco

Ou seja os dados estão direto na tela sem combox

Cada nome desses acima seria um link, quando clicar em um link desses eu quero que os dados dele apareça abaixo dele empurrando os demais links, por exemplo se eu clicar em São Paulo, ficaria assim:

Rio de Janeiro

São Paulo

....São Paulo

....Itagua

....Poá

....Suzando

Minas

Pernanbuco

Entedeu a idéia? você tem idéia de como fazer?

Valeu pela atenção

Eduardo Penna · Junho 10, 2008

Boa tarde amigo.

Se você consegui fazer o esquema com dropdown, esse é a mesma coisa...

Você está usando XHTML? Bom, vou mostrar com HTML normal.

Vamos pensar em um estado apenas e com o seguinte código:

<ul>
<li id="liEstado_<?=$reg[0]?>"><a href="#" onclick="loadCities('<?=$reg[0]?>')">São Paulo</a></li>
</ul>

Note que eu coloquei um id para o li para o javascript saber onde colocar o resultado da consulta via AJAX. Ok, então quando o usuário clicar no estado, vai chamar uma função javascript passando o id do estado clicado. Ae sua função deve chamar um página, no caso PHP, via AJAX passando o id do estado, como você fez com o dropdown. Na página em PHP, você recebe o id, faz a consulta e retorna algo assim:

<ul>
<li>São Paulo</li>
<li>Itagua</li>
<li>Poá</li>
<li>Suzano</li>
</ul>

Maravilha, na sua função javascript você joga esse resultado, algo assim (usando aquele id colocado no li):

(...)
        if(ajax.readyState == 4 ) 
        {

                //Pega o li do estado clicado
                var liEstado = document.getElementById('liEstado_'+id);

                //Acrescenta o retorno nesse li
                liEstado.innerHTML = liEstado.innerHTML + ajax.responseText;
        }
        (...)

Veja se é isso.

Abraço

Editado Junho 10, 2008 por Eduardo Penna

alexandremanowar · Junho 11, 2008

E ae beleza

Valeu pela força, fiz uns testes aqui usando xml mesmo porque acho melher de trabalhar com a lógica que você deixou, cheguei no seguinte código:

function loadCities(valor) 
{ 
if(ajax) 
{
    
    idOpcao  = document.getElementById(valor);
     
    ajax.open("POST", "cidades.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);
            }
            
        }
    }
         //passa o código do estado escolhido
         var params = "estado="+valor;
         ajax.send(params);
}
}      
function processXML(obj)
{
  
    var dataArray   = obj.getElementsByTagName("dados");
    var liEstado;
      
    if(dataArray.length > 0) 
    {
         //percorre o arquivo XML paara extrair os dados
         for(var i = 0; i < dataArray.length; i++) 
         {
            var item = dataArray[i];
            //contéudo dos campos no arquivo XML
            var listaCidade    =  item.getElementsByTagName("li")[0].firstChild.nodeValue;
            alert(listaCidade);

         }
      }
     
 }

O meu resultado final esta no alert(listaCidade); ele exibe os alertas com as cidades do estado que foi clicado, o problema é básico eu estou exibindo os resultados com alert mas eu quero colocar eles dentro da página, já usei comando como:

...
var ExibeDados;
var listaCidade    =  item.getElementsByTagName("li")[0].firstChild.nodeValue;
ExibeDado.innerHTML = listaCidades;

E outros parecidos mas não exibe nada na tela, como faço para exibir os dados na tela? Com o alert esta exibindo mas não consigo imprimir na tela.

Valeu pela força

Entrar

Manipular formulário

Pergunta

alexandremanowar

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

Eric Freitas

Link para o comentário

Compartilhar em outros sites

alexandremanowar

Link para o comentário

Compartilhar em outros sites

Eduardo Penna

Link para o comentário

Compartilhar em outros sites

alexandremanowar

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades