Combo box com ajax e Jquery

18 de janeiro de 2010

Olá amigos venho hoje através deste artigo mostrar como criar um combo box com ajax usando Jquery, tenho certeza que será muito útil para muita gente, principalmente para quem ainda não conhece esta biblioteca fantástica de javascript que é a Jquery.

Existem outras bibliotecas e principalmente outros métodos para criar um combo-box com ajax, mas usarei neste artigo Jquery pela sua simplicidade e facilidade que ela proporciona. Até porque na web todos querem fazer as coisas muito rápido, então nada melhor que Jquery quando se fala em velocidade de desenvolvimento.

Vamos lá a primeira coisa que devemos fazer é o download da Jquery neste endereço: http://jquery.com/

Após o download vamos colocá-la na pasta do nosso projeto. Não esqueçam ok.

Agora com a biblioteca na pasta dos nossos arquivos, vamos começar a criar a página em html que servirá como exemplo para o nosso artigo.

<html>
			<head>
				<title>Ajax com Jquery</title>
				<script type="text/javascript" src="js/jquery.js"></script>
				<script type="text/javascript" src="js/cidadeAjax.js"></script>
			</head>
			<body>
				<form action="#" name="#" method="post">
					<label>Estado</label>
					<select name="uf">
						<option value="SP">SP</option>
						<option value="RJ">RJ</option>
						<option value="MG">MG</option>
					</select>
					<label>Cidade</label>
					<select name="cidades">
						<option value="0">--Primeiro selecione o estado--</option>
					</select>
				</form>
			</body>
		</html>

Pronto com o nosso arquivo html completo vamos criar o nosso script para realizar a mágica, vamos lá, eu por motivo de organização prefiro criar em um arquivo javascript separado da página então vamos criá-lo com o nome de cidadeAjax.js e colocar este código abaixo:

     //Aqui nós vamos iniciar a função após a mudança do select uf
     $("select[@name=uf]").change(function(){
          //Com isso nós vamos mudar o segundo select para procurando
          $('select[@name=cidades]').html('Procurando :::::::');
          //Aqui nós fazemos a requisição ajax para a página php utilizando Jquery
          $.post('buscacidade.php', { estado : $(this).val() },function(resposta){
               //Nesta linha nós preenchemos o select cidades com a resposta da
              //página php obtida no nosso arquivo php
              $('select[@name=cidades]').html(resposta);
          });
     });

E lógico pra finalizar vamos criar o nosso arquivo php que serve para fazer a busca no banco de dados e retornar a lista de cidades. Estou fazendo isto pensando que vocês já tem pelo menos uma tabela no banco de dados com as cidades cadastradas. Quem quiser pode adaptar o script para buscas as cidades de uma lista XML.

Pois bem aqui está o arquivo PHP vamos chamá-lo de buscacidade.php:

     if (isset($_POST['estado'])){
          $res=mysql_query('SELECT cidade FROM cidades WHERE uf = \''.
          $_POST['estado'].'\'');
          while($dados = mysql_fetch_array($res)){
               $cidades .= $dados['cidade'];
          }
          echo ''.$cidades.'';
     }else{
          echo 'Erro no envio dos dados';
     }

Pronto com estes arquivos já estamos com o nosso combo-box funcionando, logicamente estes arquivos podem e devem ser alterados de acordo com a sua necessidade. É possivel que ocorra erros de acentuação com quem estiver usando banco de dados SqlServer, para que isto não aconteça tente decodificar a variável cidades com a função utf8_encode.

Espero que tenha ficado claro o funcionamento do script, não tive a intenção de explicar detalhadamente, porque fiz este artigo pensando em demonstrar o funcionamento do framework Jquery e não PHP nem HTML, portanto espero que o leitor que for implementar este recurso já tenha prévios conhecimentos nestas linguagens, tudo bem. Dúvidadas coloquem ai embaixo, até mais.

Anúncios

Criando tabelas zebradas com JQuery

10 de outubro de 2009

Olá leitores, hoje vou mostrar como como criar uma tabela zebrada com JQuery, a utilização deste framework para esta atividade é muito simples assim como a realização de tudo com JQuery. A única exigência para a aula de hoje é conhecer um pouco de HTML e CSS.

Para colocar o framework na sua página primeiro você precisa baixá-lo caso não o possua, no site você poderá fazer o download e descompactá-lo na sua pasta onde estiver o seu site.

O código para colocá-lo em sua página é este:

<script src=”js/jquery.js” type=”text/javascript”></script>

Abaixo está o código que devemos colocar para que as tabelas fiquem zebradas.

<script type=”text/javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

Esta é nossa página HTML que usaremos para testar a execução do código Java script.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>licao 3</title>

<script src=”js/jquery.js” type=”text/javascript”></script>

<style type=”text/css”>

tr {

background-color: #fff;

}

.alt {

background-color: #ccc;

}

.highlight {font-weight:bold; font-style: italic;}

.cor{

background-color: #FF0000;

}

</style>

<script language=”javascript”>

$(document).ready(function() {

$(‘tr:nth-child(even)’).addClass(‘alt’);

$(‘td:contains(Henry)’).parent().find(‘td:eq(1)’)

.addClass(‘highlight’).end().find(‘td:eq(2)’).addClass(‘highlight’);

});

</script>

</head>

<body>

<table>

<tr>

<td>As You Like It</td>

<td>Comedy</td>

<td></td>

</tr>

<tr>

<td>All’s Well that Ends Well</td>

<td>Comedy</td>

<td>1601</td>

</tr>

<tr>

<td>Hamlet</td>

<td>Tragedy</td>

<td>1604</td>

</tr>

<tr>

<td>Macbeth</td>

<td>Tragedy</td>

<td>1606</td>

</tr>

</table>

</body>

</html>

Explicando o código JQuery, na primeira linha dizemos que o código só deve ser rodado depois que a página for totalmente carregada.

$(document).ready(function() {

Depois na segunda linha está a mágica dizemos com o comando $(‘tr:nth-child(even)’) que as linhas da tabela devem a cada 1 linha mudar a cor para a definida na classe ‘alt’ pelo comando css, assim mudamos a cor de fundo da linha.

$(‘tr:nth-child(even)’).addClass(‘alt’);

Pronto, terminamos nossa tabela zebrada, dúvidas deixem um comentário que explico com prazer.

Até mais.


Bluefish porque não?

2 de fevereiro de 2008

  Eu vejo muita gente que começa a usar o ubuntu ou qualquer outra distro em forums perguntando qual editor usar para escrever seus códigos “html, php, python etc…”, ou perguntando como instalar o dreamweaver no linux. Não entendo porque esse pessoal insiste em instalar essas porcarias monopolizadas, mas tudo bem gosto é gosto agora eu pergunto porque o pessoal não usa os programas de código aberto como o bluefish, quanta plus,  e outros.

Tudo bem ai vem um e fala, “mas eu quero um editor visual porque eu não sei html”, tá certo que não tem nenhuma solução para isso afinal não conheço nenhum programa que seja visual que preste no linux, mas isso não é desculpa pra não instalar o bluefish e começar a aprender você não acha.

E pro pessoal que já tem um conhecimento maior e acha que o bluefish não corresponde às suas necessidades tem a opção de instalar o eclipse , netbeans e outras IDES boas.

Fica um recado pro pessoal não instalem essas porcarias de código proprietário no seu pc. Seja Livre use programas open source e não se limite a usar o lixo que te empurram por ai.