DGmike
Calma! não entre em pânico! Amanhã (talvez) tem novo post…
October 4, 2008 at 2:10 pm
filed under eventos, javascript
Tagged ajax, biblioteca, cidades, estados, google, html, httpRequest, javascript, nacionais, opensource, xml
Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os estados e cidades nacionais. Sempre tenho que explicar uma serie de coisas como objeto httpRequest ou mesmo um mínimo de jQuery.
Pensando nos programadores do Brasil, desenvolvi este script de selects de estado e cidades do Brasil
Pensando nisso, resolvi escrever uma biblioteca que resolva este problema, além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.
Outra vantagem é que o arquivo possui os estados e cidades no próprio core, assim não é necessário de interação com o servidor, o que deixa a resposta ao usuário mais rápida, deixando-o satisfeito. Ah, e sem falar que ele é crossbrowser e funciona com (ou sem) todas as bibliotecas conhecidas (como jQuery, prototype, dojo ou mootools) por trabalhar com apenas as funções que já existem no javascript.
Decidi hospedá-lo no servidor do google porque assim é mais improvável que hajam problemas de servidor em qualquer servidor que eu hospede. Para instalá-lo em seu site, coloque a seguinte instrução entre suas tags head.
<script type="text/javascript" src="http://cidades-estados-js.googlecode.com/files/cidades-estados-v0.2.js"></script>
Coloque este código (ou algo parecido) no seu html, para poder referenciar para a biblioteca.
Estado: <select id="estado" name="estado"></select> Cidade: <select id="cidade" name="cidade"></select>
A forma mais simples de ativar a biblioteca é esta, usando o objeto dgCidadesEstados passando os objetos que serão serão usados como select de estados e cidades respectivamente. Veja um exemplo.
window.onload = function() {
new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}
O projeto é opensource, então se sua cidade não está na biblioteca, por favor me informe que eu mesmo colocarei no projeto.
[update]
No total, são 5.560 cidades cadastradas na biblioteca, a diferença é que não está colocado cada um em uma linha (como em instruções SQL) e sim cada estado em uma linha, o que diminui consideravelmente o tamanho do arquivo, se o seu Banco de Dados tiver mais que isso, por favor envie um comentário que procurarei atualizar o banco o mais breve possível.
Danilo
cara… eu tenho uma base.. que diz ter todas as cidades do Brasil…. tem 5564…
se tiver interesse, dá um toque.
[]s
admin
Olá Danilo,
A base que eu estou usando é uma que encontrei disponivel na internet (google, é claro), mas não contei quantas cidades tinha mas acredito que esteja completa., se puder me passar, a comunidade agradece.
Client-side » Cidades e Estados em Javascript
on October 6, 2008 at 11:23 am
[...] amigo DGMike publicou: Cidades e Estados em Javascript: Uma das dúvidas mais comuns para quem está começando ajax é criar uma função que chame os [...]
Combo de estados e cidades em ajax - Seus problemas acabaram » El Micox
on October 6, 2008 at 1:46 pm
[...] Veja a solução do cara lá no blog dele: Combo de estados e cidades em ajax by DGMike [...]
Leonardo A. Souza
Gostei!
Mas eu prefiro fazer isso pelo servidor, se o cliente tiver com o js desligado adeus formulário. [:)]
Wilson
@Leonardo A. Souza, todo mundo diz isso, e eu sei que é realmente
uma boa prática - fazer sites pensando em pessoas sem javascripts,
mas me responde umas coisas:
- qual a porcentagem de usuários que estão com o javascript desligado?
- você faz “pelo servidor” como? pq se vc filtrar seleção de cidades baseada na
escolha do estado, por uma combo, sem sair da página, obrigatóriamente
terá que usar javascript.
Ao DGmike, autor do projeto, parabéns!
Ricardo
Tb acho que não tem todas as cidades, tb tenho em bd umas 5 mil cidades, se precisar dá um toque1
Walter Rodrigo de Sá Cruz
Oficialmente são 5564 (ou 5565?) cidades.. vou tentar descobrir as que faltam e te avisar.
Eduardo Ottaviani
Achei muito interessante isso, muito útil, parabéns!
Para o problema de acessibilidade no caso de javascript desligado, uma forma que vejo para solucionar isso é usar js para redirecionar links numa tela anterior. Se o js estiver habilitado ele direciona o link para um lugar a tela do ajax, senão, abre o link padrão para uma página que traz os dados do banco…
@Wilson, se nos preocuparmos apenas com números, faríamos apenas sites para o iE. Acho interessante pensar na minoria também.
Aquele abraço.
DGmike
@leonardo, @Eduardo não havia pensado nessas pessoas há principio, mas nas próximas versões você poderá colocar os campos que deseja subtiruir, então poderá fazer campos text (ou mesmo divs inteiras com select e submit) que o dg-cidades-estados-js irá substituí-los por seus selects dinâmicos.
Logo, vocês poderão fazer assim*:
[form]
[fieldset id="fls_estado"][legend]Estado[/legend]
[select name="estado"]…[/select]
[button type="submit" name="seleciona_estado"/]
[/fieldset]
[fieldset id="fls_cidade" class="hide_if_not_seleciona_estado_post"][legend]Cidade[/legend]
[select name="estado"]…[/select]
[/fieldset]
[/form]
* Isto é um html genérico, não considere se está bem escrito ou não, se é isso o que você usa ou não, é só um exemplo. Daí, a dinamica de como fazer isso fica por conta do seu PHP, ASP, Python, Ruby, Java, etc.
Farei o mesmo exemplo para scripts em linguagens server para fazer esse trabalho. Considero que é mais leve carregar dados de leitura na RAM do servidor (no mínimo são 2Gb de memória de um servidor báscio) do que fazer conexão com o Banco de Dados de forma criptografada para fazer uma consulta filtrada e só depois ter o resultado. Isso envolve uma coneção desnecessária gastando até mais memória, dependendo da situação. Por isso resolvi alocar na memória mesmo.
Eduardo Ottaviani
Isso aí!
Na época que eu tinha feito isso eu usava uma página para o usuário escolher o estado, pegava os parâmetros da requisição e retornava a tela do estado com as cidades, para o caso de javascript desabilitado. Acho que na época eu nem usei Bd, se bem me lembro tinha organizado em arquivos separados em php rsrs.
Testei hoje só, muito rápido, postei no fórum, não tenha dúvidas de que vai ser muito aproveitado seu código.
Obrigado.
Édipo Costa
Existe uma versão do js que roda no servidor… então, pode ser feito é se o user não tiver o js ativado, vc da uma redirecionada para a pagina com js que roda no servidor, hj eu não sei o quanto essa alternativa é viavel, mas existe. Estou pensando em fazer meu TCC em acessibilidade ou em um “FrameWork”, em que te permita escrever js com mais conceitos de orientação a objetos, quem sabe uma fusão dos dois não seja uma boa idéai.
Christian
“Existe uma versão do js que roda no servidor” -> javascript rodando em servidor? Ué, não é client-side?
No mais, sensacional a idéia, Mike! Vou baixar e testar. Parabéns
DGmike
@Édipo eu ainda não ouvi falar de js que roda no servidor, sei que chamar um script do servidor (PHP, ASP, Py, Rb) como se fosse um js e seu código gerado é interpretado pelo javascript. Infelizmente não é o caso pois o Google não me permite rodar programas lá (por enquanto).
@Christian A intenção não é baixar e usar no seu site, mas usar direto do servidor google:
”
[...] além de estar disponível em uma única URL (JavaScript, hospedado pelo Google Code”>hospedado no google) no qual qualquer um pode utilizar. Assim, o usuário guarda em cache apenas um arquivo, e se o usuário passar em um site que chama a biblioteca, no próximo site que ele entrar e usar a biblioteca de novo, carregará o arquivo em cache e não precisará fazer o download de novo.
”
Mesmo assim, obrigado!
Espero que goste do resultado.
Felipe Morais
Cara, muito bom.. mas testei no IE7 e deu um problema… o ultimo campo sempre é “undefined”.
Abraço
Alisson Patrício
Mike, tudo joia?
Muito boa sua idéia, parabéns!
Ainda não tive oportunidade de usar, mas em breve usarei.
Tenho uma base de dados com 5577 cidades, um pouco maior que a sua, se tiver interesse posso te mandar.
Tenho vontade de fazer um script para pegar todas as cidades brasileiras no site do IBGE, da mesma forma que fiz para pegar todos os países do mundo em português, mas ultimamente falta tempo.
Abraços!
Muito Obrigado!
Alex
Como eu consigo obter um ID para adicionar no banco de dados da cidade selecionada??
Amauri
Como eu faço pra puxar os dados do script e mostrar nos campos caso eu tenha q fazer alterações dos registros?
Duhh
Mais como eu implemento isso tudo na pagina HTML ?
essas partes do JS eu não entendi.
esse conteúdo aqui
window.onload = function() {
new dgCidadesEstados(
document.getElementById(’estado’),
document.getElementById(’cidade’)
);
}
Onde ele entra em que lugar ???
e as atualizações ?
function $(elm){
return document.getElementById(elm);
}function $(elm){
return document.getElementById(elm);
}
?
Duhh
Me disculp, consegui resolver o problema acima.
listou certinho, apenas com erros de acentuação agora nos nomes dos valores no campo.
preciso achar uma forma de eliminar agora isso.
Odair
Parabens pela iniciativa de colocar essa funcionalidade num lugar publico e aberto para todos os desenvolvedores.
Gostaria de uma dica de como fazer para corrigir os erros de acentuções que aparecem ao executar o codigo.
aguardo um retorno
Abraços
Odair
Donsier
Parabéns pela iniciativa. Para tentar deixá-la mais completa seria uma boa opção adicionar as mesorregioes de cada estado. Essa opção tem sido muito utilizada para definir em que parte do estado se localiza tal cidade. Como muitos de nossos estados sao maiores que muitos países as mesorregioes tem sido úteis para buscas por regiões. Vejas as mesorregioes de cada estado brasileiro em: http://pt.wikipedia.org/wiki/Categoria:Mesorregi%C3%B5es_do_Brasil. t++
Junior
Pessoal,
não estou conseguindo fazer funcionar, não estou entendendo aonde tenho que colocar o terceiro passo:
window.onload = function() {
new dgCidadesEstados(document.getElementById(’estado’), document.getElementById(’cidade’), true);
}
Por favor, “desenhe” esse passo.
Abraços.
Diego
Untitled Document
window.onload = function() {
new dgCidadesEstados(document.getElementById(’estado’), document.getElementById(’cidade’), true);
}
Estado:
Cidade:
Diego
Coloca isso dentro do :
script type=”text/javascript”
window.onload = function() {
new dgCidadesEstados(document.getElementById(’estado’), document.getElementById(’cidade’), true);
}
/script
Coloca isso acima do BODY, tb dentro das :
script type=”text/javascript” src=”cidades-estados-v0.2.js”
/script
Cria dois campos:
Estado: select id=”estado” name=”estado”
/select
Cidade: select id=”cidade” name=”cidade”
/select
Resolvido o problema =)