jQuery – text com Autocomplete

Para inserir um autocomplete a um campo text de formulário, basta inserir a biblioteca jQuery, e o componente jquery.autocomplete.

link para download do autocomplete: http://www.pengoworks.com/workshop/jquery/lib/jquery.autocomplete.js

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript” src=”js/jquery.autocomplete.js”></script>
<script type=”text/javascript”>
// JavaScript Document
var nomes = [ "Paulo Ricardo", "Sandro", "Fabiano", "Lojas Colono", "While Man", "Meiketref" ];
jQuery(function()
{
jQuery(“#campos”).autocomplete(nomes, {
matchContains: true,
minChars: 0
});
});
</script>

Exemplo do campo:

<input type=”text” name=”nome” id=”nome” class=”campos” />

jQuery – Post em Ajax

Para realizar um post em ajax com o componente javascript jQuery é bastante simples.

Basta configurar o javascritpt com os seguintes atributos, segundo o exemplo abaixo:

<script type=”text/javascript” src=”js/jquery.js”></script>
<script type=”text/javascript”>
jQuery(function()
{
//posta
jQuery(“#bt_enviar”).click(function() {
jQuery.ajax({
type: “POST”,
url: “posta_carrega.php”,
data: jQuery(“form”).serialize(),
success: function(msg){
jQuery(“#msg_sucesso”).html(msg);
jQuery(“form”)[ 0 ].reset();
jQuery(“#tabela”).animate({height: ‘toggle’, opacity: ‘toggle’},”slow”);
//alert(msg);
}
});
});
});
</script>

Ou seja, quando o usuário clicar no botão cujo id seja bt_enviar o aplicativo irá postar (type: “POST”) no php posta_carrega.php(url: “posta_carrega.php”), os atributos do form relativo a aquele botão.

Exemplo do form:

<form id=”formEnvia” name=”formEnvia” method=”post” action=”#”>
Nome: <input type=”text” name=”nome” id=”nome” class=”campos” />
E-mail: <input name=”email” type=”text” class=”campos” id=”email” />
Mensagem: <textarea name=”texto” rows=”3″ class=”campos” id=”texto”></textarea>

<input name=”bt_enviar” type=”submit” class=”campos” id=”bt_enviar” value=”Envia” onclick=”return false” />
</form>

O retorno será excrito na tag cujo o id seja “msg_sucesso” (jQuery(“#msg_sucesso”).html(msg);) e então o formulário recebe as seguintes ações: apagar os campos: jQuery(“form”)[ 0 ].reset(); e animar para que ele suma: jQuery(“#tabela”).animate({height: ‘toggle’, opacity: ‘toggle’},”slow”);

Exemplo da div:

<div id=”msg_sucesso”>&nbsp;</div>

jQuery – Gerar html de uma div dinamicamente

Essa função tem por finalidade gerar html´s dinamicamente, ou seja, fazer com que uma pagina altere os dados de acordo com variáveis de entrada.

No exemplo abaixo, teremos  uma página de produtos que será gerada perante os argumentos de categoria, sub_categoria e tipo. Esses dados serão enviados via um link na página, que possua essas variáveis, e então será postado em um php que tratara esses dados e gerará um html de resposta.

No exemplo abaixo, temos 2 condições: caso a resposta da consulta retorne um html, ele será inserido na div id_desc_produtos, mas caso retorne vaziu, não escreve nada. retornando o javascript como false.

<script language=”JavaScript” src=”js/jquery.js”></script>
<script language=”JavaScript”>
function montalink(a,b,c)
{
linka = ‘_produto_descricao.php?id_linha=’+a+’&id_categoria=’+b+’&id_sub_categoria=’+c;

$.ajax({
url: linka,
cache: false,
success: function(html){
if (html != “”)
{
$(“#id_desc_produtos”).html(html);
}
else
{
return false;
}
}
});
}
</script>

Exemplo de link:

<a href=”#” onclick=”montalink(\”.urlencode($rsNivelA->Fields(‘id_linha’)).’\',\”.urlencode($rsNivelB->Fields(‘id_categoria’)).’\',\’\'); return false;” class=”submenu”>produto 1</a>

Exemplo da div:

<div id=”id_desc_produtos”>
</div>

jQuery – Checkbox – Selecionar todos dinâmicamente

Segue a lógica do anteiror.. só necessita que seja criada uma function que possua a variavel do nome do bloco. Segue um exempo de javascript abaixo:

<script language=”JavaScript” src=”js/jquery.js”></script>
<script language=”JavaScript”>
function seleciona_grupo(a)
{
jQuery(document).ready(function(){
jQuery(“#” + jQuery(“#sel_all_”+a).attr(‘rel’) + ” INPUT[type='checkbox']“).each( function() {
jQuery(this).attr(‘checked’, !jQuery(this).attr(‘checked’));
});
return false;
});
}
</script>

jQuery – Checkbox – Selecionar todos

Selecionar todos os checkbox de uma uma tag

Primeiramente insira o javascript abaixo, com o jQuery instalado.

<script language=”JavaScript” src=”js/jquery.js”></script>
<script language=”JavaScript”>
// inverte seleção
jQuery(document).ready(function(){
jQuery(“#sel_all”).click( function() {
jQuery(“#” + jQuery(this).attr(‘rel’) + ” INPUT[type='checkbox']“).each( function() {
jQuery(this).attr(‘checked’, !jQuery(this).attr(‘checked’));
});
return false;
});
});
</script>

Então crie uma link ou checkbox para selecionar todos:

<input type=”checkbox” name=”apagar0″ id=”sel_all” rel=”lista” />

Depois o bloco com a tag e o id relacionando ao atributo do link:

<div  id=”lista”>

<input type=”checkbox” name=”chek1″ value=”1″ />

<input type=”checkbox” name=”chek2″ value=”1″ />

<input type=”checkbox” name=”chek3″ value=”1″ />

</div>

Assim, quando clicar no primeiro checkbox, o javascript ira calcular todos os checkbox relacionados a aqele atributo e ira seleciona-los.