quinta-feira, 20 de setembro de 2007

Preenchendo um campo select com Ajax no vRaptor


        Finalmente após 10 horas de trabalho consegui fazer minha primeira atividade, utilizando Ajax. E como este é um problema que a maioria dos programadores que desenvolvem para a Web costumam enfrentar, resolvi postar a solução encontrada.

1ª Importe o arquivo js do Prototype , responsável em implementar as funções do Ajax.

<script type="text/javascript" src="${prototypeJsURL}"></script>

2ª Neste trecho construiremos a parte principal da função Ajax.

<script type="text/javascript">
function ajaxRequest() {

// Aqui você deve informar a sua Logic
var url = 'modelo.prepareListaEstado.ajax.logic';

// Recuperando o indice do campo select
var dropdownIndex = document.getElementById('cbPais').selectedIndex;

// Recuperando o ID do Pais que foi selecionado no campo <select>
var idPais = document.getElementById('cbEstacao')[dropdownIndex].value;

// Passando o ID como parâmetro
var pars = 'idPais='+idPais;

// Corpo do meu método Ájax
var myAjax = new Ajax.Request(url,
{
method: 'get',
parameters: pars,
onComplete: showResponse
}
);
}

// Este método é chamado após a sua Logic, ser executada.
function showResponse(data){
var jsonObject = eval('(' + data.responseText + ')');

// Recupera a Lista de estados
var estados = jsonObject.listaEstado;

// Recupera o seu campo select que será preenchido
var campoSelect = document.getElementById("cbEstadoResultado");

// Variável que armazenará os options do seu campo select
var select = "";

// Com este for você preencherá a variável que corresponde ao
// seu campo select
for(i=0;i<estados.length;i++) {
select += "<option value = " + estados[i].idEstado + "> " + estados[i].nome + "</option>";
}

// Aqui você preenche o seu campo select com , os valores do estado
campoSelect.innerHTML = select;
}
</script>

// Para que você possa utilizar, os scripts acima a sua página deve estar da seguinte maneira.
<select id="cbPais" name="idPais" onchange="javascript:ajaxRequest();">
<option value="0">Selecione</option>
<option value="1">Brasil</option>
<option value="2">Japão</option>
<option value="3">China</option>
</select>

<select id="cbEstado" name="idEstado">

</select>

As informações aqui postadas complementam as informações do site do vRaptor.

5 comentários:

JUNIOR disse...

amigo blz? poderia me enviar um exemplo de conexao access usando ODBC usando jsp e struts? se n for problema pra vc.. tipo uma tela de login, passando do login basta abrir uma outra pagina e so. abraços

JUNIOR disse...

amigo blz? poderia me enviar um exemplo de conexao access usando ODBC usando jsp e struts? se n for problema pra vc.. tipo uma tela de login, passando do login basta abrir uma outra pagina e so. abraços

meu email: njuniorba@yahoo.com.br

Anônimo disse...

È isso vitão....
então to precisando uma tela q use ejb 3.0 e faça login vc teria como fazer e me mandar?


hahahahh

Unknown disse...
Este comentário foi removido pelo autor.
Unknown disse...

Amigo blz? Não conseguir entender algumas variáveis:

"cbEstadoResultado" e 'cbEstacao'

Grato pela ajuda e parabéns pelo post.