FlavioMuniz » Blog » Ajax

Combobox de Estados e Cidades com jQuery

flaviomuniz — Fri, 30 Jul 2010 01:03:26 +0000

Olá,
Eu sei que todo mundo ja teve uma vez, algum problema com combobox de estados e cidades brasileiras,
utilizamos varias técnicas com ajax para fazer isso, mas hoje, vou mostra uma maneira muito mais simples
e muito mais rapida, utilizando a jQuery.

Primeiramente, não precisa ser nenhum expert em jQuery para fazer isso, basta conhecer as funções
e saber para que elas server, e com isso, só botar a criatividade em prática.

Bom, vamos la, primeiro, vou postar o código da jQuery, que é o mais facil.”colocar dentro de estados.php”

<script type="text/javascript">// 

    $(document).ready(function(){

        $('#uf').change(function(){

            $('#cidades').load('cidades.php?uf='+$('#uf').val());

        });

    });

// ]]>

change, load e val();,

Agora, vamos montar o combobox de estado. “estados.php”

<select name="uf" id="uf">

    <option>Selecione o Estado</option>

    <option value="AC"> Acre</option>

    <option value="AL"> Alagoas</option>

    <option value="AP"> Amapá</option>

    <option value="AM"> Amazonas</option>

    <option value="BA"> Bahia</option>

    <option value="CE"> Ceará</option>

    <option value="DF"> Distrito Federal</option>

    <option value="GO"> Goiás</option>

    <option value="ES"> Espírito Santo</option>

    <option value="MA"> Maranhão</option>

    <option value="MT"> Mato Grosso</option>

    <option value="MS"> Mato Grosso do Sul</option>

    <option value="MG"> Minas Gerais</option>

    <option value="PA"> Pará</option>

    <option value="PB"> Paraiba</option>

    <option value="PR"> Paraná</option>

    <option value="PE"> Pernambuco</option>

    <option value="PI"> Piauí</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"> Rondônia</option>

    <option value="RR"> Rorâima</option>

    <option value="SP"> São Paulo</option>

    <option value="SC"> Santa Catarina</option>

    <option value="SE"> Sergipe</option>

    <option value="TO"> Tocantins</option>

</select>

Agora que temos todos os estados, incluindo o distrito federal,
vamos montar o option de cidades.
“cidades.php”

$valor_uf = $_GET['uf'];

mysql_connect('localhost','root','');

mysql_select_db('test');

$query = mysql_query("SELECT * FROM cidades WHERE uf = '".$valor_uf."'");

while($rs = mysql_fetch_array($query)){

echo "]."'>".$rs['nome']."";

}

?>

Pronto, temos um combobox de estado e cidade montado em menos de 10 minutos.

Veja o exemplo.

é isso ae, espero que tenham gostado, é bem simples, mas bem funcional.

Simples assim

Marcar e Desmarcar checkbox com a jQuery.

flaviomuniz — Thu, 15 Apr 2010 13:42:57 +0000

Olá, hoje vou mostrar uma forma simples de se trabalhar com checkbox com a jquery. Lembrando de sempre prestar atenção nos códigos que não tem erro.
Vamos lá, como sempre, vou postar o código e explicar em comentários o que cada linha faz, acho essa técnica muito mais eficaz.
Primeiramente vamos ao nosso html.

        <input type="checkbox" id="checkCheckbox"/>

        <br />

        <ul>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

            <li><input type="checkbox" name="checkbox[]" class="checkboxes" value=""/></li>

        </ul>

Depois de termos definido as classes e os id`s, vamos criar a nossa jquery.

$(document).ready(function(){

            $("#checkCheckbox").click(function()

            {

                //Verifica se esta checado ou não.

                var check_uncheck = this.checked;

                //Essa função each serve pra fazer iterações entre arrays.

                $(".checkboxes").each(function()

                {

                    //Check/Uncheck, cada clique no #checkCheckbox define o status, se é check ou uncheck

                    this.checked = check_uncheck;

                });

            });

        });

Bem simples não?
Veja um exemplo do código em funcionamento, aqui.

Alternativa para o uso do siFR com o cakephp

flaviomuniz — Sat, 06 Feb 2010 03:42:35 +0000

Olá,
Recentemente em alguns projetos, a nossa equipe precisou usar fontes que não são de sistemas em titulos e textos espalhados pelo site, tentamos usar o siFR mas não deu muito certo, pois a gente precisava trocar algumas labels com ajax e não funcionaria ja que ele cria o embed da font assim que o site é carregado.
Então, devido a esse grande problemas que encontramos pela frente, resolvi utilizar um helper do cakephp para transformar aquele texto em imagens de 4k cada.
Depois da ideia ter sido aprovada, então começei a criar, vamos la.

Primeiramente vamos utilizar 2 helpers do cakephp encontrados no bakery do cakephp
text_image.php e o font_site.php.
Depois de ter baixado os helpers acima e colocado no diretório helpers dentro de views,
vamos chamar o nosso helper na controller da página que vamos usar, eu precisei colocar na app_controller
pois precisei usar em todo site, mas para página especificas, o bom é usar somente na controller da página.

var $helpers = array("...", "FontSite");

Bom, continuando…
Depois de chamar o helper na app_controller, precisamos criar um diretório “fonts” dentro do diretório da nossa app

Dentro desse diretório, vamos colocar as fontes que vamos usar no projeto no meu caso foi a ITC Avant Garde PRO, mas podemos usar qualquer uma, claro, não vamos usar uma fonte de sistema para fazer isso.
Depois de criado, vamos criar dentro do nosso diretório “webroot -> img” um diretório para deixar as imagens geradas, eu criei um font_site, isso a gente altera dentro do helper.

//Nome do diretório onde vão ficar as imagens geradas.

var $__imagePath = 'font_site';

Depois de tudo certo, vamos chamar o helper para gerar a nossa imagem.
A gente pode criar um método no nosso helper para não precisar chamar em todas as páginas a função que gera a imagem, mas vou postar aqui do modo simples, ai fica de cada um fazer de um modo melhor.
Vamos la,

//Nome da fonte

$textImage->fontFile = "Avant.ttf";

//Tamanho da fonte

$textImage->setPointSize(36);

//Cor da fonte

$textImage->setColor("#818181");

//BG da fonte

$textImage->setBgColor("#ffffff");

//Texto para ser transformado em imagem

echo $textImage->image("www.flaviomuniz.com");

Podemos tambem, utilizar um background, setBgColor.

Vejam alguns resultados com as fontes geradas.

Não é necessário instalar as fontes, basta copiar para dentro do diretório fonts sitado a cima.

Espero ter ajudado.
Até a próxima.

[ad] Empty ad slot (#1)!

Galeria com jQuery e Ajax

flaviomuniz — Thu, 18 Jun 2009 15:06:58 +0000

Hoje vou mostrar como é simples fazer um galeria de imagens com jquery e ajax.
Com a jquery vamos fazer os efeitos para as imagens e com o Ajax vamos fazer o carregamento das imagens.
Vamos la, primeiro vc precisa do plugin da jquery.
Agora vamos criar a função para mostrar as imagens

$(function(){

        $("#boxImages").find("a").click(function(){

            var loader = $(".loading");

            var newImage = $(this).attr('href');

            var bigImage = $('#fullImage img').not(".loading");

            $.ajax({

              type:"GET",

              url: $(this).attr('href'),

              success:function(data){

              },

              complete: function(){

                loader.hide();

              },

              beforeSend: function(){

                loader.show();

                bigImage.attr('src', newImage);

              }

            });

            return false;

        });

    });

Precisaremos de uma imagem de “loading” para mostrar que a imagem esta sendo carregada

http://flaviomuniz.com/_img/loading.gif.

Vamos a estrutura do html

    
    <script type="text/javascript">

        $ (document).ready(function(){

            $(".loading").hide();

        });

    script>

O plugin default.js é onde se executa todas as funções para mostrar as imagens.

<div id="fullImage">

<img src="http://flaviomuniz.com/_img/loading.gif" class="loading" alt="Loading" title="Loading" width="52" height="21" />

<img src="" />

</div>

    <ul id="boxImages">

        <li><a href="linux1Big.jpg"><img src="linux.jpg" style="width:64px;"/></a></li>

        <li><a href="FirefoxLogo-main_Full.jpg"><img src="icon_firefox.gif" style="width:64px;"/></a></li>

    <ul>

Na div “fullImage” é onde a imagem grande irá aparecer.
Na ul boxImages, são as imagens em thumbnail com o link apontando para a imagem ja ampliada.
Com a estrura feita em ul li, fica facil você implementar o jcarousel para listar as imagens, ou algum outro plugin que você achar melhor.

Veja o resultado final
Demo