Do SelectBox para o ListBox

Outubro 1, 2007 on 3:21 pm | In Informatica, php, JavaScript, JQuery, Tutorial | 6 Comments

Tutorialzinho para criarmos um selectbox e um listbox apartir do formulário em html e então através do JQuery adicionarmos os itens no Listbox e então pegarmos o valor por método POST no PHP.

A idéia do tutorial seria uma lista de itens adicionado a um listbox, formando um carrinho de compras dos itens, para depois então enviarmos tudo de uma vez so através do POST do form, gerando uma array para o PHP, é um dos clássicos em programação. Como muita gente não sabe da possibilidade em html/php deixo um tutorial para se ter uma idéia de como utilizar esse recurso.
Sem mais delongas vamos ao código, primeiramente o form, claramente veremos que o nosso listbox na verdade é um selectbox com a tag de multiple (virando assim um listbox):

PLAIN TEXT
HTML:
  1. <form method="post" enctype="multipart/form-data" name="F1" id="F1">
  2. <select name="func" id="func">
  3. <option value="1">Numero 1</option>
  4. <option value="2">Numero 2</option>
  5. <option value="3">Numero 3</option>
  6. </select>
  7.  
  8.  
  9. <input type="button" name="add" value="Adicionar" />
  10.  
  11.  
  12. <select multiple="multiple" id="eq" name="eq[]" size="7">
  13. </select>
  14.  
  15.  
  16. <input name="Submit2" type="submit" id="EnvioDados" value="ENVIAR DADOS">
  17. </form>

Agora podemos escrever o código do JQuery com DOM para facilitar nossa vida:

PLAIN TEXT
JAVASCRIPT:
  1. $().ready(function() {
  2.  
  3. //Click do botão ADD
  4. $("input[@name=add]").click(function(){
  5. var id_selecionado = document.F1.func.selectedIndex;
  6. var valor_selecionado = document.F1.func.options[id_selecionado].text;
  7. var id_indice_selecionado = document.F1.func.options[id_selecionado].value;
  8. $('select[@id=eq]').append('<option value="'+ id_indice_selecionado +'">'+ valor_selecionado +'</option>');
  9.  
  10. //desabilita o valor adicionado;
  11. document.F1.func.options[id_selecionado].disabled=true;
  12. });
  13.  
  14. // Click do botao do submit
  15. $('input[@name=Submit2]').click(function(){
  16. var x=document.getElementById("eq");
  17. for (i=0;i<x.length;i++){
  18. x.options[i].selected=true;
  19. }
  20. return true;
  21. });
  22. })

Muito legal né? Mas e para remover ? Bom, para remover eu recomendo dar uma procurada na net sobre um plugin para ListBox usando o JQuery, vocês não querem tudo na mão né? Dúvidas e sugestões é so comentar.


JQuery - Ajax métodos

Agosto 26, 2007 on 9:42 pm | In JQuery, AJAX | No Comments

Lista de métodos do JQuery para se usar o Ajax, como eu utilizei alguns vou falar sobre os outros, uma breve descrição para utilização, como usar vide o manual:

$.ajax( propriedades )
Abre uma página remota utilizando o requeste de HTTP. Pode ser utilizado com envio de POST, GET e leitura de scripts JS e muito mais.

$.ajaxSetup ( propriedades )
Seta todas propriedades GLOBAL do request do ajax.

$.ajaxTimeout( time )
Seta o tempo no qual ocorrerá a espera antes da execução da requisição do ajax.

$.get( url, parametros, retorno da chamada )
Lê uma página remota enviando os dados via GET, mandando URL, parametros são os dados do GET e possibilidade de fazer controle de error no retorno.

$.getJSON( url, parametros, retorno da chamada )
Lê dados JSON utilizando requisição HTTP.

$.getScript( url, retorno da chamada )
Lê e executa um script JavaScript utilizando requisição HTTP GET.

$.post( ? vide outros topicos ?)

ajaxComplete( retorno )
Função que será executada após o ajax ter completado.

ajaxError( retorno )
Função que será executada caso a requisição falhe.

ajaxSend( retorno )
Função que será executada antes da requisição do ajax ser enviado.

ajaxStop( retorno )
Função que será executada após todas requisições ajax terminarem.

ajaxSucess( retorno )
Função que será executada após todas requisições ajax forem bem sucedidas.

load( url, parametros, retorno )
Lê um arquivo HTML e injeta isto ao DOM.

Então estão ae todas ou pelos menos algumas possibilidades que o JQuery lhe da para trabalhar com AJAX, espero que ajude a organizar um pouco as idéias e melhorar na produção, ganhar um pouco em código, pois pelo que eu vi, em vez de usarem os métodos prontos o pessoal tem usado DOM e as vezes retornado problemas diante do I.E.


Show/Hide (Abrir/Fechar) do JQuery para Menus

Junho 13, 2007 on 11:15 am | In Informatica, Trabalho, php, JavaScript, JQuery | 8 Comments

Vou screver esse tutorial com base no MORE Showing, MORE hiding, do site Learning JQuery, no qual é recomendadissimo a leitura para quem entende de inglês e quer aprender mais sobre Jquery, site cheio de dicas e tutoriais...

Se você está perdido aqui e nunca viu nada sobre Jquery, você pode começar com o tutorial original Traduzido.

Para os elementos do Abrir e Fechar do Menu vamos usar somente HTML e complementos de CSS para ficar 'bonito'.

PLAIN TEXT
HTML:
  1. <div class="try">
  2. <h3>Musicas</h3>
  4. <span class="interno">Offscpring </span>
  5.  
  6. <span class="interno">Insonic </span>
  7.  
  8. <span class="interno">Killer Buds </span>
  9.  
  10. <span class="interno">DJ SKILLO </span>
  11.  
  12. <span class="interno">DJ PASSA MAL </span>
  13.  
  14. <span class="interno">DJ silici0 </span></div>
  15. <h3>Videos</h3>
  17. <span class="interno">Malabares </span>
  18.  
  19. <span class="interno">Clips</span>
  20.  
  21. <span class="interno">Musica</span>
  22.  
  23. <span class="interno">Filmes</span></div>
  24. <h3>XXX</h3>
  26. <span class="interno">Blonde</span>
  27.  
  28. <span class="interno">Branca</span>
  29.  
  30. <span class="interno">Verde</span>
  31.  
  32. <span class="interno">Amarelo</span></div>
  33. </div>

Vamos ao CSS para melhorar o visual:

PLAIN TEXT
CSS:
  1. body {
  2. margin-left: 0px;
  3. margin-top: 0px;
  4. margin-right: 0px;
  5. margin-bottom: 0px;
  6. }
  7. .try{
  8. font-style:normal;
  9. font-family:Arial;
  10. font-size:14px;
  11. padding-left:20px;
  12. }
  13. .try h3 {
  14. margin: 0;
  15. padding: .25em;
  16. background: #99FFCC;
  17. border-top: 1px solid #999966;
  18. border-bottom: 1px solid #999966;
  19. }
  20. .interno{
  21. margin: 0;
  22. padding: .25em;
  23. padding-left:15px;
  24. }

Essa opção permite que cada sessão possa ser aberta e fechada independente de outras. Esse é o modo mais fácil de fazer o menu de árvore.

O método que iremos usar é .slidetoggle(), é um elemento que escorrega para baixo o menu quando for abrir e escorrega para cima quando for fechar.

Primeiramente vamos esconder todos itens do sub-menu e também vamos conectar cada click para cada h3.

PLAIN TEXT
JAVASCRIPT:
  1. $(document).ready(function() {
  2. $('div.try:eq(0)> div').hide();
  3. $('div.try:eq(0)> h3').click(function() {
  4.  
  5. });
  6. });

Usamos :eq() que é um seletor que passa por todos DIV e H3, dando HIDE e então criando opção do click.

Então colocaremos o método .slidetoggle() dentro do método click. Como sabemos que cada DIV que queremos mudar a opção para Mostrar/Esconder é a próxima tag de cada H3, podemos usar o metodo .next():

PLAIN TEXT
JAVASCRIPT:
  1. $(document).ready(function() {
  2. $('div.try:eq(0)> div').hide();
  3. $('div.try:eq(0)> h3').click(function() {
  4. $(this).next().slideToggle('fast');
  5. });
  6. });

Nesta ultima linha que adicionamos nos dizemos que para o H3 clicado nos referimos o metodo .slidetoggle() para a próxima TAG.

Supersimples não é mesmo? Você pode ver o código de outros modos nesse exemple que eu fiz: Exemplo. Dúvidas? Sugestões? So comentar... abraços


Expressões do JQuery - XPath

Maio 22, 2007 on 11:04 am | In Informatica, JavaScript, JQuery | 3 Comments

Vou falar um pouco sobre modo de como acessar DIVS, TAGS html entre outros, para melhorar a idéia do modelo como um todo.

Existem diversas maneiras de se acessar e usar as expressões do JQuery para acessar a div ou tag que você quer mudar um atributo e/ou valor. Vou falar basicamente de acesso por nomes  DIV e CLASS, e da XPath que é um modelo fácil de acessar.

Imaginemos que você tenha o seguinte código:

PLAIN TEXT
HTML:
  1. <div id='viu'>
  2. <span class='cla'>TEXTO</span>
  3. <form method='POST'>
  4. <input type='text' name='3' id='viu' />
  5. <input type='text' id='naoviu' />
  6. </form></div>

A dúvida fica no ar, como acessar a div viu e o input viu?

Se formos acessar a div ID='viu', podemos simplesmente fazer o seguinte:

PLAIN TEXT
JAVASCRIPT:
  1. $('div#viu')

Onde então, você viu que para acessar um ID você usa #

Para acessarmos o input ID='viu', pode simplesmente fazer o seguinte:

PLAIN TEXT
JAVASCRIPT:
  1. $('input#viu')

Ja sei, você sacou a idéia.. hm.... e para acessar uma classe? No nosso caso a classe 'cla'!

PLAIN TEXT
JAVASCRIPT:
  1. $('span.cla')

PLAIN TEXT
JAVASCRIPT:
  1. $('.cla')

Para acessar o id 'naoviu' ?

PLAIN TEXT
JAVASCRIPT:
  1. $('#naoviu')

E para usar XPath ? Que tem a ver?  Você pode usar os metodos de XPath para acessar os dados, metodos e atributos também... Maneira mais facil ao meu ver.

Para acessar o input com name = 3, façamos...

PLAIN TEXT
JAVASCRIPT:
  1. $('input[@name=3')

Acho que deu para entender um pouco de como funciona as expressões para acesso de valores, atributos e metodos de tudo quanto é TAG xhtml, DIV e outros afins... ehhehee


Ajax com JQuery : Download

Maio 20, 2007 on 6:07 pm | In Informatica, php, JQuery, AJAX | No Comments

A pedidos estou disponibilizando o download dos arquivos do post : Ajax + Jquery = Facilidade para que possam identificar melhor os script escritos no tutorial. Basta clicar no link abaixo para fazer o download dos arquivos.
AJQDownload
Dúvidas é comentar. Abraços e boa diversão.


Populando combobox com JQuery ( Ajax )

Maio 10, 2007 on 10:22 am | In Informatica, php, JavaScript, JQuery, AJAX | 53 Comments

Mais uma vez vamos a um tutorialzinho de como popular um combobox apartir de outra seleção, a idéia aqui é a tão famosa Seleciona o estado e retorna todas as cidades em outro combobox sem dar reload na página, para isso vamos economizar bastante código e tempo utilizando o framework do JQuery.

Primeiro vamos ter uma tabela com todas as cidades brasileiras... são 5564 (pelo que eu achei) e é um pouco dificil escreever tudo isso no input para dentro de um banco de dados, por isso segue o link para pegar esse sql pronto : Todas cidades brasileiras em SQL.

Depois de criar vamos criar o form, ai como isso vai ficar grande, vou economizar codigo colocando em umas linhas, mas deem preferencia para linhas organizadas (hehehe):

PLAIN TEXT
HTML:
  1. <form name="frmAjax">
  2.  
  3. <label for="listEstados"> Estado:&nbsp;</label>
  4. <select name="listEstados">
  5. <option value="0"> Selecione o estado>></option>
  6. <option value="ac">Acre</option>
  7. <option value="al">Alagoas</option>
  8. <option value="ap">Amapa</option>
  9. <option value="am">Amazonas</option>
  10. <option value="ba">Bahia</option>
  11. <option value="ce">Ceara</option>
  12. <option value="df">Distrito Federal</option>
  13. <option value="es">Espirito Santo</option>
  14. <option value="go">Goias</option><option value="ma">Maranhao</option><option value="mt">Mato Grosso</option><option value="ms">Mato Grosso do Sul</option><option value="mg">Minhas Gerais</option><option value="pa">Para</option><option value="pb">Paraiba</option><option value="pr">Parana</option><option value="pe">Pernambuco</option><option value="pi">Piaui</option><option value="rj">Rio de Janeiro</option><option value="rn">Rio Grande do Norte</option><option value="rs">Rio Grande do Sul</option><option value="ro">Rondonia</option><option value="rr">Roraima</option><option value="sc">Santa Catarina</option><option value="sp">Sao Paulo</option><option value="se">Sergipe</option><option value="to">Tocantins</option>
  15. </select>
  16.  
  17.  
  18.  
  19. <label for="listCidades">Cidade:&nbsp;</label>
  20. <select name="listCidades">
  21. <option id="opcoes" value="0">-- Primeiro selecione o estado --</option>
  22. </select>
  23.  
  24. </form>

Agora vamos ao uso do Jquery, primeiro chamamos o framework, caso você não esteja acustumado, ou nunca viu como utilizar ele, basta pegar ele e chamar ele na página, COMO?

PLAIN TEXT
HTML:
  1. <script type="text/javascript" xsrc="js/jquery.js"></script>

Agora vamos realmente ao código que interessa. Primeiramente eu digo que irei chamar um método quando o botão de 'listEstados' for 'mudado':

PLAIN TEXT
JAVASCRIPT:
  1. $("select[@name=listEstados]").change(function(){
  2. });

Depois então que eu mudar ou melhor selecionar um Estado, vou mudar a opção das cidades para Procurando, afim de informar o usuário, que estou procurando os dados para ele:

PLAIN TEXT
JAVASCRIPT:
  1. $('select[@name=listCidades]').html('Procurando :::::::');

Logo em seguida chamo o AJAX, envio um POST para ele do estado que selecionei e com isso digo o arquivo que irei passar esse POST e recebo uma resposta:
Enviando para arquivo : buscacidade.php
Enviando a variavel estado : 'valordo form, estado que eu selecionar'
Então recebo uma reposta chamada 'resposta';

PLAIN TEXT
JAVASCRIPT:
  1. $.post('buscacidade.php',
  2. { estado : $(this).val() },
  3. function(resposta){
  4. }
  5. );

Apos a Resposta basta eu mudar todo a listagem de cidade que eu recebi como resposta:

PLAIN TEXT
JAVASCRIPT:
  1. $('select[@name=listCidades]').html(resposta);

O arquivo buscacidade.php se pareçe com isso aqui :

PLAIN TEXT
PHP:
  1. if (isset($_POST['estado'])){
  2.  
  3. $res=mysql_query('SELECT * FROM cidades WHERE uf = \''.$_POST['estado'].'\'');
  4. $cont=0;
  5. while($ok=mysql_fetch_array($res)){
  6. $vai=crossUrlDecode($ok['municipio']);
  7. echo ''.$vai.'';
  8. $cont++;
  9. }
  10. }else{
  11. echo 'Erro no envio dos dados';
  12. }

O código por completo, como ficou ?

PLAIN TEXT
JAVASCRIPT:
  1. $().ready(function() {
  2. $("select[@name=listEstados]").change(function(){
  3. $('select[@name=listCidades]').html('<option value="sda">Procurando :::::::</option>');
  4. $.post('buscacidade.php',
  5. { estado : $(this).val() },
  6. function(resposta){
  7.  
  8. $('select[@name=listCidades]').html(resposta);
  9. }
  10.  
  11. );
  12. });
  13. });

Para ver esse código todo em funcionamento clique AQUI.

É isso ae, super simples e funcional; alem de ser rápido de se iplementar, acho que meu maior tempo gasto foi escreevendo esse tutorial, demorou 2 dias (??), hehehe. Dúvidas? Sugestões? So comentar...


— Next Page »

  

 Assine o feed