Ele e o  <a href=”http://plugins.jquery.com/files/jquery.bestupper.min.js.txt”>Bestupper </a>.

Usando:

Importando jQuery e Bestupper:

<script src="jquery.min.js" type="text/javascript">  </script>
<script src="jquery.bestupper.min.js"  type="text/javascript"> </script>
<

Adicionando a funcao no head da pagina:

<script type="text/javascript">
$(document).ready(function() {
$('.bestupper').bestupper({
ln: 'tr'
});
});
</script>

e adicionar o class=”bestupper”, nos elementos que voce deseja =D

<input type="text" id="txtInput"class="bestupper" / >

Hoje precisei fazer um DatePicker funcionar dentro de um Dialog do JQuery UI.

O problema é que quando você faz isso.. o DatePicker fica atrás da janela de diálogo e a documentação do JQuery não comenta nada sobre isso (pelo menos eu não achei).

Esse problema é facilmente resolvido adicionando o seguinte código no seu CSS:

#ui-datepicker-div
{
    z-index: 1003;
}

Pronto! Boa Sorte!

——————————————————————–

Edit:

aproveitando o mesmo post para dar mais uma dica sobre o DatePicker, vamos deixar ele em português brasil:

    // CONFIGURAÇÃO DO DATEPICKER DO JQUERYUI PARA PT-BR
    $.datepicker.setDefaults({dateFormat: 'dd/mm/yy',
                              dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
                              dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
                              dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
                              monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro', 'Outubro','Novembro','Dezembro'],
                              monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set', 'Out','Nov','Dez'],
                              nextText: 'Próximo',
                              prevText: 'Anterior'
                             });

O que é JSON?

JSON ou JavaScript Object Notation é um formato de texto para serialização de estrutura de dados. Ela é derivada de objetos literais do Javascript, como definido  no ECMAScript Programming Language Standard, Third Edition [ECMA].

JSON pode representar quatro tipos primitivos (strings, números, valores booleans e valores nulos) e dois tipos estruturados (objetos e arrays).

- Bem isso é o que diz a especificação “RCF 4627 application/json”

Um exemplo de JSON é:

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Se você ainda não está familiarizado com a estrutura do JSON recomendo fortemente a dar uma passada no site oficial

Bem.. vamos esclarecer algumas coisas.

• Quando utilizar JSON?
  Digamos que você tenha um código Ajax que faz uma requisição com parâmetros via POST ou GET para uma página externa, e essa página externa retorna dados dos quais você tem que tratar. Esse é um bom lugar para os dados serem retornados com JSON
• O cabeçalho da resposta da página externa precisa retonar o MIME do tipo “Content-type: application/json”  (não é obrigatório mas é bom seguir a regulamentação)
• O JSON é suportado por diversas linguagens, como PHP, C#, C, Lua, JavaScript é claro e diversas outras.
• JSON utiliza UTF-8 (somente e pronto. Nada de iso-8859 e etc. assim como no ajax)

Qual o objetivo desse post?

O meu objetivo aqui é mostrar como você pode recuperar dados JSON de uma fonte externa e usa-los no seu script com JQuery.

Normalmente, você tem uma linguagem dinâmica que busca dados no banco de dados ou seja lá o que for e retorna os dados em JSON.

Você com seu lindo script Ajax quer retornar esses dados e mostrar para o usuário sem precisar recarregar a página.

Para isso vamos supor que uma página PHP retorne o seguinte JSON.

{"id_categoria":"2","tipo":"PRODUTOS","titulo":"COLECOES","descricao":"MACIO TESTE"}

Aqui temos, um objeto JSON com 4 membros:

• Membro “id_categoria” com o valor “2″
• Membro “tipo” com o valor “PRODUTOS”
• Membro “titulo” com o valor “COLECOES”
• Membro “descricao” com valor “MACIO TESTE”

Não vou retratar aqui como o PHP ou o C# retorna dados JSON, mas dê uma olhada em “LINKS” no final da página, para mais informações.

Agora vamos usar o método $.getJSON() do JQuery para manipular os dados, a sintax é:

jQuery.getJSON( url, [data], [callback] )

• URL -> A url que vai ser requisitada (obrigatório)
• [data] -> dados a serem enviados via POST (opcional)
• [callback] -> Função que vai ser executada quando os dados forem carregados com sucesso (opcional)

Supondo que temos 3 INPUT do tipo TEXT e queremos colocar esses dados dentro deles, as IDs desses INPUT são respectivamente:

1. id_categoriaUdt
2. tipoUdt
3. tituloUdt
4. descricaoUdt

A página a ser requisitada se chama categoria.php:

$.getJSON("../actions/admin/categoria.php", function(json){
            $('#tipoUdt').val(json.tipo);
            $('#tituloUdt').val(json.titulo);
            $('#descricaoUdt').val(json.descricao);
            } // fim do callback
); // fim do .getJSON()

Simples assim.

pronto, você pode manipular o resultado de retorno, nesse caso “json” como um objeto javascript.

val() é também um método JQuery, utilizado nesse caso para atribuir um valor ao INPUT do nosso FORM HTML

Este foi um exemplo muito simples, apenas uma introdução a como manipular objetos JSON com JavaScript (JQuery).

Boa Sorte!

- Links

• Página Oficial do JSON -> json.org
• Documentação do $.getJSON() -> docs.jquery.com
• Usando JSONRequest -> json.org
• Função eval() do JavaScript -> w3schools.com
• Usando JSON com PHP -> php.net
• Usando JSON com C# -> msdn.microsoft.com
  Ou procure no Object Browser do Visual Studio

Até que eu descobri que existe extensões para o Dreamweaver do JQuery UI!!!

De cara fiz o download:

É rápido, produtivo e funcional!

Para fazer o download (grátis) acesse http://www.adobe.com/cfusion/exchange/ e faça uma busca por JQuery.

Após instalados com o Adobe Extension Manager você terá eles disponíveis na sua paleta do Dreamweaver.

Basta clicar no item que ele será colocado dentro do documento atual.

Você também pode customizar seu widget mechendo nos arquivos CSS ou na estrutura do código.

Todo widget do JQuery UI tem no local das propriedades um link para a documentação, que é muito bem explicada tornando extremamente fácil e produtivo modificar as propriedades dos objetos via código.

Na maioria das vezes você só altera as propriedades do objeto em uma única linha e pronto.

VEJA EXEMPLO

Links:

• http://www.adobe.com/cfusion/exchange/
• http://jqueryui.com/

Document Object Model (DOM) ou Modelo de Objeto Documental em português, é uma plataforma de interface e linguagem neutra que permite que programas e scripts acessar e atualizar dinamicamente o conteúdo, estrutura e estilo de documentos. DOM define um caminho padronizado para acessar e manipular elementos HTML.

Este é um exemplo de hierarquia sobre os elementos HTML.
Imagem retirada do w3school.

Agora voltando ao foco, você já entendeu que com o método .load() podemos carregar qualquer conteúdo de outra página dentro de qualquer elemento HTML, essa é a principal característica do Ajax, vamos a sintaxe:

load( url, [data], [callback] )

• URL -> A url da página HTML à ser carregada
• [data] -> Dados a serem enviados ao servidor, usando POST.
• [callback] -> Com esse parâmetro, você pode pegar os dados de retorno e tratá-los como quiser.

Exemplo 1:

$('#conteudo').load("dados.html");

Aqui simplesmente carregamos o conteúdo da página ‘dados.html‘ para dentro do elemento que tem a ID ‘conteudo‘.

Exemplo 2:

$('#conteudo').load("dados.html #cont2 li");

Neste outro caso, especificamos que queremos somente o conteúdo da TAG ‘<li>‘ que se encontra dentro da DIV id=’cont2′.

Exemplo 3:

$('#conteudo').load("dados.php?nome=AlexandreSantos");

Agora carregamos o conteúdo da página ‘dados.php‘ enviando pelo método GET a variável ‘nome‘ com o valor ‘AlexandreSantos‘.

Exemplo 4:

$('#conteudo').load("dados.php", {nome: "Alexandre Santos"});

Agora ao invés de usarmos o método GET para enviar valores para outra página usamos o POST, definindo os valores a serem enviados pelo segundo parâmetro.

Agora vamos por em prática, vocês podem ver um exemplo do resultado final aqui: http://diariodecodigos.info/exjqload/

index.php

<html>

<head>
<script language="javascript">
$(document).ready(function(){
	$('#botao').click(function(){
		$('#conteudo').load("dados.html #cont2 li");
	}); // FIM $('#botao').click();
}); // FIM $(document).ready();
</script>
</head>

<body>

<p> A Baixo temos uma DIV chamada Conteúdo da qual é o elemento que receberá o conteúdo HTML</p>
<p> <a href="#" id="botao">Clique Aqui</a></p>

<hr color="#0000FF" />

<div id='conteudo'>

</div>

</body>

dados.html

Esse é a outra página HTML da qual tem esse conteúdo!

<div id="cont2">
    conteúdo dentro da DIV 'cont2'

    <ul>
    	<li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
    </ul>
</div>

A mais ou menos um ano trás eu havia comprado um livro sobre Ajax, era a época da Web 2.0 (uma febre).

Hoje? Me arrependo completamente de ter comprado aquele livro e ter aprendido a manipular o XmlHttpRequest  na mão que nem um maluco!

Não me arrependo de ter aprendido Ajax na unha mas sim de ter gastando dinheiro =p.

JQuery: esse cara é tão fascinante e quem já conhece sabe.

Mas vamos ao que interesse antes, para os mais novos se familiarizarem segue a baixo um exemplo de código comentado (clique para ampliar):

Imagem Retirada e Traduzida de webdesignerwall.com

Agora que vocês estão mais íntimos, vamos para o assunto principal, entender como funciona o método Post() e por em prática! Primeiro a sintaxe:

jQuery.post( url, [data], [callback], [type] )

• URL -> A página para qual você quer fazer a requisição (método POST)
• [data] ->  dados a ser passado no POST
• [callback] -> Função à ser executada quando os dados são carregados com sucesso
• [type] -> Tipo de dado à ser retornado pela função de callback  pode ser: “xml”, “html”, “script”, “json”, “jsonp”, ou “text”.
  O padrão é string.

Primeiramente nós temos que incluir a biblioteca (jquery) na nossa página:

<script type="text/javascript" src="jquery-1.3.2.js"></script>

Agora temos o formulário:

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome"><br>

<label for="idade">Idade:</label>
<input type="text" id="idade" name="idade"><br>

<input type="submit" value="Cadastrar" id="cadastrar">

<div id="resultado">
</div>

<!-- Não esqueçam de usar o atributo "id" ele é importante -->

A página php com a função:

$nome = $_REQUEST['nomeUser'];
$idade = $_REQUEST['idadeUser'];

// comando para inserir os dados no banco de dados

if($return == true){
echo "Sucesso!";
}else{
echo "Error!";
}

Agora o famoso Jquery:

$(document).ready(function(){
 $('#cadastrar').click(function(){

 // Pega o valor dos inputs
 var nome = $('#nome').val();
 var idade = $('#idade').val();

 // O DIVINO
 $.post('cadastrarUser.php', {nomeUser: nome, idadeUser: idade}, function(data){
 $('#resultado').text(data)}
  ); // Fim do POST
 }); // Fim do Click
}); // Fim do Document Read

Pronto seja feliz!

Dica:

Segue uma imagem a baixo com a maioria das funções do Jquery, se não todas, é muito bom para lembrar (clique para ampliar, não lembro de onde peguei ela, por isso não tem a fonte).

Fonte: Meus Favoritos

P.S.: Esses códigos foram feitos para propósito de exemplos, não testei, caso tenha algum erro por favor comentem.

Abraços.